Merge pull request #337 from SubhamB2003/Feature

Feature Addition
narayan954 · May 24, 2023 · 404d287 · 404d287
2 parents d07b2b3 + d2a52f5
commit 404d287
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -239,7 +239,15 @@ function App() {
                       display="flex"
                       padding="0.5rem"
                       sx={{ cursor: "pointer" }}
-                      onClick={() => navigate("/dummygram/profile")}
+                      onClick={() =>
+                        navigate("/dummygram/profile", {
+                          state: {
+                            name: user.toJSON().displayName,
+                            email: user.toJSON().email,
+                            avatar: user.toJSON().photoURL,
+                          },
+                        })
+                      }
                     >
                       <Typography fontFamily="serif" fontSize="1rem">
                         Profile
@@ -435,10 +443,9 @@ function App() {
           }
         />
 
-        <Route
-          path="/dummygram/profile"
-          element={user && <Profile curUser={user.toJSON()} />}
-        />
+        {user && (
+          <Route path="/dummygram/profile" element={user && <Profile />} />
+        )}
 
         <Route path="/dummygram/login" element={<LoginScreen />} />
 

diff --git a/src/components/Post.jsx b/src/components/Post.jsx
@@ -14,10 +14,10 @@ import {
   Menu,
   MenuItem,
   Paper,
-  SvgIcon,
   styled,
   useMediaQuery,
 } from "@mui/material";
+import { Link, useNavigate } from "react-router-dom";
 import { doc, updateDoc } from "firebase/firestore";
 import { useEffect, useState } from "react";
 
@@ -28,7 +28,6 @@ import EmojiPicker from "emoji-picker-react";
 import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 import FavoriteOutlinedIcon from "@mui/icons-material/FavoriteOutlined";
 import ImageSlider from "../reusableComponents/ImageSlider";
-import { Link } from "react-router-dom";
 import MoreHorizOutlinedIcon from "@mui/icons-material/MoreHorizOutlined";
 import ReadMore from "./ReadMore";
 import ReplyRoundedIcon from "@mui/icons-material/ReplyRounded";
@@ -55,6 +54,7 @@ function Post(prop) {
   const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
   const open = Boolean(anchorEl);
   const docRef = doc(db, "posts", postId);
+  const navigate = useNavigate();
 
   useEffect(() => {
     let unsubscribe;
@@ -223,6 +223,14 @@ function Post(prop) {
               scale: "1.1",
             },
           }}
+          onClick={() => {
+            navigate("/dummygram/profile", {
+              state: {
+                name: username,
+                avatar: avatar,
+              },
+            });
+          }}
         />
         <Link
           to={`/dummygram/posts/${postId}`}

diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
@@ -1,8 +1,10 @@
-import { Box, Divider, Typography, useMediaQuery } from "@mui/material";
+import { Avatar, Box, Divider, Typography, useMediaQuery } from "@mui/material";
 
 import { FaUserCircle } from "react-icons/fa";
+import { useLocation } from "react-router-dom";
 
-function Profile({ curUser }) {
+function Profile() {
+  const { name, email, avatar } = useLocation().state;
   const isNonMobile = useMediaQuery("(min-width: 768px)");
 
   return (
@@ -21,15 +23,32 @@ function Profile({ curUser }) {
       >
         <Box display="flex" flexDirection="column" gap={1}>
           <Box marginX="auto" fontSize="600%">
-            <FaUserCircle />
-            <Divider />
+            {avatar ? (
+              <Avatar
+                alt={name}
+                src={avatar}
+                sx={{
+                  width: "30vh",
+                  height: "30vh",
+                  bgcolor: "royalblue",
+                  border: "2px solid transparent",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  cursor: "pointer",
+                }}
+              />
+            ) : (
+              <FaUserCircle style={{ width: "25vh", height: "25vh" }} />
+            )}
           </Box>
+          <Divider sx={{ marginTop: "1rem" }} />
           <Typography fontSize="1.3rem" fontWeight="600" fontFamily="serif">
-            {curUser.displayName}
+            {name}
           </Typography>
           <Divider />
           <Typography fontSize="1.5rem" fontWeight="600" fontFamily="serif">
-            {curUser.email}
+            {email && email}
           </Typography>
         </Box>
       </Box>