Edit background img feature (#1056)

* moved search to navbar and displayed in a modal * bg img update feature * fixed z index * style: format * fix: syntax error (duplicate orderby) --------- Co-authored-by: Narayan soni <narayansoni854@gmail.com>
narayan954 · Jul 31, 2023 · e086f2b · e086f2b
1 parent f59eea8
commit e086f2b
Show file tree

Hide file tree

Showing 3 changed files with 197 additions and 14 deletions.
diff --git a/src/components/SideBar/index.css b/src/components/SideBar/index.css
@@ -6,6 +6,7 @@
   width: 17vw;
   height: 100vh;
   left: 0;
+  z-index: 99;
   /* border-right: 1px solid rgb(219, 219, 219); */
 }
 

diff --git a/src/pages/Profile/index.css b/src/pages/Profile/index.css
@@ -1,8 +1,10 @@
 .background-image {
   width: 100%;
   height: 400px;
-  border: 1px solid pink;
+  /* border: 1px solid pink; */
   object-fit: cover;
+  margin: auto;
+  /* margin-right: 0; */
 }
 
 .outer-profile-box {
@@ -170,6 +172,58 @@
   background: var(--btn-color-hover);
 }
 
+.bg-img-save {
+  height: 130px;
+  width: 140px;
+  display: flex;
+  justify-content: center;
+  top: 120px;
+  right: 20px;
+}
+
+.bg-save-btn {
+  top: 60px;
+  margin-top: 10px;
+}
+.bg-save-btn button {
+  border: 3px solid #244a9f;
+  background-color: var(--btn-hover);
+  padding: 8px 25px;
+  border-radius: 25px;
+  color: var(--bg-color);
+}
+.bg-save-btn button:hover {
+  border: 3px solid var(--btn-hover);
+  background-color: #244a9f;
+}
+
+.bg-icon {
+  background-color: var(--bg-color);
+  border-radius: 50%;
+  height: 48px;
+  width: 48px;
+  cursor: pointer;
+  position: absolute;
+}
+
+.bg-icon svg {
+  color: var(--color);
+}
+
+.bg-icon label {
+  height: 90%;
+  width: 90%;
+  display: flex;
+  position: absolute;
+  top: 8px;
+  left: 7px;
+  cursor: pointer;
+}
+.bg-icon svg:hover {
+  color: var(--btn-hover);
+  transition: all 0.3s ease;
+}
+
 /* media query */
 
 @media screen and (max-width: 600px) {
@@ -221,6 +275,35 @@
   .outer-profile-box {
     width: calc(100% - 16vw);
   }
+  .background-image-container {
+    padding: 0 !important;
+    padding-top: 4em !important;
+  }
+  .bg-img-save {
+    right: -10px;
+    top: 100px;
+  }
+  .bg-icon {
+    height: 40px;
+    width: 40px;
+  }
+  .bg-icon svg {
+    font-size: 25px;
+  }
+  .bg-save-btn button {
+    padding: 6px 15px;
+    font-size: 13px;
+  }
+  .bg-save-btn {
+    top: 60px;
+    margin-top: 0;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .background-image-container {
+    padding: 4em 0 0 8vw;
+  }
 }
 
 @media screen and (min-width: 1200px) {
@@ -246,4 +329,12 @@
   .inner-profile {
     margin-left: 2rem;
   }
+
+  .background-image-container {
+    padding: 4em 0 0 17vw;
+  }
+
+  .bg-img-save {
+    top: 100px;
+  }
 }
diff --git a/src/pages/Profile/index.jsx b/src/pages/Profile/index.jsx
@@ -1,7 +1,7 @@
 import "./index.css";
 
 import { Avatar, Box, Button, Typography, useMediaQuery } from "@mui/material";
-import { auth, db } from "../../lib/firebase";
+import { auth, db, storage } from "../../lib/firebase";
 import {
   collection,
   deleteField,
@@ -14,6 +14,7 @@ import { lazy, useEffect, useState } from "react";
 import { playErrorSound, playSuccessSound } from "../../js/sounds";
 import { useNavigate, useParams } from "react-router-dom";
 
+import Cam from "@mui/icons-material/CameraAltOutlined";
 import EditIcon from "@mui/icons-material/Edit";
 import { EditProfile } from "../../components";
 import ErrorBoundary from "../../reusableComponents/ErrorBoundary";
@@ -45,9 +46,13 @@ function Profile() {
   const [isEditing, setIsEditing] = useState(false);
   const [userExists, setUserExists] = useState(true);
   const [viewStory, setViewStory] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [bgimgurl, setBgimgurl] = useState(null);
+  const [backgroundImage, setBackgroundImage] = useState(null);
 
   let name = "";
   let avatar = "";
+  let bgImageUrl = "";
   let uid = "";
   let bio = "";
   let country = "";
@@ -56,6 +61,7 @@ function Profile() {
   if (userData) {
     name = userData.name;
     avatar = userData.avatar;
+    bgImageUrl = userData.bgImageUrl;
     uid = userData.uid;
     bio = userData.bio;
     country = userData.country;
@@ -64,6 +70,59 @@ function Profile() {
 
   const handleClose = () => setOpen(false);
 
+  // Inside the Profile component
+  const handleBackgroundImgChange = (e) => {
+    if (e.target.files[0]) {
+      setBackgroundImage(e.target.files[0]);
+      setEditing(true);
+    }
+  };
+
+  const handleBgImageSave = () => {
+    try {
+      if (backgroundImage) {
+        const uploadTask = storage
+          .ref(`background-images/${backgroundImage.name}`)
+          .put(backgroundImage);
+        uploadTask.on(
+          "state_changed",
+          () => {},
+          (error) => {
+            enqueueSnackbar(error.message, {
+              variant: "error",
+            });
+          },
+          () => {
+            storage
+              .ref("background-images")
+              .child(backgroundImage.name)
+              .getDownloadURL()
+              .then(async (url) => {
+                setBgimgurl(url);
+                const docRef = db.collection("users").doc(uid);
+                await docRef.update({
+                  bgImageUrl: url,
+                });
+              })
+              .then(
+                enqueueSnackbar("Background image uploaded successfully !", {
+                  variant: "success",
+                }),
+              )
+              .catch((error) => {
+                enqueueSnackbar(error.message, {
+                  variant: "error",
+                });
+              });
+          },
+        );
+      }
+      setEditing(false);
+    } catch (error) {
+      console.error("Error saving background image URL to Firestore:", error);
+    }
+  };
+
   useEffect(() => {
     async function getUserData() {
       const docRef = db
@@ -75,10 +134,8 @@ function Profile() {
         .then((snapshot) => {
           if (snapshot.docs) {
             const doc = snapshot.docs[0];
-
             const currTimestamp = firebase.firestore.Timestamp.now().seconds;
             const storyTimestamp = doc.data().storyTimestamp?.seconds;
-
             //Check if story is expired or not
             if (storyTimestamp && currTimestamp - storyTimestamp > 86400) {
               async function deleteStory() {
@@ -101,11 +158,13 @@ function Profile() {
               }
               deleteStory();
             }
-
             const data = doc.data();
             setUserData({
               name: data.name,
               avatar: data.photoURL,
+              bgImageUrl: data.bgImageUrl
+                ? data.bgImageUrl
+                : profileBackgroundImg,
               uid: data.uid,
               bio: data.bio
                 ? data.bio
@@ -124,7 +183,7 @@ function Profile() {
         });
     }
     getUserData();
-  }, []);
+  }, [username, bgimgurl]);
 
   const handleSendFriendRequest = () => {
     const currentUserUid = auth.currentUser.uid;
@@ -284,12 +343,43 @@ function Profile() {
       )}
       {userData && userExists ? (
         <>
-          <div className="background-image">
-            <img
-              src={profileBackgroundImg}
-              alt=""
-              className="background-image"
-            />
+          <div style={{ zIndex: "9" }}>
+            <div
+              className="background-image-container"
+              style={{ position: "relative" }}
+            >
+              <img
+                src={bgImageUrl || profileBackgroundImg}
+                alt=""
+                className="background-image"
+              />
+              {uid === user?.uid && (
+                <div className="bg-img-save" style={{ position: "absolute" }}>
+                  <div className="bg-icon">
+                    <input
+                      type="file"
+                      id="backgroundImage"
+                      className="file"
+                      onChange={handleBackgroundImgChange}
+                      accept="image/*"
+                    />
+                    <label htmlFor="backgroundImage">
+                      <Cam sx={{ fontSize: 33 }} />
+                    </label>
+                  </div>
+                  {editing && (
+                    <div
+                      className="bg-save-btn"
+                      style={{ position: "absolute" }}
+                    >
+                      <Button variant="outlined" onClick={handleBgImageSave}>
+                        Save
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
           <Modal
             open={open}
@@ -394,8 +484,9 @@ function Profile() {
                     }}
                     alt={name}
                     src={avatar}
-                    className={`profile-pic-container ${storyTimestamp ? "story_available_border" : null
-                      }`}
+                    className={`profile-pic-container ${
+                      storyTimestamp ? "story_available_border" : null
+                    }`}
                   />
                 ) : (
                   <FaUserCircle className="profile-pic-container" />