Moved saved posts from sidebar to profile

src/App.jsx

@@ -28,7 +28,6 @@ const Contributors = React.lazy(() =>
   import("./pages/FooterPages/ContributorPage"),
 );
 // ------------------------------------- Components ------------------------------------------------
-const Favorite = React.lazy(() => import("./components/Favorite"));
 const Notifications = React.lazy(() => import("./components/Notification"));
 const Post = React.lazy(() => import("./components/Post"));
 const SideBar = React.lazy(() => import("./components/SideBar"));
@@ -388,14 +387,6 @@ function App() {
             />
 
             <Route path="*" element={<NotFound />} />
-            <Route
-              path="/dummygram/favourites"
-              element={
-                <ErrorBoundary inApp={true}>
-                  <Favorite />
-                </ErrorBoundary>
-              }
-            />
           </Routes>
           {/* below scroll button must be checked for implementation */}
           <FaArrowCircleUp

src/components/SideBar/index.jsx

@@ -11,7 +11,6 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import { AiOutlineClose } from "react-icons/ai";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import BookmarksIcon from "@mui/icons-material/Bookmarks";
 import { ClickAwayListener } from "@mui/material";
 import { Dialog } from "@mui/material";
 import ErrorBoundary from "../../reusableComponents/ErrorBoundary";
@@ -100,21 +99,6 @@ function SideBar({ anonymous }) {
               <AddCircleOutlineIcon className="icon" /> <span>Create</span>
             </div>
           </li>
-          <li
-            onClick={() =>
-              navigate(`/dummygram/${anonymous ? "signup" : "favourites"}`)
-            }
-            className={
-              location.pathname.includes("/dummygram/favourites")
-                ? "activeTab"
-                : ""
-            }
-          >
-            <div className="sidebar_align">
-              <BookmarksIcon className="icon" />
-              <span>Saved</span>
-            </div>
-          </li>
           <li
             onClick={() =>
               navigate(`/dummygram/${anonymous ? "signup" : "notifications"}`)

src/components/index.js

@@ -1,7 +1,6 @@
 import Caption from "./Post/Caption";
 import ChatBox from "./CommunityChat";
 import EditProfile from "./EditProfile";
-import Favorite from "./Favorite";
 import GuestSignInBtn from "./Guest/GuestSignInBtn";
 import GuestSignUpBtn from "./Guest/GuestSignUpBtn";
 import ImgUpload from "./ImgUpload";
@@ -19,7 +18,6 @@ export {
   Caption,
   ChatBox,
   EditProfile,
-  Favorite,
   GuestSignInBtn,
   GuestSignUpBtn,
   ImgUpload,

src/pages/Profile/index.css

@@ -16,6 +16,46 @@
   margin: auto;
 }
 
+.feed_btn_container {
+  margin-left: 17vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+  padding: 10px;
+}
+
+.feed_change_btn {
+  font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 15px;
+    padding-bottom: 10px;
+    padding-inline: 20px;
+    cursor: pointer;
+    background: var(--bg-color);
+    border: none;
+    color: var(--text-secondary);
+}
+
+.feed_btn_deactivated {
+  opacity: 0.7;
+  color: var(--profile-color);
+}
+
+.feed_btn_deactivated:hover {
+  opacity: 1;
+}
+
+.feed_btn_activated {
+  border-top: 4px solid;
+}
+
+.feed_btn_text {
+  margin-left: 8px;
+}
+
 .outer-profile-box {
   position: relative;
   margin-top: 0;
@@ -278,10 +318,26 @@
   }
 }
 
+@media screen and (max-width: 1200px) {
+  .background-image-container {
+    padding: 4em 0 0 8vw;
+  }
+
+  .feed_btn_container {
+    margin-left: 8vw;
+  }
+}
+
+
 @media screen and (max-width: 800px) {
   .outer-profile-box {
     width: calc(100% - 10vw);
   }
+
+  .feed_btn_container {
+    margin-left: 0;
+  }
+
   .background-image-container {
     padding: 0 !important;
     padding-top: 4em !important;
@@ -307,12 +363,6 @@
   }
 }
 
-@media screen and (max-width: 1200px) {
-  .background-image-container {
-    padding: 4em 0 0 8vw;
-  }
-}
-
 @media screen and (min-width: 1200px) {
   .outer-profile-box {
     width: calc(100% - 34vw);

src/pages/Profile/index.jsx

@@ -13,6 +13,9 @@ import {
 import { lazy, useEffect, useState } from "react";
 import { playErrorSound, playSuccessSound } from "../../js/sounds";
 import { useNavigate, useParams } from "react-router-dom";
+import GridOnIcon from '@mui/icons-material/GridOn';
+import BookmarksIcon from "@mui/icons-material/Bookmarks";
+import { doc, getDoc } from "firebase/firestore";
 
 import Cam from "@mui/icons-material/CameraAltOutlined";
 import EditIcon from "@mui/icons-material/Edit";
@@ -41,6 +44,7 @@ function Profile() {
 
   const [user, setUser] = useState(null);
   const [feed, setFeed] = useState([]);
+  const [savedPosts, setSavedPosts] = useState([]);
   const [open, setOpen] = useState(false);
   const [friendRequestSent, setFriendRequestSent] = useState(false);
   const [userData, setUserData] = useState(null);
@@ -50,6 +54,7 @@ function Profile() {
   const [editing, setEditing] = useState(false);
   const [bgimgurl, setBgimgurl] = useState(null);
   const [backgroundImage, setBackgroundImage] = useState(null);
+  const [showSaved, setShowSaved] = useState(false);
 
   let name = "";
   let avatar = "";
@@ -87,7 +92,7 @@ function Profile() {
           .put(backgroundImage);
         uploadTask.on(
           "state_changed",
-          () => {},
+          () => { },
           (error) => {
             enqueueSnackbar(error.message, {
               variant: "error",
@@ -320,6 +325,38 @@ function Profile() {
     };
   }, [user, name]);
 
+
+  async function getSavedPosts() {
+    let savedPostsArr = JSON.parse(localStorage.getItem("posts")) || [];
+    const posts = [];
+    if (savedPostsArr.length > 0 && savedPosts.length === 0) {
+      try {
+        const fetchSavedPosts = savedPostsArr.map(async (id) => {
+          try {
+            const docRef = doc(db, "posts", id);
+            const docSnap = await getDoc(docRef);
+            if (docSnap.exists()) {
+              posts.push({ id: docSnap.id, post: docSnap.data() });
+            }
+          } catch (error) {
+            console.log(error, "err")
+            enqueueSnackbar("Error while fetching all posts", {
+              variant: "error",
+            });
+          }
+        });
+
+        await Promise.all(fetchSavedPosts); // Wait for all fetch requests to complete
+        setSavedPosts(posts);
+      } catch (error) {
+        console.log(error, "err2")
+        enqueueSnackbar("Error while fetching all posts", {
+          variant: "error",
+        });
+      }
+    }
+  }
+
   return (
     <>
       <ErrorBoundary>
@@ -557,7 +594,26 @@ function Profile() {
               </Box>
             </Box>
           </Box>
-          <ProfieFeed feed={feed} user={user} />
+          <div className="feed_btn_container">
+            <button
+              className={`feed_change_btn ${showSaved ? "feed_btn_deactivated" : "feed_btn_activated"}`}
+              onClick={() => setShowSaved(false)}
+            >
+              <GridOnIcon /> <span className="feed_btn_text">Feed</span>
+            </button>
+            {user?.uid === uid && (
+              <button
+                className={`feed_change_btn ${showSaved ? "feed_btn_activated" : "feed_btn_deactivated"}`}
+                onClick={() => {
+                  getSavedPosts()
+                  setShowSaved(true)
+                }}
+              >
+                <BookmarksIcon /> <span className="feed_btn_text">Saved</span>
+              </button>
+            )}
+          </div>
+          {showSaved? (<ProfieFeed feed={savedPosts}/>) : (<ProfieFeed feed={feed} />)}
         </>
       ) : userExists ? (
         <Loader />