Toggle bookmark hook

frontend/package.json

@@ -12,6 +12,8 @@
     "react-bootstrap-icons": "^1.10.3",
     "react-bootstrap-typeahead": "^6.3.2",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.18.0",
     "web-vitals": "^2.1.4"
   },

frontend/src/App.jsx

@@ -12,6 +12,7 @@ import ProfileEdit from "./Components/Settings/Profile/ProfileEdit.jsx";
 import SavedArticles from "./Components/Settings/SavedArticles/SavedArticles.jsx";
 import CustomizationsEdit from "./Components/Settings/Customizations/CustomizationsEdit.jsx";
 import SignWelcome from "./pages/SignPages/SignWelcome.jsx";
+import { Toaster } from "react-hot-toast";
 
 function App() {
   return (
@@ -42,6 +43,7 @@ function App() {
           />
         </Route>
       </Routes>
+      <Toaster />
     </>
   );
 }

frontend/src/Components/Article/Article.jsx

@@ -7,6 +7,10 @@ import { Container, Row, Col, Stack } from "react-bootstrap";
 import "./ArticleComponents.scss";
 import "./Article.scss";
 import { useEffect, useState } from "react";
+import useBookmark from "../../hooks/useBookmark.jsx";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import { toast } from "react-hot-toast";
+
 //dummy data for table of contents
 const tableOfContents = [
   "Introduction to Machine Learning",
@@ -74,11 +78,15 @@ const relatedTopicsList = [
 
 //this component accepts an article object and displays the corresponding article
 export default function Article({ article }) {
+  const { isLoading, error, updateBookmark } = useBookmark();
+
+  // keep track of a specific article's bookmark toggling process
+  const [isPendingArticle, setIsPendingArticle] = useState(false);
+
   //extracts article data pieces from provided article
 
   //these properties that i'm defining aside from title don't exist in the database yet,
   //mostly made up so feel free to change later on
-
   //will display default data from figma for now
 
   const [articleData, setArticleData] = useState({
@@ -90,7 +98,7 @@ export default function Article({ article }) {
       : "Embark on a journey through the basics; explore what machine learning entails and how one can apply it in the real world.",
     author: article.author ? article.author : "David Lam",
     date: article.date ? article.date : "October 29, 2023",
-    isBookmarked: false,
+    isBookmarked: article.isBookmarked,
     headers:
       article.headers && Array.isArray(article.headers)
         ? article.headers
@@ -118,9 +126,35 @@ export default function Article({ article }) {
       };
     }
   );
+
   //handler for toggling bookmark
-  const toggleBookmark = () =>
+  const toggleBookmark = () => {
     setArticleData({ ...articleData, isBookmarked: !articleData.isBookmarked });
+
+    // set pending state of an article being bookmarked to true
+    setIsPendingArticle(true);
+
+    // reset pending state to false
+    setTimeout(() => {
+      setIsPendingArticle(false);
+    }, 500);
+  };
+
+  // toggleBookmark() function will be called only if there is a successful response from the server
+  const handleToggleBookmark = async () => {
+    await updateBookmark(
+      articleData.id,
+      articleData.isBookmarked,
+      toggleBookmark
+    );
+  };
+
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
+    }
+  }, [error]);
+
   return (
     <>
       <Container fluid className="h-100">
@@ -132,7 +166,8 @@ export default function Article({ article }) {
               author={articleData.author}
               date={articleData.date}
               isBookmarked={articleData.isBookmarked}
-              bookmarkToggler={toggleBookmark}
+              isPending={isPendingArticle}
+              bookmarkToggler={handleToggleBookmark}
             />
           </Col>
         </Row>

frontend/src/Components/Article/Article.scss

@@ -16,6 +16,20 @@
   }
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading {
+  font-size: 1.2rem;
+  animation: spin 500ms linear infinite;
+}
+
 @include color-mode(light) {
   .rel-topics-container {
     border-color: $divider-light;

frontend/src/Components/Article/ArticleHeader/ArticleHeader.jsx

@@ -23,22 +23,19 @@ export default function ArticleHeader({
   author,
   date,
   isBookmarked,
+  isPending,
   bookmarkToggler,
 }) {
   return (
     <Stack gap={2}>
       <ArticleHeaderTitle
         title={title}
         isBookmarked={isBookmarked}
+        isPending={isPending}
         bookmarkToggler={bookmarkToggler}
       />
       <ArticleHeaderDesc desc={description} />
-      <ArticleHeaderAuthorDate
-        author={author}
-        date={date}
-        bookmarkToggler={bookmarkToggler}
-        isBookmarked={isBookmarked}
-      />
+      <ArticleHeaderAuthorDate author={author} date={date} />
     </Stack>
   );
 }

frontend/src/Components/Article/ArticleHeader/ArticleHeaderTitle.jsx

@@ -1,16 +1,20 @@
 import { Stack } from "react-bootstrap";
 
 import { Bookmark, BookmarkFill } from "react-bootstrap-icons";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
 //component for article title
 export default function ArticleHeaderTitle({
   title,
   isBookmarked,
+  isPending,
   bookmarkToggler,
 }) {
   return (
     <Stack direction="horizontal" gap={2}>
-      {isBookmarked ? (
+      {isPending ? (
+        <AiOutlineLoading3Quarters className="loading fs-2" />
+      ) : isBookmarked ? (
         <BookmarkFill className="article-bookmark" onClick={bookmarkToggler} />
       ) : (
         <Bookmark className="article-bookmark" onClick={bookmarkToggler} />

frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.jsx

@@ -2,19 +2,22 @@ import { Image } from "react-bootstrap";
 import "./ArticleResult.scss";
 import { Bookmark, BookmarkFill } from "react-bootstrap-icons";
 import { useNavigate } from "react-router-dom";
-export default function ArticleResult({ article, bookmarkToggler }) {
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+export default function ArticleResult({ article, isPending, bookmarkToggler }) {
   const navigate = useNavigate();
 
   const articleNavigate = () => {
     navigate(`/article_view/${article.id}`);
   };
   return (
     <div className="article-result">
-      <div className="article-result-image-container">
+      <div className="article-result-image-container" onClick={articleNavigate}>
         <Image src={article.image} className="article-result-image" />
       </div>
       <div>
-        {article.isBookmarked ? (
+        {isPending ? (
+          <AiOutlineLoading3Quarters className="loading" />
+        ) : article.isBookmarked ? (
           <BookmarkFill
             className="article-result-bookmark"
             onClick={bookmarkToggler}

frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.scss

@@ -8,7 +8,15 @@
 .article-result {
   display: flex;
   gap: 10px;
-  height: 100px;
+  height: 100%;
+  padding: 0.5rem;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid $primary;
+    border-radius: 10px;
+  }
+
   @include media-breakpoint-up(sm) {
     height: 150px;
   }

frontend/src/Components/Header/Header.jsx

@@ -1,27 +1,33 @@
-import logo from "../../assets/logo.png";
-import avatar from "../../assets/avatar.jpg";
 import {
+  Button,
   Container,
+  Image,
   Nav,
   Navbar,
-  Image,
-  Stack,
   NavDropdown,
   OverlayTrigger,
   Popover,
-  Button,
-  DropdownButton,
-  ButtonGroup,
-  Dropdown,
+  Stack
 } from "react-bootstrap";
+import avatar from "../../assets/avatar.jpg";
 import SearchBar from "../SearchBar";
-import { SunFill, MoonFill } from "react-bootstrap-icons";
 
+import { useAuthContext } from "../../hooks/useAuthContext";
+import { useLogout } from "../../hooks/useLogout";
 import "./Header.scss";
-import { useState } from "react";
 
 export default function Header() {
-  const [isDark, setIsDark] = useState(false);
+  const { user } = useAuthContext();
+  const { logout } = useLogout();
+  const storedUser = localStorage.getItem("user");
+  let username = null;
+  if (storedUser) {
+    username = JSON.parse(storedUser).username;
+  }
+
+  const handleLogout = () => {
+    logout();
+  };
 
   return (
     <>
@@ -80,28 +86,12 @@ export default function Header() {
                         as="h3"
                         className="text-center bg-primary"
                       >
-                        Hello John!
+                        {username
+                          ? username.charAt(0).toUpperCase() + username.slice(1)
+                          : "Guest"}
                       </Popover.Header>
                       <Popover.Body className="py-2">
                         <Nav>
-                          <Nav.Item>
-                            <Nav.Link
-                              className="fw-medium"
-                              href="/settings/profile-settings"
-                              id="dropdown_items"
-                            >
-                              My Profile
-                            </Nav.Link>
-                          </Nav.Item>
-                          <Nav.Item>
-                            <Nav.Link
-                              className="fw-medium"
-                              href="/settings/saved-articles"
-                              id="dropdown_items"
-                            >
-                              Saved Articles
-                            </Nav.Link>
-                          </Nav.Item>
                           <Nav.Item>
                             <Nav.Link
                               className="fw-medium"
@@ -113,14 +103,26 @@ export default function Header() {
                           </Nav.Item>
                           <div id="profile_menu_divider"></div>
                           <Nav.Item>
-                            <Nav.Link
-                              className="fw-medium"
-                              href="/signin"
-                              id="dropdown_items"
-                              style={{ color: "red" }}
-                            >
-                              Sign out
-                            </Nav.Link>
+                            {user ? (
+                              <Nav.Link
+                                className="fw-medium"
+                                href="/signin"
+                                id="dropdown_items"
+                                style={{ color: "red" }}
+                                onClick={handleLogout}
+                              >
+                                Sign out
+                              </Nav.Link>
+                            ) : (
+                              <Nav.Link
+                                className="fw-bold"
+                                href="/signin"
+                                id="dropdown_items"
+                                style={{ color: "lightblue" }}
+                              >
+                                Sign in
+                              </Nav.Link>
+                            )}
                           </Nav.Item>
                         </Nav>
                       </Popover.Body>

frontend/src/Components/Header/Header.scss

@@ -28,7 +28,7 @@
 
 #dropdown_items {
   color: $link-text;
-  padding-left: 10px;
+  padding: 8px 10px;
   font-size: 1.2em;
   &:hover {
     font-weight: 600 !important;