Merge pull request #768 from bounswe/FRONTEND-765

Frontend 765: added created and solved quizzes to profile page
bounswe · Dec 12, 2024 · 9b4cd1c · 9b4cd1c
2 parents 2a1d09d + 2908990
commit 9b4cd1c
Showing 1 changed file with 82 additions and 4 deletions.
diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
@@ -15,7 +15,7 @@ import PostCardSkeleton from "../components/post/post-card-skeleton.tsx";
 import axios from "axios";
 import { useParams } from "react-router-dom";
 import { BASE_URL } from "../lib/baseURL";
-import type { Post, Profile, ProfileResponse } from "../types.ts";
+import type { Post, Profile, ProfileResponse, Quiz } from "../types.ts";
 import {
   IconBookmark,
   IconSquareRoundedCheck,
@@ -26,9 +26,11 @@ import { AuthActions } from "../components/auth/utils.tsx";
 import {
   convertPostResponseToPost,
   convertProfileResponseToProfile,
+  convertQuizResponseToQuiz,
 } from "../components/common/utils.tsx";
 import Cookies from "js-cookie";
 import { usePageTitle } from "../components/common/usePageTitle.ts";
+import QuizCard from "../components/quiz/quiz-card.tsx";
 
 export default function Profile() {
   usePageTitle("Profile");
@@ -40,6 +42,8 @@ export default function Profile() {
   const [isFollowing, setIsFollowing] = useState(false);
   const [followCount, setFollowCount] = useState(0);
   const [bookmarkedPosts, setBookmarkedPosts] = useState<Post[]>([]);
+  const [solvedQuizzes, setSolvedQuizzes] = useState<Quiz[]>([]);
+  const [createdQuizzes, setCreatedQuizzes] = useState<Quiz[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -103,6 +107,46 @@ export default function Profile() {
     }
   }, [token]);
 
+  useEffect(() => {
+    axios
+        .get(
+          `${BASE_URL}/quiz/solved/${username}/`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          }
+        )
+        .then((response) => {
+          console.log("solved", response.data);
+          const solved = response.data.map(convertQuizResponseToQuiz);
+          setSolvedQuizzes(solved);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+  }, [token]);
+
+  useEffect(() => {
+    axios
+        .get(
+          `${BASE_URL}/quiz/created/${username}/`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          }
+        )
+        .then((response) => {
+          console.log(response.data);
+          const createdquiz = response.data.map(convertQuizResponseToQuiz);
+          setCreatedQuizzes(createdquiz);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+  }, [token]);
+
   const toggleFollow = () => {
     axios
       .post(
@@ -163,7 +207,7 @@ export default function Profile() {
               <div className="mx-4 max-w-52">
                 <h3 className="text-xl font-semibold">{profile.username}</h3>
                 <p className="text-gray-500">@{profile.level}</p>
-                <p className="text-zinc-800 break-words">
+                <p className="text-zinc-600 break-words">
                   {profile.bio || "Hey, new learner here!"}
                 </p>
               </div>
@@ -249,7 +293,24 @@ export default function Profile() {
               </div>
             }
           >
-            <p></p>
+            <div className="flex flex-col gap-4 items-center">
+                {createdQuizzes.map((quiz) => (
+                  <Suspense key={quiz.id} fallback={<PostCardSkeleton />}>
+                    <QuizCard
+                      id={quiz.id}
+                      username={quiz.author.username}
+                      title={quiz.quiz.title}
+                      content={quiz.quiz.description}
+                      timePassed={quiz.quiz.timestamp}
+                      timesTaken={quiz.quiz.times_taken}
+                      likeCount={quiz.engagement.like_count}
+                      tags={quiz.quiz.tags}
+                      initialIsLiked={quiz.engagement.is_liked}
+                      initialIsBookmarked={quiz.engagement.is_bookmarked}
+                    />
+                  </Suspense>
+                ))}
+              </div>
           </Tab>
           <Tab
             key="solved"
@@ -260,7 +321,24 @@ export default function Profile() {
               </div>
             }
           >
-            <p></p>
+            <div className="flex flex-col gap-4 items-center">
+                {solvedQuizzes.map((quiz) => (
+                  <Suspense key={quiz.id} fallback={<PostCardSkeleton />}>
+                    <QuizCard
+                      id={quiz.id}
+                      username={quiz.author.username}
+                      title={quiz.quiz.title}
+                      content={quiz.quiz.description}
+                      timePassed={quiz.quiz.timestamp}
+                      timesTaken={quiz.quiz.times_taken}
+                      likeCount={quiz.engagement.like_count}
+                      tags={quiz.quiz.tags}
+                      initialIsLiked={quiz.engagement.is_liked}
+                      initialIsBookmarked={quiz.engagement.is_bookmarked}
+                    />
+                  </Suspense>
+                ))}
+              </div>
           </Tab>
           {profile?.username === Cookies.get("username") && (
             <Tab