Updated with a saved/Bookmark Page

client/.gitignore

@@ -4,7 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
-
+.env
 # testing
 /coverage
 

client/package.json

@@ -11,10 +11,12 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "dotenv": "^16.0.3",
+    "axios": "^1.3.4",
     "formik": "^2.2.9",
+    "googleapis": "^114.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dotenv": "^0.1.3",
     "react-dropzone": "^14.2.3",
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.2",
@@ -46,5 +48,14 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^9.1.2",
+    "dotenv": "^16.0.3",
+    "dotenv-webpack": "^8.0.1",
+    "path-browserify": "^1.0.1"
   }
 }

client/src/App.js

@@ -7,6 +7,7 @@ import { useSelector } from "react-redux";
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { createTheme } from "@mui/material/styles";
 import { themeSettings } from "./theme";
+import SavedPage from "scenes/SavedPage";
 
 function App() {
   const mode = useSelector((state) => state.mode);
@@ -28,6 +29,14 @@ function App() {
               path="/profile/:userId"
               element={isAuth ? <ProfilePage /> : <Navigate to="/" />}
             />
+            <Route
+              path="/saved/:userId"
+              element={isAuth ? <SavedPage /> : <Navigate to="/" />}
+            />
+            <Route
+              path="*"
+              element={isAuth ? <HomePage /> : <Navigate to="/" />}
+            />
           </Routes>
         </ThemeProvider>
       </BrowserRouter>

client/src/components/Friend.jsx

@@ -20,6 +20,7 @@ const Friend = ({ friendId, name, subtitle, userPicturePath }) => {
   const medium = palette.neutral.medium;
 
   const isFriend = friends.find((friend) => friend._id === friendId);
+  const isSelf = friendId === _id;
 
   const patchFriend = async () => {
     const response = await fetch(
@@ -64,18 +65,20 @@ const Friend = ({ friendId, name, subtitle, userPicturePath }) => {
           </Typography>
         </Box>
       </FlexBetween>
-      <IconButton
-        onClick={() => patchFriend()}
-        sx={{ backgroundColor: primaryLight, p: "0.6rem" }}
-      >
-        {isFriend ? (
-          <PersonRemoveOutlined sx={{ color: primaryDark }} />
-        ) : (
-          <PersonAddOutlined sx={{ color: primaryDark }} />
-        )}
-      </IconButton>
+      {!isSelf && (
+        <IconButton
+          onClick={() => patchFriend()}
+          sx={{ backgroundColor: primaryLight, p: "0.6rem" }}
+        >
+          {isFriend ? (
+            <PersonRemoveOutlined sx={{ color: primaryDark }} />
+          ) : (
+            <PersonAddOutlined sx={{ color: primaryDark }} />
+          )}
+        </IconButton>
+      )}
     </FlexBetween>
   );
 };
 
-export default Friend;
+export default Friend;

client/src/scenes/SavedPage/index.jsx

@@ -0,0 +1,111 @@
+/* eslint-disable jsx-a11y/img-redundant-alt */
+import { Box, useMediaQuery, Grid, Paper, Typography, Select, MenuItem, Button } from "@mui/material";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import Navbar from "scenes/navbar";
+import { PhotoAlbumOutlined } from "@mui/icons-material";
+import PostWidget from "scenes/widgets/PostWidget";
+
+const SavedPage = () => {
+  const [savedPosts, setsavedPosts] = useState([]);
+  const { userId } = useParams();
+  const isNonMobileScreens = useMediaQuery("(min-width:1000px)");
+  const [selectedCategory, setSelectedCategory] = useState("all");
+
+  const getsavedPosts = () => {
+    const savedPosts = window.localStorage.getItem('savedPosts');
+    const data = JSON.parse(savedPosts);
+    setsavedPosts(data);
+    console.log('19-->', data)
+  };
+
+  const handleCategoryChange = (event) => {
+    setSelectedCategory(event.target.value);
+  };
+
+  const handleRemoveItem = (index) => {
+    const items = JSON.parse(localStorage.getItem('savedPosts')) || [];
+    items.splice(index, 1);
+    localStorage.setItem('savedPosts', JSON.stringify(items));
+    window.location.reload();
+  }
+
+  const deleteAllSaved = () => {
+    localStorage.removeItem("savedPosts")
+  }
+  useEffect(() => {
+    getsavedPosts();
+  }, []);
+
+  const filteredImages = selectedCategory === 'all'
+    ? savedPosts
+    : savedPosts.filter((image) => image.category === selectedCategory);
+
+  return (
+    <Box>
+      <Navbar />
+      <Box
+        width="100%"
+        padding="2rem 6%"
+        display={isNonMobileScreens ? "flex" : "block"}
+        gap="2rem"
+        justifyContent="center"
+      >
+        <Grid container spacing={2}>
+          <Grid item xs={12}>
+            <Typography variant="h4" component="h1">
+              My Saved Images
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Box display="flex" justifyContent="flex-end">
+              <Select value={selectedCategory} onChange={handleCategoryChange}>
+                <MenuItem value="all">All</MenuItem>
+                <MenuItem value="great">Great</MenuItem>
+                <MenuItem value="good">Good</MenuItem>
+                <MenuItem value="ok">Ok</MenuItem>
+              </Select>
+              {/* <Button onClick={deleteAllSaved}>Delete All </Button> */}
+            </Box>
+          </Grid>
+          {filteredImages?.length > 0 ? (
+            filteredImages?.map((image, index) => (
+              <Grid item xs={12} sm={6} md={4} key={index}>
+                <PostWidget
+                  postId={image.postId}
+                  postUserId={image.userId}
+                  name={image.name}
+                  description={image.description}
+                  location={image.location}
+                  picturePath={image?.picturePath}
+                  userPicturePath={image?.userPicturePath}
+                  likes={image?.likes}
+                  comments={image?.comments}
+                />
+                {/* <Button variant="contained" color="error" style={{ marginTop: '1rem' }}
+                  onClick={() => handleRemoveItem(index)}>Remove</Button> */}
+              </Grid>
+            ))
+          ) : (
+            <Grid item xs={12}>
+              <Paper elevation={3}>
+                <Grid container spacing={2} justify="center">
+                  <Grid item>
+                    <PhotoAlbumOutlined fontSize="large" />
+                  </Grid>
+                  <Grid item>
+                    <Typography variant="h6" component="h2">
+                      No saved images found for this category
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </Paper>
+            </Grid>
+          )}
+        </Grid>
+      </Box>
+    </Box>
+  );
+};
+
+export default SavedPage;

client/src/scenes/navbar/index.jsx

@@ -107,6 +107,7 @@ const Navbar = () => {
               <MenuItem value={fullName}>
                 <Typography>{fullName}</Typography>
               </MenuItem>
+              <MenuItem onClick={() => navigate(`/saved/${user._id}`)}>Saved</MenuItem>
               <MenuItem onClick={() => dispatch(setLogout())}>Log Out</MenuItem>
             </Select>
           </FormControl>
@@ -182,6 +183,7 @@ const Navbar = () => {
                 <MenuItem value={fullName}>
                   <Typography>{fullName}</Typography>
                 </MenuItem>
+                <MenuItem onClick={() => navigate(`/saved/${user._id}`)}>Saved</MenuItem>
                 <MenuItem onClick={() => dispatch(setLogout())}>
                   Log Out
                 </MenuItem>

client/src/scenes/widgets/AdvertWidget.jsx

@@ -1,13 +1,55 @@
-import { Typography, useTheme } from "@mui/material";
+import { useState, useEffect } from "react";
+import { Typography, useTheme, IconButton, Button } from "@mui/material";
+import {
+  ArrowBackIosNewRounded,
+  ArrowForwardIosRounded,
+} from "@mui/icons-material";
 import FlexBetween from "components/FlexBetween";
 import WidgetWrapper from "components/WidgetWrapper";
+import axios from 'axios';
 
 const AdvertWidget = () => {
   const { palette } = useTheme();
   const dark = palette.neutral.dark;
   const main = palette.neutral.main;
   const medium = palette.neutral.medium;
 
+  const [data, setData] = useState([]);
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get(`https://sheetdb.io/api/v1/kwecdtehfatvt`);
+      const data = response.data;
+      console.log('93', data);
+      setData(data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const slideImages = data.map(item => item.ProductLink);
+
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  const handleSlideChange = (direction) => {
+    if (direction === "next") {
+      setCurrentSlide((prev) => (prev === slideImages.length - 1 ? 0 : prev + 1));
+    } else if (direction === "prev") {
+      setCurrentSlide((prev) => (prev === 0 ? slideImages.length - 1 : prev - 1));
+    }
+  };
+
+  // useEffect(() => {
+  //   const interval = setInterval(() => {
+  //     handleSlideChange("next");
+  //   }, 3000);
+  //   return () => clearInterval(interval);
+  // }, []);
+
   return (
     <WidgetWrapper>
       <FlexBetween>
@@ -16,21 +58,49 @@ const AdvertWidget = () => {
         </Typography>
         <Typography color={medium}>Create Ad</Typography>
       </FlexBetween>
-      <img
-        width="100%"
-        height="auto"
-        alt="advert"
-        src="http://localhost:3001/assets/info4.jpeg"
-        style={{ borderRadius: "0.75rem", margin: "0.75rem 0" }}
-      />
-      <FlexBetween>
-        <Typography color={main}>MikaCosmetics</Typography>
-        <Typography color={medium}>mikacosmetics.com</Typography>
-      </FlexBetween>
-      <Typography color={medium} m="0.5rem 0">
-        Your pathway to stunning and immaculate beauty and made sure your skin
-        is exfoliating skin and shining like light.
-      </Typography>
+      <div style={{ position: "relative", width: "100%", height: "auto", overflow: "hidden", borderRadius: "0.75rem", margin: "0.75rem 0" }}>
+        {slideImages.map((img, index) => (
+          <img
+            key={img}
+            src={img}
+            alt="advert"
+            style={{
+              position: index === currentSlide ? "static" : "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "auto",
+              transition: "opacity 0.5s",
+              opacity: index === currentSlide ? 1 : 0,
+            }}
+          />
+        ))}
+        <div style={{ position: "absolute", top: "50%", left: "0", transform: "translateY(-50%)", cursor: "pointer" }} onClick={() => handleSlideChange("prev")}>
+          < IconButton ><ArrowBackIosNewRounded /></IconButton>
+        </div>
+        <div style={{ position: "absolute", top: "50%", right: "0", transform: "translateY(-50%)", cursor: "pointer" }} onClick={() => handleSlideChange("next")}>
+          < IconButton ><ArrowForwardIosRounded /></IconButton>
+        </div>
+      </div>
+      {data.map((item, k) => (
+  <div key={k} style={{
+    position: k === currentSlide ? "static" : "absolute",
+    width: "100%",
+    height: "auto",
+    transition: "opacity 0.5s",
+    opacity: k === currentSlide ? 1 : 0,
+  }}>
+    <FlexBetween>
+      <Typography variant="h4" component="h4" color={main}>{item.Price}</Typography>
+      <Typography color={medium}><a href="https://www.nike.com/gb/" >Quick Buy</a></Typography>
+    </FlexBetween>
+    <Typography color={medium} m="0.5rem 0">
+      {item.Description}
+    </Typography>
+  </div>
+))}
+
+
     </WidgetWrapper>
   );
 };