Merge pull request #818 from bounswe/FRONTEND-809

feat(frontend): implement bookmark word functionality
bounswe · Dec 14, 2024 · ca0e0e2 · ca0e0e2
2 parents 03710ef + 5c1029a
commit ca0e0e2
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 4 deletions.
diff --git a/frontend/src/components/common/dictionary-modal.tsx b/frontend/src/components/common/dictionary-modal.tsx
@@ -4,15 +4,24 @@ import {
   ModalContent,
   ModalBody,
   ScrollShadow,
+  Button,
 } from "@nextui-org/react";
+import { IconBookmark, IconBookmarkFilled } from "@tabler/icons-react";
 import { useState, useEffect } from "react";
 import axios from "axios";
 import { BASE_URL } from "../../lib/baseURL";
 import ClickableText from "./clickable-text";
+import { AuthActions } from "../auth/utils";
+import GuestAuthModal from "../auth/guest-auth-modal";
 
 export default function DictionaryModal({ isOpen, setIsOpen, word }) {
   const [meanings, setMeanings] = useState([]);
   const [translations, setTranslations] = useState([]);
+  const [isBookmarked, setIsBookmarked] = useState(false);
+  const [guestModalOpen, setGuestModalOpen] = useState(false);
+  const { getToken } = AuthActions();
+  const token = getToken("access");
+  const isGuest = !token;
 
   useEffect(() => {
     if (!word) {
@@ -33,6 +42,43 @@ export default function DictionaryModal({ isOpen, setIsOpen, word }) {
         console.log(error);
       });
   }, [word]);
+
+  useEffect(() => {
+    if (!word) {
+      return;
+    }
+    axios
+      .get(`${BASE_URL}/word/bookmarks/`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((response) => {
+        console.log(response.data);
+        setIsBookmarked(response.data.bookmarked_words.includes(word));
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }, [word, token]);
+
+  const toggleBookmark = () => {
+    axios
+      .post(
+        `${BASE_URL}/word/${isBookmarked ? "unbookmark" : "bookmark"}/${word}/`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      )
+      .then((response) => {
+        console.log(response.data);
+        setIsBookmarked(!isBookmarked);
+      });
+  };
+
   return (
     <Modal
       isOpen={isOpen}
@@ -43,7 +89,34 @@ export default function DictionaryModal({ isOpen, setIsOpen, word }) {
     >
       {word && (
         <ModalContent className="pb-6 gap-3">
-          <ModalHeader>{word.match(/[a-zA-Z]+/g).join(" ")}</ModalHeader>
+          <ModalHeader>
+            <div className="flex items-center gap-2">
+              <div>{word.match(/[a-zA-Z]+/g).join(" ")}</div>
+              <Button
+                isIconOnly
+                color="secondary"
+                aria-label="Bookmark"
+                onClick={
+                  isGuest
+                    ? () => {
+                        setGuestModalOpen(true);
+                      }
+                    : toggleBookmark
+                }
+                variant="light"
+              >
+                {isBookmarked ? (
+                  <IconBookmarkFilled size={20} stroke={1.5} />
+                ) : (
+                  <IconBookmark size={20} stroke={1.5} />
+                )}
+              </Button>
+              <GuestAuthModal
+                isOpen={guestModalOpen}
+                setIsOpen={setGuestModalOpen}
+              />
+            </div>
+          </ModalHeader>
           <ModalBody className="text-left text-default-500">
             <ScrollShadow className="max-h-[450px]">
               <h1 className="text-lg font-semibold text-default-900">

diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
@@ -12,6 +12,7 @@ import {
   ModalContent,
   ModalBody,
   ModalHeader,
+  Card,
 } from "@nextui-org/react";
 import { useState, useEffect, Suspense } from "react";
 
@@ -39,6 +40,7 @@ import Cookies from "js-cookie";
 import { usePageTitle } from "../components/common/usePageTitle.ts";
 import QuizCard from "../components/quiz/quiz-card.tsx";
 import GuestAuthModal from "../components/auth/guest-auth-modal.tsx";
+import ClickableText from "../components/common/clickable-text.tsx";
 
 export default function Profile() {
   usePageTitle("Profile");
@@ -214,6 +216,22 @@ export default function Profile() {
       });
   }, [token]);
 
+  useEffect(() => {
+    axios
+      .get(`${BASE_URL}/word/bookmarks/`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((response) => {
+        console.log(response.data);
+        setBookmarkedWords(response.data.bookmarked_words);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }, [token]);
+
   const toggleFollow = () => {
     axios
       .post(
@@ -472,7 +490,7 @@ export default function Profile() {
                       </div>
                     }
                   >
-                    <div className="flex flex-col gap-4 items-center">
+                    <div className="flex flex-col gap-4 items-left w-[740px]">
                       {bookmarkedPosts.map((post) => (
                         <Suspense key={post.id} fallback={<PostCardSkeleton />}>
                           <PostCard
@@ -499,7 +517,7 @@ export default function Profile() {
                       </div>
                     }
                   >
-                    <div className="flex flex-col gap-4 items-center">
+                    <div className="flex flex-col gap-4 items-left w-[740px]">
                       {bookmarkedQuizzes.map((quiz) => (
                         <Suspense key={quiz.id} fallback={<PostCardSkeleton />}>
                           <QuizCard
@@ -527,7 +545,15 @@ export default function Profile() {
                       </div>
                     }
                   >
-                    <div className="w-[740px]">Words</div>
+                    <div className="flex flex-col gap-4 items-left w-[740px]">
+                      {bookmarkedWords.map((word, index) => (
+                        <Suspense key={index} fallback={<PostCardSkeleton />}>
+                          <Card className="w-48 px-2 py-2 text-center">
+                            <ClickableText text={word} />
+                          </Card>
+                        </Suspense>
+                      ))}
+                    </div>
                   </Tab>
                 </Tabs>
               </div>