fix(*): update client side saving of articles

HoseaCodes · May 20, 2024 · a151c80 · a151c80
1 parent e1b27a3
commit a151c80
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 53 deletions.
diff --git a/controllers/user.js b/controllers/user.js
@@ -266,14 +266,33 @@ async function updateProfile(req, res) {
     }
 
     if (savedArticles) {
-      const newSavedArticles = originalUser.savedArticles.concat(savedArticles);
-      const uniqueSavedArticles = [...new Set(newSavedArticles)];
-      await Users.findOneAndUpdate(
-        { _id: req.params.id },
-        {
-          savedArticles: uniqueSavedArticles,
-        }
+      const existingSavedArticle = originalUser.savedArticles.filter(
+        (article) => article !== req.params.id
       );
+      console.log(existingSavedArticle.length);
+      console.log(existingSavedArticle);
+      if (existingSavedArticle.length == 1) {
+        const removeSavedArticles = originalUser.savedArticles.filter(
+          (article) => article == req.params.id
+        );
+        console.log('removeSavedArticles', req.params.id, removeSavedArticles);
+        await Users.findOneAndUpdate(
+          { _id: req.params.id },
+          {
+            savedArticles: removeSavedArticles,
+          }
+        );
+      } else {
+        const newSavedArticles = originalUser.savedArticles.concat(savedArticles);
+        const uniqueSavedArticles = [...new Set(newSavedArticles)];
+        console.log('uniqueSavedArticles', req.params.id, uniqueSavedArticles);
+        await Users.findOneAndUpdate(
+          { _id: req.params.id },
+          {
+            savedArticles: uniqueSavedArticles,
+          }
+        );
+      }
     }
 
     if (likedArticles) {

diff --git a/src/Components/NavBar/SideBar.jsx b/src/Components/NavBar/SideBar.jsx
@@ -1,72 +1,93 @@
-import React, { useContext, useEffect } from "react";
-import {StyledLeftContainer, JustifyContent} from '../../Layout/Container/styledArticle';
-import {LogoImage} from '../../Layout/Image/styledImage';
-import {StackedAlignn} from '../../Layout/Icon/styledIcons';
-import {ArticleHr} from '../../Layout/Hr/styledHr';
-import {HiOutlinePencilAlt} from 'react-icons/hi';
-import {BsHouseDoor, BsBell} from 'react-icons/bs';
-import {MdBookmarkBorder} from 'react-icons/md';
-import logo from '../../Assets/Images/newLogo.png';
+import React, { useContext, useEffect, useState } from "react";
+import {
+  StyledLeftContainer,
+  JustifyContent,
+} from "../../Layout/Container/styledArticle";
+import { LogoImage } from "../../Layout/Image/styledImage";
+import { StackedAlignn } from "../../Layout/Icon/styledIcons";
+import { ArticleHr } from "../../Layout/Hr/styledHr";
+import { HiOutlinePencilAlt } from "react-icons/hi";
+import { BsHouseDoor, BsBell } from "react-icons/bs";
+import { MdBookmarkBorder, MdBookmark } from "react-icons/md";
+import logo from "../../Assets/Images/newLogo.png";
 import { Link } from "react-router-dom";
-import {GlobalState} from '../../GlobalState';
+import { GlobalState } from "../../GlobalState";
 import { useParams } from "react-router-dom";
 import axios from "axios";
 
 const SideBar = (props) => {
-
+  const [savedArticleState, setSavedArticleState] = useState(
+    props.user.savedArticles.includes(props.article._id)
+  );
   const param = useParams();
   const state = useContext(GlobalState);
 
   const [isAdmin] = state.userAPI.isAdmin;
 
-  const handleUnauthorized = async e => {
+  const handleUnauthorized = async (e) => {
     e.preventDefault();
     // Pass the error to display through state
-    alert("You are not authorized to make a post. If you create an account you can begin making posts.")
-  }
+    alert(
+      "You are not authorized to make a post. If you create an account you can begin making posts."
+    );
+  };
 
-  const handleSave = async e => {
+  const handleSave = async (e) => {
     e.preventDefault();
-     if (props.user) {
-       console.log(props.user);
-       await axios.put(`/api/user/${props.user._id}`, {
-         savedArticles: [props.article._id],
-       });
-     }
-  }
+    if (props.user) {
+      await axios.put(`/api/user/${props.user._id}`, {
+        savedArticles: [props.article._id],
+      });
+      setSavedArticleState(!savedArticleState)
+    }
+  };
 
-  const handleNotification = async e => {
+  const handleNotification = async (e) => {
     e.preventDefault();
     // Create notification function on backend
-    alert("Start being alerted when user makes posts.")
+    alert("Start being alerted when user makes posts.");
     if (props.user) {
       console.log(props.user);
       await axios.put(`/api/user/${props.user._id}`, {
         notifications: [props.user._id],
       });
     }
-  }
-    return (
-      <StyledLeftContainer>
-        <JustifyContent >
-          <Link to="/">
-            <LogoImage src={logo} alt="logo"/>
+  };
+  console.log(props);
+  return (
+    <StyledLeftContainer>
+      <JustifyContent>
+        <Link to="/">
+          <LogoImage src={logo} alt="logo" />
+        </Link>
+      </JustifyContent>
+      <StackedAlignn>
+        <Link to="/">
+          <BsHouseDoor style={{ marginBottom: "5rem" }} />
+        </Link>
+        <BsBell onClick={handleNotification} style={{ marginBottom: "5rem" }} />
+        {!savedArticleState ? (
+          <MdBookmarkBorder
+            onClick={handleSave}
+            style={{ marginBottom: "5rem" }}
+          />
+        ) : (
+          <MdBookmark onClick={handleSave} style={{ marginBottom: "5rem" }} />
+        )}
+        <ArticleHr />
+        {isAdmin ? (
+          <Link to="/admin/blog/new">
+            <HiOutlinePencilAlt style={{ marginBottom: "5rem" }} />
           </Link>
-        </JustifyContent>
-        <StackedAlignn >
-          <Link to="/"><BsHouseDoor style={{marginBottom: '5rem'}}/></Link>
-          <BsBell onClick={handleNotification} style={{marginBottom: '5rem'}}/>
-          <MdBookmarkBorder onClick={handleSave} style={{marginBottom: '5rem'}}/>
-          <ArticleHr/>
-          {isAdmin ?
-            <Link to="/admin/blog/new"><HiOutlinePencilAlt style={{marginBottom: '5rem'}}/></Link>
-            :
-            <HiOutlinePencilAlt onClick={handleUnauthorized} style={{marginBottom: '5rem'}}/>
-          }
-        </StackedAlignn>
-      </StyledLeftContainer>
-    )
-}
-
+        ) : (
+          <HiOutlinePencilAlt
+            onClick={handleUnauthorized}
+            style={{ marginBottom: "5rem" }}
+          />
+        )}
+      </StackedAlignn>
+    </StyledLeftContainer>
+  );
+};
 
 export default SideBar;