From fef6fa4b49966dd32ecc6e44934fe026f79d71ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20Deniz=20Demir?=
 <32364679+odenizddd@users.noreply.github.com>
Date: Thu, 19 Dec 2024 12:10:55 +0300
Subject: [PATCH] add links in profile page

---
 .../components/profile/forum-post-card.tsx    |  7 +++++-
 .../hooks/api/quiz-favorite/quiz-favorite.tsx | 24 +++++++++++++++++++
 frontend/src/pages/profile-page.tsx           | 14 +++++++----
 3 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/hooks/api/quiz-favorite/quiz-favorite.tsx

diff --git a/frontend/src/components/profile/forum-post-card.tsx b/frontend/src/components/profile/forum-post-card.tsx
index 2396e22b..fda2c297 100644
--- a/frontend/src/components/profile/forum-post-card.tsx
+++ b/frontend/src/components/profile/forum-post-card.tsx
@@ -3,14 +3,19 @@ import { motion } from "framer-motion";
 import { IconHeart, IconMessages } from "@tabler/icons-react";
 import { timePassed } from "../../utils";
 import { useFetchReplies } from "../../hooks/api/get-reply";
+import { useNavigate } from "react-router-dom";
 
 export const ForumPostCard = ({ post }: { post: ForumPost }) => {
+
+  const navigate = useNavigate();
+
   const { data: replies } = useFetchReplies(post.id);
   return (
     <motion.div
       key={post.id}
       className="p-4 transition-colors cursor-pointer bg-purple-50 rounded-xl hover:bg-purple-100"
       whileHover={{ scale: 1.01 }}
+      onClick={() => navigate(`/post/${post.id}`)}
     >
       <div className="flex items-center justify-between">
         <div>
@@ -21,7 +26,7 @@ export const ForumPostCard = ({ post }: { post: ForumPost }) => {
             {timePassed(post.createdAt)}
           </p>
         </div>
-        <div className="flex items-center gap-4">
+        <div onClick={e => e.stopPropagation()} className="flex items-center gap-4">
           <div className="flex items-center gap-1">
             <IconHeart className="w-5 h-5 text-red-500" />
             <span>{post.noUpvote}</span>
diff --git a/frontend/src/hooks/api/quiz-favorite/quiz-favorite.tsx b/frontend/src/hooks/api/quiz-favorite/quiz-favorite.tsx
new file mode 100644
index 00000000..8bf77cec
--- /dev/null
+++ b/frontend/src/hooks/api/quiz-favorite/quiz-favorite.tsx
@@ -0,0 +1,24 @@
+import { useDeleteQuizFavorite } from "./delete-quiz-favorite";
+import { useFetchQuizFavorites } from "./get-quiz-favorite";
+import { usePostQuizFavorite } from "./post-quiz-favorite";
+
+export const useQuizFavorite = () => {
+    const { data: favoriteQuizzes } = useFetchQuizFavorites();
+    const { mutateAsync: postQuizFavorite } = usePostQuizFavorite();
+    const { mutateAsync: deleteQuizFavorite } = useDeleteQuizFavorite();
+    
+    const isQuizFavorite = (quizId: number | undefined) => {
+        return favoriteQuizzes?.filter(favoriteQuizzes => favoriteQuizzes?.quizId === quizId).length == 1;
+    }
+    
+    const handleLikeClick = (quizId: number | undefined) => {
+        if (!quizId) return;
+        if (!isQuizFavorite(quizId)) {
+        postQuizFavorite(quizId);
+        } else {
+        deleteQuizFavorite(quizId);
+        }
+    };
+    
+    return { isQuizFavorite, handleLikeClick };
+}
\ No newline at end of file
diff --git a/frontend/src/pages/profile-page.tsx b/frontend/src/pages/profile-page.tsx
index 98dbdd73..d83ce866 100644
--- a/frontend/src/pages/profile-page.tsx
+++ b/frontend/src/pages/profile-page.tsx
@@ -13,7 +13,7 @@ import {
 import ProfileUpdateModal from "../components/profile/update-modal";
 
 import { message, Spin, Tabs } from "antd";
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { useGetProfile } from "../hooks/api/profile/get";
 import { useUpdateProfile } from "../hooks/api/profile/update";
 import { useFetchQuizzes } from "../hooks/api/get-quizzes";
@@ -30,6 +30,7 @@ import { usePostFollowing } from "../hooks/api/profile/follow-button/post-follow
 import { useDeleteFollowing } from "../hooks/api/profile/follow-button/delete-following";
 
 import { DeleteQuizButton } from "../components/profile/delete-quiz-button";
+import { useQuizFavorite } from "../hooks/api/quiz-favorite/quiz-favorite";
 
 const ProfilePage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -51,6 +52,10 @@ const ProfilePage = () => {
   const { mutateAsync: followUser } = usePostFollowing();
   const { mutateAsync: unfollowUser } = useDeleteFollowing();
 
+  const { isQuizFavorite, handleLikeClick } = useQuizFavorite();
+
+  const navigate = useNavigate();
+
   const handleFollow = () => {
     if (isFollowing) {
       unfollowUser(username);
@@ -230,6 +235,7 @@ const ProfilePage = () => {
                             key={quiz.id}
                             className="p-4 transition-colors cursor-pointer bg-purple-50 rounded-xl hover:bg-purple-100"
                             whileHover={{ scale: 1.01 }}
+                            onClick={() => {navigate("/quiz/" + quiz.id)}}
                           >
                             <div className="flex items-center justify-between">
                               <div>
@@ -240,11 +246,11 @@ const ProfilePage = () => {
                                   {quiz.questions.length} Questions
                                 </p>
                               </div>
-                              <div className="flex items-center gap-4">
+                              <div onClick={e => e.stopPropagation()} className="flex items-center gap-4">
                                 <DifficultyBadge difficulty={quiz.difficulty} />
                                 <div className="flex items-center gap-1">
-                                  <IconHeart className="w-5 h-5 text-red-500" />
-                                  {/* <span>{quiz.likes}</span> */}4
+                                  <IconHeart onClick={() => {handleLikeClick(quiz.id)}} className={`w-5 h-5 text-red-500 + ${(isQuizFavorite(quiz && quiz.id) ? "fill-red-500" : "")}`} />
+                                  {/* <span>{quiz.likes}</span> */}
                                 </div>
                                 {isOwnProfile && (
                                   <DeleteQuizButton