profile dialog box ui and dummy data

src/components/Post/PostHeader.jsx

@@ -14,6 +14,7 @@ import {
 } from "@mui/material";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { doc, updateDoc } from "firebase/firestore";
+import { useEffect, useState } from "react";
 
 import MoreHorizOutlinedIcon from "@mui/icons-material/MoreHorizOutlined";
 import ProfileDialogBox from "../ProfileDialogBox";
@@ -22,32 +23,65 @@ import { db } from "../../lib/firebase";
 import { saveAs } from "file-saver";
 import useCreatedAt from "../../hooks/useCreatedAt";
 import { useSnackbar } from "notistack";
-import { useState } from "react";
 
 const PostHeader = ({ postId, user, postData, postHasImages, timestamp }) => {
   const time = useCreatedAt(timestamp);
-  const { fullScreen, isAnonymous } = user; // needs fixing
+  const { fullScreen, isAnonymous } = user; // TODO: needs fixing
   const { username, caption, imageUrl, displayName, avatar } = postData;
 
   const [Open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState(false);
   const [openEditCaption, setOpenEditCaption] = useState(false);
   const [editCaption, setEditCaption] = useState(caption);
   const [mouseOnProfileImg, setMouseOnProfileImg] = useState(false);
-  const [userData, setUserData] = useState({
-    name: displayName,
-    username: username,
-    avatar: avatar,
-    bio: "Lorem 🌺ipsum dolorsit amet consectetur adipisicing elit. Corporis incidunt voluptates😎 in dolores necessitatibus quasi",
-    followers: 2314,
-    following: 1514,
-  });
+  const [userData, setUserData] = useState({});
+
   const { enqueueSnackbar } = useSnackbar();
   const open = Boolean(anchorEl);
   const ITEM_HEIGHT = 48;
   const navigate = useNavigate();
   const location = useLocation();
 
+  useEffect(() => {
+    async function getUserData() {
+      const docRef = db
+        .collection("users")
+        .where("uid", "==", postData.uid)
+        .limit(1);
+      docRef
+        .get()
+        .then((snapshot) => {
+          if (snapshot.docs) {
+            const doc = snapshot.docs[0];
+
+            const data = doc.data();
+            setUserData({
+              name: data.name,
+              username: data.username,
+              avatar: data.photoURL,
+              uid: data.uid,
+              posts: data.posts.length,
+              bio: data.bio
+                ? data.bio
+                : "Lorem ipsum dolor sit amet consectetur",
+              followers: "",
+              following: "",
+              country: data.country ? data.country : "",
+              storyTimestamp: data.storyTimestamp,
+            });
+          } else {
+            setUserExists(false);
+          }
+        })
+        .catch((error) => {
+          enqueueSnackbar(`Error Occured: ${error}`, {
+            variant: "error",
+          });
+        });
+    }
+    getUserData();
+  }, []);
+
   const handleClickOpen = () => {
     setOpen(true);
     setAnchorEl(null);
@@ -90,21 +124,6 @@ const PostHeader = ({ postId, user, postData, postHasImages, timestamp }) => {
 
   function showProfileDialogBox() {
     setMouseOnProfileImg(true);
-    // const fetchUserByUsername = async (username) => {
-    //   try {
-    //     const usersRef = db.collection('users');
-    //     const querySnapshot = await usersRef.where('username', '==', username).get();
-
-    //     const data = querySnapshot.docs[0].data();
-    //     console.log(data)
-
-    //   } catch (error) {
-    //     enqueueSnackbar(error, {
-    //       variant: "error",
-    //     });
-    //   }
-    // };
-    // fetchUserByUsername(username)
   }
 
   function hideProfileDialogBox() {

src/components/ProfileDialogBox/index.css

@@ -28,19 +28,16 @@
 .dialog-box-img {
   border-radius: 50%;
   width: 75px;
+  height: 75px;
   cursor: pointer;
   transition: 0.2s ease-in-out;
   border: 1px solid #eee;
-  box-shadow:
-    1px 1px 3px #bcbbbb,
-    -1px -1px 3px #bcbbbb;
+  box-shadow: 1px 1px 3px #bcbbbb, -1px -1px 3px #bcbbbb;
 }
 
 .dialog-box-img:hover {
   transform: scale(1.1);
-  box-shadow:
-    2px 2px 5px #faf7f7,
-    -2px -2px 5px #faf7f7;
+  box-shadow: 2px 2px 5px #faf7f7, -2px -2px 5px #faf7f7;
 }
 
 .dialog-box-display-name {
@@ -49,7 +46,11 @@
   cursor: pointer;
   width: fit-content;
 }
-
+.dialog-box-name-container span.dialog-box-username {
+  display: flex;
+  padding-top: 5px;
+  font-size: 13px;
+}
 .dialog-box-display-name:hover {
   text-decoration: underline;
 }

src/components/ProfileDialogBox/index.jsx

@@ -1,11 +1,13 @@
 import "./index.css";
 
+import LocationOnIcon from "@mui/icons-material/LocationOn";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 
 const ProfileDialogBox = ({ mouseOnProfileImg, userData }) => {
   const [isHoverActive, setIsHoverActive] = useState(false);
-  const { name, username, avatar, bio, followers, following } = userData;
+  const { name, username, avatar, posts, bio, followers, following, country } =
+    userData;
   const navigate = useNavigate();
 
   function hoverOver() {
@@ -27,30 +29,51 @@ const ProfileDialogBox = ({ mouseOnProfileImg, userData }) => {
       onMouseLeave={hoverOut}
       className="profile-dialog-box-container"
     >
-      <img
-        src={avatar}
-        alt={name}
-        className="dialog-box-img"
-        onClick={() => navigate(`/dummygram/user/${username}`)}
-      />
-      <div className="dialog-box-name-container">
-        <h4
-          className="dialog-box-display-name"
+      <div style={{ display: "flex", gap: "2rem" }}>
+        <img
+          src={avatar}
+          alt={name}
+          className="dialog-box-img"
           onClick={() => navigate(`/dummygram/user/${username}`)}
+        />
+        <div
+          className="dialog-box-name-container"
+          style={{ marginTop: "10px" }}
         >
-          {name}
-        </h4>
-        <h5 className="dialog-box-username">@{username}</h5>
-      </div>
-      <p className="dialog-box-bio">{bio}</p>
-      <div className="dialog-box-follow-container">
-        <p>
-          <span>{following}</span> Following
-        </p>
-        <p>
-          <span>{followers}</span> Followers
-        </p>
+          <h4
+            className="dialog-box-display-name"
+            onClick={() => navigate(`/dummygram/user/${username}`)}
+          >
+            {name}
+          </h4>
+          <h5 className="dialog-box-username">@{username}</h5>
+          <span className="dialog-box-username">
+            <LocationOnIcon className="hover-location-icon" fontSize="small" />{" "}
+            {country}
+          </span>
+        </div>
       </div>
+      <p className="dialog-box-bio">
+        Bio:{" "}
+        <span
+          style={{ fontWeight: "400", fontSize: "13px", lineHeight: "0.0rem" }}
+        >
+          {bio}
+        </span>
+      </p>
+      <p className="dialog-box-bio">Posts: {posts}</p>
+      {followers && following ? (
+        <div className="dialog-box-follow-container">
+          <p>
+            <span>{following}</span> Following
+          </p>
+          <p>
+            <span>{followers}</span> Followers
+          </p>
+        </div>
+      ) : (
+        ""
+      )}
     </div>
   );
 };