edit profile pic feature added

src/components/Post.jsx

@@ -318,10 +318,10 @@ function Post(prop) {
               }}
             >
               {user && username == user.displayName && (
-                <>
-                  <MenuItem onClick={handleClickOpen}> Delete </MenuItem>
-                  <MenuItem onClick={handleClickOpenCaption}> Edit </MenuItem>
-                </>
+                <MenuItem onClick={handleClickOpen}> Delete </MenuItem>
+              )}
+              {user && username == user.displayName && (
+                <MenuItem onClick={handleClickOpenCaption}> Edit </MenuItem>
               )}
               <MenuItem onClick={handleDownload}> Download </MenuItem>
               <MenuItem

src/index.css

@@ -401,6 +401,23 @@ div#picker {
   transition: transform 0.2s ease-out;
 }
 
+.img-edit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border-radius: 1.303rem;
+  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+  color: blue;
+  border-style: solid;
+}
+
+.img-edit:hover {
+  background: linear-gradient(40deg, #e107c1, #59afc7);
+  transition: transform 0.5s ease-out;
+}
+
 ::-webkit-scrollbar {
   width: 0.8rem;
 }

src/pages/Profile.jsx

@@ -6,19 +6,65 @@ import {
   Typography,
   useMediaQuery,
 } from "@mui/material";
+import { auth, storage } from "../lib/firebase";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { FaUserCircle } from "react-icons/fa";
+import { useSnackbar } from "notistack";
+import { useState } from "react";
 
 function Profile() {
   const { name, email, avatar } = useLocation().state;
   const isNonMobile = useMediaQuery("(min-width: 768px)");
+  const { enqueueSnackbar } = useSnackbar();
+  const [image, setImage] = useState("");
+  const [profilepic, setProfilePic] = useState(avatar);
+  const [visible, setVisibile] = useState(false);
   const navigate = useNavigate();
 
   const handleBack = () => {
     navigate("/dummygram"); // Use navigate function to change the URL
   };
 
+  const handleChange = (e) => {
+    if (e.target.files[0]) {
+      setProfilePic(URL.createObjectURL(e.target.files[0]));
+      setImage(e.target.files[0]);
+      setVisibile(true);
+    }
+  };
+  const handleSave = async () => {
+    const uploadTask = storage.ref(`images/${image?.name}`).put(image);
+    await uploadTask.on(
+      "state_changed",
+      () => {
+        // // progress function ...
+        // setProgress(Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100));
+      },
+      (error) => {
+        enqueueSnackbar(error.message, {
+          variant: "error",
+        });
+      },
+      () => {
+        storage
+          .ref("images")
+          .child(image?.name)
+          .getDownloadURL()
+          .then((url) => {
+            auth.currentUser.updateProfile({
+              displayName: name,
+              photoURL: url,
+            });
+            enqueueSnackbar("Upload Successful!!!", {
+              variant: "success",
+            });
+          });
+      }
+    );
+    setVisibile(false);
+  };
+
   return (
     <Box
       height="100vh"
@@ -35,14 +81,14 @@ function Profile() {
       >
         <Box display="flex" flexDirection="column" gap={1}>
           <Box marginX="auto" fontSize="600%">
-            {avatar ? (
+            {profilepic ? (
               <Avatar
                 alt={name}
-                src={avatar}
+                src={profilepic}
                 sx={{
                   width: "30vh",
                   height: "30vh",
-                  bgcolor: "royalblue",
+                  // bgcolor: "royalblue",
                   border: "2px solid transparent",
                   display: "flex",
                   justifyContent: "center",
@@ -54,6 +100,31 @@ function Profile() {
               <FaUserCircle style={{ width: "25vh", height: "25vh" }} />
             )}
           </Box>
+          {name == auth.currentUser.displayName ? (
+            <Box>
+              <input
+                type="file"
+                id="file"
+                className="file"
+                onChange={handleChange}
+                accept="image/*"
+              />
+              <label htmlFor="file">
+                <div className="img-edit">Edit Profile Pic</div>
+              </label>
+            </Box>
+          ) : (
+            ""
+          )}
+          {visible && (
+            <Button
+              onClick={handleSave}
+              variant="outlined"
+              sx={{ marginTop: "1rem" }}
+            >
+              Save
+            </Button>
+          )}
           <Divider sx={{ marginTop: "1rem" }} />
           <Typography fontSize="1.3rem" fontWeight="600" fontFamily="serif">
             {name}