From 79efe4e547d6731aa096cad78a51e3e325f0258a Mon Sep 17 00:00:00 2001 From: Palak Date: Fri, 4 Aug 2023 15:34:19 +0530 Subject: [PATCH 1/2] Moved saved posts from sidebar to profile --- src/App.jsx | 9 --- src/components/Favorite.jsx | 122 ------------------------------- src/components/SideBar/index.jsx | 16 ---- src/components/index.js | 2 - src/pages/Profile/index.css | 62 ++++++++++++++-- src/pages/Profile/index.jsx | 60 ++++++++++++++- 6 files changed, 114 insertions(+), 157 deletions(-) delete mode 100644 src/components/Favorite.jsx diff --git a/src/App.jsx b/src/App.jsx index c509a354b..35b18d460 100644 --- a/src/App.jsx +++ b/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() { /> } /> - - - - } - /> {/* below scroll button must be checked for implementation */} { - const posts = []; - if (savedPostsArr.length > 0) { - const fetchPosts = async () => { - 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) { - enqueueSnackbar("Error while fetching all posts", { - variant: "error", - }); - setLoading(false); - } - }); - - await Promise.all(fetchSavedPosts); // Wait for all fetch requests to complete - setLoading(false); - setPosts(posts); - } catch (error) { - enqueueSnackbar("Error while fetching all posts", { - variant: "error", - }); - setLoading(false); - } - }; - - fetchPosts(); - } else { - setLoading(false); - } - }, []); - - return ( - <> - - {loading ? ( -
- -
- ) : ( -
- - -
- {posts.length ? ( - <> -

Your Saved Posts

-
- {posts.map(({ id, post }) => ( - - ))} -
- - ) : ( -

- You have nothing in saved -

- )} -
- -
- )} - - ); -} - -export default Favorite; diff --git a/src/components/SideBar/index.jsx b/src/components/SideBar/index.jsx index cd68e981f..f8d694ebd 100644 --- a/src/components/SideBar/index.jsx +++ b/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 }) { Create -
  • - navigate(`/dummygram/${anonymous ? "signup" : "favourites"}`) - } - className={ - location.pathname.includes("/dummygram/favourites") - ? "activeTab" - : "" - } - > -
    - - Saved -
    -
  • navigate(`/dummygram/${anonymous ? "signup" : "notifications"}`) diff --git a/src/components/index.js b/src/components/index.js index 9e181bb33..1d3c07c7d 100644 --- a/src/components/index.js +++ b/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, diff --git a/src/pages/Profile/index.css b/src/pages/Profile/index.css index 37554cc8a..a9f46257c 100644 --- a/src/pages/Profile/index.css +++ b/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); diff --git a/src/pages/Profile/index.jsx b/src/pages/Profile/index.jsx index 80744e508..56160e223 100644 --- a/src/pages/Profile/index.jsx +++ b/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 ( <> @@ -557,7 +594,26 @@ function Profile() { - +
    + + {user?.uid === uid && ( + + )} +
    + {showSaved? () : ()} ) : userExists ? ( From d934fec9ef1b524deace0b01948c782b67ff7ef4 Mon Sep 17 00:00:00 2001 From: narayan soni Date: Sat, 5 Aug 2023 19:00:55 +0530 Subject: [PATCH 2/2] style: format --- src/pages/Profile/index.css | 21 +++++++++-------- src/pages/Profile/index.jsx | 45 +++++++++++++++++++++---------------- 2 files changed, 36 insertions(+), 30 deletions(-) diff --git a/src/pages/Profile/index.css b/src/pages/Profile/index.css index 776529a44..0f23238bf 100644 --- a/src/pages/Profile/index.css +++ b/src/pages/Profile/index.css @@ -27,16 +27,16 @@ .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); + 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 { @@ -330,7 +330,6 @@ } } - @media screen and (max-width: 800px) { .outer-profile-box { width: calc(100% - 10vw); diff --git a/src/pages/Profile/index.jsx b/src/pages/Profile/index.jsx index a505ca0c1..573d13314 100644 --- a/src/pages/Profile/index.jsx +++ b/src/pages/Profile/index.jsx @@ -10,18 +10,18 @@ import { query, where, } from "firebase/firestore"; +import { doc, getDoc } from "firebase/firestore"; 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 BookmarksIcon from "@mui/icons-material/Bookmarks"; import Cam from "@mui/icons-material/CameraAltOutlined"; import EditIcon from "@mui/icons-material/Edit"; import { EditProfile } from "../../components"; import ErrorBoundary from "../../reusableComponents/ErrorBoundary"; import { FaUserCircle } from "react-icons/fa"; +import GridOnIcon from "@mui/icons-material/GridOn"; import { Loader } from "../../reusableComponents"; import LocationOnIcon from "@mui/icons-material/LocationOn"; import NotFound from "../NotFound"; @@ -88,7 +88,7 @@ function Profile() { .put(backgroundImage); uploadTask.on( "state_changed", - () => { }, + () => {}, (error) => { enqueueSnackbar(error.message, { variant: "error", @@ -321,7 +321,6 @@ function Profile() { }; }, [user, name]); - async function getSavedPosts() { let savedPostsArr = JSON.parse(localStorage.getItem("posts")) || []; const posts = []; @@ -335,12 +334,11 @@ function Profile() { posts.push({ id: docSnap.id, post: docSnap.data() }); } } catch (error) { - console.log(error, "err") + console.log(error, "err"); enqueueSnackbar("Error while fetching all posts", { variant: "error", }); - } - finally { + } finally { setIsSavedPostsLoading(false); } }); @@ -350,12 +348,10 @@ function Profile() { enqueueSnackbar("Error while fetching all posts", { variant: "error", }); - } - finally { + } finally { setIsSavedPostsLoading(false); } - } - else { + } else { setIsSavedPostsLoading(false); } } @@ -432,8 +428,9 @@ function Profile() { }} alt={name} src={avatar} - className={`profile-pic-container ${storyTimestamp ? "story_available_border" : null - } user-image`} + className={`profile-pic-container ${ + storyTimestamp ? "story_available_border" : null + } user-image`} /> ) : ( @@ -505,17 +502,21 @@ function Profile() {
    {user?.uid === uid && (
    {showSaved ? ( - isSavedPostsLoading? : (savedPosts.length === 0?

    Nothing in saved

    : ) + isSavedPostsLoading ? ( + + ) : savedPosts.length === 0 ? ( +

    Nothing in saved

    + ) : ( + + ) ) : ( )}