From 66dd9ddfcda7f37bf5ad921e844f6307e09ccee4 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 02:28:36 +0000
Subject: [PATCH 01/24] feat(post.dto): add optional imageUrl to CreatePostDTO

---
 server/src/modules/post/post.dto.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/server/src/modules/post/post.dto.ts b/server/src/modules/post/post.dto.ts
index b544dbb..9e83671 100644
--- a/server/src/modules/post/post.dto.ts
+++ b/server/src/modules/post/post.dto.ts
@@ -17,6 +17,10 @@ export class CreatePostDTO {
   @IsString()
   forumId: string;
 
+  @ApiProperty({ description: 'The image URL of the post', required: false })
+  @IsString()
+  imageUrl?: string;
+
   // @ApiProperty({ description: 'The ID of the user creating the post' })
   // @IsNotEmpty()
   // @IsString()

From 6c26c185568f02ff47b390b08c8995a1d9ad736c Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 02:29:09 +0000
Subject: [PATCH 02/24] feat(post.service): handle imageUrl in post creation

---
 server/src/modules/post/post.service.ts | 34 +++++++++++++++++++------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/server/src/modules/post/post.service.ts b/server/src/modules/post/post.service.ts
index 9358fde..e051058 100644
--- a/server/src/modules/post/post.service.ts
+++ b/server/src/modules/post/post.service.ts
@@ -12,7 +12,7 @@ export class PostService {
   constructor(private prisma: PrismaService) {}
 
   async create(userId: string, postData: CreatePostDTO): Promise<PostModel> {
-    const { title, content, forumId } = postData;
+    const { title, content, forumId, imageUrl } = postData;
     const slug = slugify(title, { lower: true, strict: true }).substring(
       0,
       100,
@@ -26,19 +26,37 @@ export class PostService {
       throw new Error('Forum not found');
     }
 
-    return this.prisma.post.create({
+    // Create the post
+    const post = await this.prisma.post.create({
       data: {
         title,
         content,
         slug,
-        user: {
-          connect: { id: userId },
-        },
-        forum: {
-          connect: { id: forumId },
-        },
+        userId,
+        forumId,
       },
     });
+
+    // Create the attachment
+    if (imageUrl) {
+      const attachment = await this.prisma.attachment.create({
+        data: {
+          name: 'Image for post ' + title,
+          type: 'image',
+          url: imageUrl,
+        },
+      });
+
+      // Connect the post and the attachment
+      await this.prisma.postAttachment.create({
+        data: {
+          postId: post.id,
+          attachmentId: attachment.id,
+        },
+      });
+    }
+
+    return post;
   }
 
   async searchPosts(searchTerm: string): Promise<PostModel[]> {

From 47f012306da2f9696a82fb3ca62362cda095ce4f Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 03:00:33 +0000
Subject: [PATCH 03/24] fix(side-bar): update image src to prevent caching

---
 client/src/components/core/side-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/core/side-bar.tsx b/client/src/components/core/side-bar.tsx
index fdaef8a..9a18a5f 100644
--- a/client/src/components/core/side-bar.tsx
+++ b/client/src/components/core/side-bar.tsx
@@ -74,7 +74,7 @@ export default function SideBar() {
                       <div key={forum.id} className="flex gap-4 items-center">
                         <Image
                           key={forum.id}
-                         src={forum.logo ? `${forum.logo}&id=${forum.id}` : "https://placehold.co/150/EEE/31343C?font=montserrat&text=No+image"}
+                          src={forum.logo ? `${forum.logo}?t=${Date.now()}` : "https://placehold.co/150/EEE/31343C?font=montserrat&text=No+image"}
                           alt={forum.name}
                           width={32}
                           height={32}

From bcac60795fd0ee7c5b94415fb5a497984e6f8355 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 03:00:56 +0000
Subject: [PATCH 04/24] feat(forum.dto): add optional logo and banner to
 CreateForumDTO

---
 server/src/modules/forum/forum.dto.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/server/src/modules/forum/forum.dto.ts b/server/src/modules/forum/forum.dto.ts
index 64138ef..4ecebb1 100644
--- a/server/src/modules/forum/forum.dto.ts
+++ b/server/src/modules/forum/forum.dto.ts
@@ -17,6 +17,14 @@ export class CreateForumDTO {
   @IsString()
   description: string;
 
+  @ApiProperty({ description: 'The logo URL of the forum', required: false })
+  @IsString()
+  logo?: string;
+
+  @ApiProperty({ description: 'The banner URL of the forum', required: false })
+  @IsString()
+  banner?: string;
+
   // @ApiProperty({ description: 'The ID of the user who owns the forum' })
   // @IsString()
   // ownerUserId: string;

From 6d0481c21252dd92f0a35c883591277e53078189 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 03:01:14 +0000
Subject: [PATCH 05/24] feat(forum.service): handle logo and banner in forum
 creation

---
 server/src/modules/forum/forum.service.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/server/src/modules/forum/forum.service.ts b/server/src/modules/forum/forum.service.ts
index 6751f1c..0475a4c 100644
--- a/server/src/modules/forum/forum.service.ts
+++ b/server/src/modules/forum/forum.service.ts
@@ -263,7 +263,7 @@ export class ForumService {
   }
 
   async create(userId: string, forumData: CreateForumDTO): Promise<ForumModel> {
-    const { name, description, slug } = forumData;
+    const { name, description, slug, logo, banner } = forumData;
     const existingForum = await this.prisma.forum.findUnique({
       where: { slug },
     });
@@ -276,6 +276,8 @@ export class ForumService {
         name,
         description,
         slug,
+        logo,
+        banner,
         owner: {
           connect: { id: userId },
         },

From f1baf53f8e89214aa41c9a5b3cf176f5dcf12a3c Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 04:01:30 +0000
Subject: [PATCH 06/24] feat(post.service): modify findAll to fetch all posts
 by default

---
 server/src/modules/post/post.controller.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/modules/post/post.controller.ts b/server/src/modules/post/post.controller.ts
index 35c721d..553c491 100644
--- a/server/src/modules/post/post.controller.ts
+++ b/server/src/modules/post/post.controller.ts
@@ -53,7 +53,7 @@ export class PostController {
     @Query('take') take: string,
   ): Promise<PostModel[]> {
     const pageNumber = parseInt(page, 10) || 0;
-    const takeNumber = parseInt(take, 10) || 10;
+    const takeNumber = parseInt(take, 10) || 99999; //for now testing
 
     return this.postService.findAll({ page: pageNumber, take: takeNumber });
   }

From 295e959cb28b0b1f1132ec9c396f1e9ed179f02b Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 04:09:10 +0000
Subject: [PATCH 07/24] feat(post.controller): add order query parameter to
 getAllPosts method

---
 server/src/modules/post/post.controller.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/server/src/modules/post/post.controller.ts b/server/src/modules/post/post.controller.ts
index 553c491..4d8d957 100644
--- a/server/src/modules/post/post.controller.ts
+++ b/server/src/modules/post/post.controller.ts
@@ -46,16 +46,29 @@ export class PostController {
     type: Number,
     description: 'Number of posts per page (default is 10)',
   })
+  @ApiQuery({
+    name: 'order',
+    required: false,
+    type: String,
+    description:
+      "Order of posts ('asc' for oldest first, 'desc' for latest first, default is 'desc')",
+  })
   @ApiResponse({ status: 200, description: 'Return all posts with pagination' })
   @ApiOperation({ summary: 'Get all posts with pagination' })
   async getAllPosts(
     @Query('page') page: string,
     @Query('take') take: string,
+    @Query('order') order: 'asc' | 'desc',
   ): Promise<PostModel[]> {
     const pageNumber = parseInt(page, 10) || 0;
-    const takeNumber = parseInt(take, 10) || 99999; //for now testing
+    const takeNumber = parseInt(take, 10) || 10;
+    const orderDirection = order || 'desc';
 
-    return this.postService.findAll({ page: pageNumber, take: takeNumber });
+    return this.postService.findAll({
+      page: pageNumber,
+      take: takeNumber,
+      orderBy: { createdAt: orderDirection },
+    });
   }
 
   @Get('post/:id')

From 8ad9162d07f607d8c60c21079c2e1ca14256b1bc Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 05:35:09 +0000
Subject: [PATCH 08/24] feat(post): add CommentInput component to post page

---
 client/src/app/(post)/post/[slug]/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/app/(post)/post/[slug]/page.tsx b/client/src/app/(post)/post/[slug]/page.tsx
index 92843ec..480efb7 100644
--- a/client/src/app/(post)/post/[slug]/page.tsx
+++ b/client/src/app/(post)/post/[slug]/page.tsx
@@ -9,7 +9,7 @@ import { Button } from "~/components/ui/button";
 import { FaPlus } from "react-icons/fa6";
 import FullPost from "~/components/posts/fullpost";
 import Comment from "~/components/comment/comment";
-
+import CommentInput from "~/components/comment/commentInput";
 function Page({ params }: { params: { slug: string } }) {
   const { getPost, getComments } = useFetcher();
   const { data: postData, error: postError } = useSWR(`getPost/${params.slug}`, getPost);
@@ -21,6 +21,7 @@ function Page({ params }: { params: { slug: string } }) {
       {postData && (
         <div>
           <FullPost post={postData} />
+          <CommentInput postId={postData.id} />
           <Comment comments={commentsData} />
         </div>
       )}

From 5fde9cb576d912df54f4636f2f9987a87ab2386a Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 05:35:42 +0000
Subject: [PATCH 09/24] feat(fetcher): add getUser function and update
 postComment function

---
 client/src/hooks/fetcher.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/src/hooks/fetcher.tsx b/client/src/hooks/fetcher.tsx
index e0d7e12..da070e2 100644
--- a/client/src/hooks/fetcher.tsx
+++ b/client/src/hooks/fetcher.tsx
@@ -74,7 +74,7 @@ export const useFetcher = (filter = 'hot') => {
         }
     }
 
-    const postComment = async (key: string, content: string, parentId: string) => {
+    const postComment = async (key: string, content: string, parentId: string | null) => {
         const postId = key.replace('postComment/', '');
         try {
             const response = await axios.post('/comments/comment', {
@@ -105,6 +105,18 @@ export const useFetcher = (filter = 'hot') => {
         }
     }
 
+    const getUser = async () => {
+        try {
+          const response = await axios.get('/users/me', {
+            withCredentials: true
+          });
+          return response.data;
+        } catch (error) {
+          // @ts-ignore
+          throw new Error(error);
+        }
+      }
+
     return {
         allPosts,
         allForums,
@@ -113,6 +125,7 @@ export const useFetcher = (filter = 'hot') => {
         createPost,
         getPost,
         postComment,
-        getComments
+        getComments,
+        getUser,
     }
 }

From 377ee043f08ff608e3a59f3d6ba0f3be29a889c5 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 05:35:57 +0000
Subject: [PATCH 10/24] refactor(comment-service): update comment creation
 logic

---
 server/src/modules/comment/comment.service.ts | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/server/src/modules/comment/comment.service.ts b/server/src/modules/comment/comment.service.ts
index 4b728a0..8200a92 100644
--- a/server/src/modules/comment/comment.service.ts
+++ b/server/src/modules/comment/comment.service.ts
@@ -154,22 +154,24 @@ export class CommentService {
     },
   ): Promise<CommentModel> {
     const { content, postId, parentId } = CommentData;
+    console.log('CommentData', CommentData);
     try {
-      const comment = await this.prisma.comment.create({
-        data: {
-          content,
-          user: {
-            connect: { id: userId },
-          },
-          post: {
-            connect: { id: postId },
-          },
-          parent: parentId
-            ? {
-                connect: { id: parentId },
-              }
-            : null,
+      const data: any = {
+        content,
+        user: {
+          connect: { id: userId },
+        },
+        post: {
+          connect: { id: postId },
         },
+      };
+      if (parentId) {
+        data.parent = {
+          connect: { id: parentId },
+        };
+      }
+      const comment = await this.prisma.comment.create({
+        data,
       });
       return comment;
     } catch (error) {

From 890a6e47afd421d14553e20edc92542b89b9652c Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 05:36:25 +0000
Subject: [PATCH 11/24] feat(post-controller): add order query parameter to
 getCommentsByPostId function

---
 server/src/modules/post/post.controller.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/server/src/modules/post/post.controller.ts b/server/src/modules/post/post.controller.ts
index 4d8d957..30ae2f3 100644
--- a/server/src/modules/post/post.controller.ts
+++ b/server/src/modules/post/post.controller.ts
@@ -127,8 +127,17 @@ export class PostController {
     description: 'Return all comments of the post with the given ID',
   })
   @ApiResponse({ status: 404, description: 'Post not found' })
-  async getCommentsByPostId(@Param('id') id: string): Promise<CommentModel[]> {
-    return this.postService.findCommentsByPostId(id);
+  @ApiQuery({
+    name: 'order',
+    required: false,
+    type: String,
+    description: 'Order of the comments (default is "desc")',
+  })
+  async getCommentsByPostId(
+    @Param('id') id: string,
+    @Query('order') order: 'asc' | 'desc',
+  ): Promise<CommentModel[]> {
+    return this.postService.findCommentsByPostId(id, order || 'desc');
   }
 
   // @Get('feed')

From 5f1a8f04088f283e81d572979c7b52a09f2371d3 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 05:37:48 +0000
Subject: [PATCH 12/24] feat(post-service): add order parameter to
 findCommentsByPostId function

---
 server/src/modules/post/post.service.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/server/src/modules/post/post.service.ts b/server/src/modules/post/post.service.ts
index e051058..3017d5d 100644
--- a/server/src/modules/post/post.service.ts
+++ b/server/src/modules/post/post.service.ts
@@ -217,11 +217,17 @@ export class PostService {
     });
   }
 
-  async findCommentsByPostId(postId: string): Promise<CommentModel[]> {
+  async findCommentsByPostId(
+    postId: string,
+    order: 'asc' | 'desc',
+  ): Promise<CommentModel[]> {
     let comments = await this.prisma.comment.findMany({
       where: {
         postId: postId,
       },
+      orderBy: {
+        createdAt: order,
+      },
       include: {
         user: {
           select: {

From 0ac9d570af81cd63a6f6e19d00b3589658c34204 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 05:38:01 +0000
Subject: [PATCH 13/24] feat(comment-input): add new CommentInput component

---
 .../src/components/comment/commentInput.tsx   | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 client/src/components/comment/commentInput.tsx

diff --git a/client/src/components/comment/commentInput.tsx b/client/src/components/comment/commentInput.tsx
new file mode 100644
index 0000000..7addbfd
--- /dev/null
+++ b/client/src/components/comment/commentInput.tsx
@@ -0,0 +1,56 @@
+import { useFetcher } from '~/hooks/fetcher';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState, useEffect } from 'react';
+
+interface CommentInputProps {
+    postId: string;
+}
+interface User {
+    username: string;
+    avatarUrl: string;
+  }
+const CommentInput: React.FC<CommentInputProps> = ({ postId }) => {
+    const [content, setContent] = useState('');
+    const [user, setUser] = useState<User | null>(null);
+    const { postComment, getUser } = useFetcher();
+
+    useEffect(() => {
+        const fetchUser = async () => {
+            const userData = await getUser();
+            setUser(userData);
+        };
+
+        fetchUser();
+    }, []);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        await postComment(`postComment/${postId}`, content, null);
+        setContent('');
+    };
+
+    return (
+        <div className="flex gap-2 items-center py-2">
+            {user && (
+                <>
+                    <Link href={`/${user.username}`}>
+                        <Image
+                            className="rounded-full h-8 w-8 md:w-10 md:h-10"
+                            src={user.avatarUrl || `https://eu.ui-avatars.com/api/?name=${encodeURIComponent(user.username)}&size=250`}
+                            alt="logo"
+                            width={40}
+                            height={400}
+                        />
+                    </Link>
+                    <form onSubmit={handleSubmit} className="flex flex-col justify-center">
+                        <textarea value={content} onChange={e => setContent(e.target.value)} className="dark:text-primary text-sm" />
+                        <button type="submit" className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded mt-2">Post Comment</button>
+                    </form>
+                </>
+            )}
+        </div>
+    );
+};
+
+export default CommentInput;

From 1b34e8f1f7b3ffc806941c533c7d70705fa1a49d Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 06:01:04 +0000
Subject: [PATCH 14/24] feat: update application metadata

---
 client/src/app/layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index db45625..e30305b 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -14,8 +14,8 @@ import { dark } from "@clerk/themes";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "WeGotThis Community",
+  description: "You are not alone. WeGotThis Community is here to help you.",
 };
 
 export default function RootLayout({

From fb48fe1ee7084a137d98421b18f072176df1a9f1 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 10:37:23 +0000
Subject: [PATCH 15/24] feat: add search functionality

Extracted search box into a separate component.
Added searchPosts function in fetcher hook.
Added a new page for displaying search results.
---
 client/src/app/search/[query]/page.tsx        |  29 +++++
 client/src/components/core/header.tsx         | 107 +---------------
 client/src/components/core/mobile-sidebar.tsx | 116 ++++++++++++++++++
 .../src/components/posts/HighlightedPost.tsx  |  25 ++++
 client/src/components/search/search.tsx       |  65 ++++++++++
 client/src/hooks/fetcher.tsx                  |  26 ++--
 6 files changed, 258 insertions(+), 110 deletions(-)
 create mode 100644 client/src/app/search/[query]/page.tsx
 create mode 100644 client/src/components/core/mobile-sidebar.tsx
 create mode 100644 client/src/components/posts/HighlightedPost.tsx
 create mode 100644 client/src/components/search/search.tsx

diff --git a/client/src/app/search/[query]/page.tsx b/client/src/app/search/[query]/page.tsx
new file mode 100644
index 0000000..4c53b0b
--- /dev/null
+++ b/client/src/app/search/[query]/page.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import React from "react";
+import { useFetcher } from "~/hooks/fetcher";
+import useSWR from "swr";
+import Post from "~/components/posts/post";
+import { Separator } from "@radix-ui/react-separator";
+
+
+function SearchPage({ params }: { params: { query: string } }) {
+  const { searchPosts } = useFetcher();
+  const { data: results, error } = useSWR(`searchPosts/${params.query}`, searchPosts);
+
+  if (error) return <div>Failed to load</div>
+  if (!results) return <div>Loading...</div>
+
+  return (
+    <div>
+      {results.map((post: any) => (
+        <div key={post.id} className="flex flex-col gap-8">
+          <Post post={post} />
+          <Separator className="bg-[#64748B] bg-opacity-30 h-[2px]" />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SearchPage;
diff --git a/client/src/components/core/header.tsx b/client/src/components/core/header.tsx
index 636aee7..e341818 100644
--- a/client/src/components/core/header.tsx
+++ b/client/src/components/core/header.tsx
@@ -21,6 +21,8 @@ import {
 import Link from "next/link";
 import { Button } from "~/components/ui/button";
 import Image from "next/image";
+import SearchBox from "~/components/search/search";
+import MobileSidebar from "~/components/core/mobile-sidebar";
 
 export default function Header() {
   const [searchValue, setSearchValue] = useState<string>("");
@@ -63,21 +65,7 @@ export default function Header() {
           height={120}
           alt="logo"
         />
-        <label className={"relative block md:min-w-[600px]"}>
-          <span className={"sr-only"}>Search</span>
-          <span className="absolute inset-y-0 left-2 flex items-center pl-2">
-            <FaSearch />
-          </span>
-          <Input
-            className={
-              "place-self-center border-[#a37f2a] dark:bg-[#2E2B24] text-[#CBD5E1] focus-visible:ring-offset-0 ring-offset-0 rounded-[20px] px-12 placeholder:italic"
-            }
-            placeholder={"Search posts"}
-            onChange={handleChange}
-            onKeyUp={handleSearch}
-            value={searchValue}
-          />
-        </label>
+        <SearchBox />
         <div className={"lg:hidden flex items-center"}>
           <button type={"button"} className={""} onClick={handleShow}>
             <FaBars className={"text-primary text-2xl"} />
@@ -100,94 +88,7 @@ export default function Header() {
           )}
         </div>
       </div>
-      <Sheet open={open} onOpenChange={handleShow}>
-        <SheetContent
-          className={"w-[250px] bg-zinc-950 border-0 overflow-y-scroll"}
-        >
-          <div className={"flex gap-4 py-8 items-center"}>
-            {/* <Image className={'rounded-full'} src={'https://ui-avatars.com/api/?name=jd&background=facc15'}
-                               alt={'avatar'} width={48} height={48}/> */}
-            <UserButton />
-            <div className={"flex flex-col justify-center"}>
-              <p>{user?.username}</p>
-              <p className={"text-sm text-center"}>Post: 100</p>
-            </div>
-          </div>
-          <div className={"flex flex-col items-end w-full py-8"}>
-            <ul className={"flex flex-col gap-1 w-full"}>
-              <li
-                className={
-                  "flex gap-2 items-center text-xl p-4 rounded-lg hover:text-primary cursor-pointer"
-                }
-              >
-                <FaHome />
-                <Link className={""} href={"/"} onClick={handleShow}>
-                  Home
-                </Link>
-              </li>
-              <li
-                className={
-                  "flex gap-2 items-center text-xl p-4 hover:text-primary cursor-pointer"
-                }
-              >
-                <FaRocket />
-                <Link href={"/trending"}>Trending</Link>
-              </li>
-            </ul>
-            <Separator className={"bg-secondary"} />
-
-            <div className={"py-2 place-self-center"}>
-              <Button className={"bg-primary"} variant={"ghost"}>
-                <FaPlus className={"mr-2"} /> Create post
-              </Button>
-            </div>
-            <Separator className={"bg-[#403A3A]"} />
-
-            <div className={"w-full py-4"}>
-          <Collapsible defaultOpen={true} className={""}>
-            <CollapsibleTrigger className={`cursor-pointer`} asChild>
-              <div className={"flex justify-between"}>
-                <p className={"text-muted-foreground"}>Forums</p>
-                <FaArrowDown className={""} />
-              </div>
-            </CollapsibleTrigger>
-            <CollapsibleContent className={"py-2"}>
-              <div className="flex flex-col gap-4 py-4">
-                {data &&
-                  data.map((forum) => (
-                    <div key={forum.id} className="flex gap-2 items-center">
-                      <Image
-                        src={
-                          forum.logo ??
-                          "https://placehold.co/150/EEE/31343C?font=montserrat&text=No+image"
-                        }
-                        alt={forum.name}
-                        width={32}
-                        height={32}
-                        className="rounded-full w-[32px] h-[32px]"
-                      />
-                      <div className="w-[80%]">
-                        <Link
-                          href={`/forum/${forum.slug}`}
-                          className={
-                            "text-muted-foreground text-sm hover:text-primary hover:underline font-bold"
-                          }
-                        >
-                          <p className="truncate">{forum.name}</p>
-                        </Link>
-                        <p className={"text-muted-foreground text-xs"}>
-                          {forum.postsCount} posts
-                        </p>
-                      </div>
-                    </div>
-                  ))}
-              </div>
-            </CollapsibleContent>
-          </Collapsible>
-        </div>
-          </div>
-        </SheetContent>
-      </Sheet>
+      <MobileSidebar open={open} handleShow={handleShow} user={user} data={data} />
     </nav>
   );
 }
diff --git a/client/src/components/core/mobile-sidebar.tsx b/client/src/components/core/mobile-sidebar.tsx
new file mode 100644
index 0000000..c966694
--- /dev/null
+++ b/client/src/components/core/mobile-sidebar.tsx
@@ -0,0 +1,116 @@
+
+import { FaHome, FaRocket, FaPlus, FaArrowDown } from 'react-icons/fa';
+import { Sheet, SheetContent } from "~/components/ui/sheet";
+import Link from 'next/link';
+import Image from 'next/image';
+import { UserButton } from "@clerk/nextjs";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "~/components/ui/collapsible";
+import { Separator } from "~/components/ui/separator";
+import { Button } from "~/components/ui/button";
+
+interface Forum {
+  id: string;
+  logo?: string;
+  name: string;
+  slug: string;
+  postsCount: number;
+}
+
+const MobileSidebar = ({ open, handleShow, user, data }: { open: boolean, handleShow: () => void, user: any, data?: Forum[] }) => {
+  return (
+<Sheet open={open} onOpenChange={handleShow}>
+        <SheetContent
+          className={"w-[250px] bg-zinc-950 border-0 overflow-y-scroll"}
+        >
+          <div className={"flex gap-4 py-8 items-center"}>
+            {/* <Image className={'rounded-full'} src={'https://ui-avatars.com/api/?name=jd&background=facc15'}
+                               alt={'avatar'} width={48} height={48}/> */}
+            <UserButton />
+            <div className={"flex flex-col justify-center"}>
+              <p>{user?.username}</p>
+              <p className={"text-sm text-center"}>Post: 100</p>
+            </div>
+          </div>
+          <div className={"flex flex-col items-end w-full py-8"}>
+            <ul className={"flex flex-col gap-1 w-full"}>
+              <li
+                className={
+                  "flex gap-2 items-center text-xl p-4 rounded-lg hover:text-primary cursor-pointer"
+                }
+              >
+                <FaHome />
+                <Link className={""} href={"/"} onClick={handleShow}>
+                  Home
+                </Link>
+              </li>
+              <li
+                className={
+                  "flex gap-2 items-center text-xl p-4 hover:text-primary cursor-pointer"
+                }
+              >
+                <FaRocket />
+                <Link href={"/trending"}>Trending</Link>
+              </li>
+            </ul>
+            <Separator className={"bg-secondary"} />
+
+            <div className={"py-2 place-self-center"}>
+              <Button className={"bg-primary"} variant={"ghost"}>
+                <FaPlus className={"mr-2"} /> Create post
+              </Button>
+            </div>
+            <Separator className={"bg-[#403A3A]"} />
+
+            <div className={"w-full py-4"}>
+              <Collapsible defaultOpen={true} className={""}>
+                <CollapsibleTrigger className={`cursor-pointer`} asChild>
+                  <div className={"flex justify-between"}>
+                    <p className={"text-muted-foreground"}>Forums</p>
+                    <FaArrowDown className={""} />
+                  </div>
+                </CollapsibleTrigger>
+                <CollapsibleContent className={"py-2"}>
+                  <div className="flex flex-col gap-4 py-4">
+                    {data &&
+                      data.map((forum) => (
+                        <div key={forum.id} className="flex gap-2 items-center">
+                          <Image
+                            src={
+                              forum.logo ??
+                              "https://placehold.co/150/EEE/31343C?font=montserrat&text=No+image"
+                            }
+                            alt={forum.name}
+                            width={32}
+                            height={32}
+                            className="rounded-full w-[32px] h-[32px]"
+                          />
+                          <div className="w-[80%]">
+                            <Link
+                              href={`/forum/${forum.slug}`}
+                              className={
+                                "text-muted-foreground text-sm hover:text-primary hover:underline font-bold"
+                              }
+                            >
+                              <p className="truncate">{forum.name}</p>
+                            </Link>
+                            <p className={"text-muted-foreground text-xs"}>
+                              {forum.postsCount} posts
+                            </p>
+                          </div>
+                        </div>
+                      ))}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+  );
+};
+
+export default MobileSidebar;
diff --git a/client/src/components/posts/HighlightedPost.tsx b/client/src/components/posts/HighlightedPost.tsx
new file mode 100644
index 0000000..2ff2f69
--- /dev/null
+++ b/client/src/components/posts/HighlightedPost.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import Post from "~/components/posts/post";
+import Highlighter from "react-highlight-words";
+
+function HighlightedPost({ post, query }: { post: any, query: string }) {
+  const highlightedPost = {
+    ...post,
+    title: <Highlighter
+      highlightClassName="YourHighlightClass"
+      searchWords={[query]}
+      autoEscape={true}
+      textToHighlight={post.title}
+    />,
+    content: <Highlighter
+      highlightClassName="YourHighlightClass"
+      searchWords={[query]}
+      autoEscape={true}
+      textToHighlight={post.content}
+    />
+  };
+
+  return <Post post={highlightedPost} />;
+};
+
+export default HighlightedPost;
diff --git a/client/src/components/search/search.tsx b/client/src/components/search/search.tsx
new file mode 100644
index 0000000..19cad3c
--- /dev/null
+++ b/client/src/components/search/search.tsx
@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { FaSearch } from 'react-icons/fa';
+import { Input } from "~/components/ui/input";
+import { useRouter } from 'next/navigation';
+import useSWR from 'swr';
+import { useFetcher } from "~/hooks/fetcher";
+import Link from 'next/link';
+
+const SearchBox = () => {
+  const [searchValue, setSearchValue] = useState<string>("");
+  const router = useRouter();
+  const { searchPosts } = useFetcher();
+  const { data: results } = useSWR(searchValue ? `searchPosts/${encodeURIComponent(searchValue)}` : null, searchPosts);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.target.value);
+  };
+
+  const handleSearch: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+    if (event.key === "Enter") {
+      router.push(`/search/${encodeURIComponent(searchValue)}`);
+      setSearchValue("");
+    }
+  };
+
+  const handleLinkClick = () => {
+    setSearchValue("");
+  };
+
+  return (
+    <div className={"relative block md:min-w-[600px] dark:bg-secondary bg-white"}>
+      <label>
+        <span className={"sr-only"}>Search</span>
+        <span className="absolute inset-y-0 left-2 flex items-center pl-2">
+          <FaSearch />
+        </span>
+        <Input
+          className={
+            "place-self-center border-[#a37f2a] dark:bg-[#2E2B24] text-[#CBD5E1] focus-visible:ring-offset-0 ring-offset-0 rounded-[20px] px-12 placeholder:italic"
+          }
+          placeholder={"Search posts"}
+          onChange={handleChange}
+          onKeyUp={handleSearch}
+          value={searchValue}
+        />
+      </label>
+      {results && (
+        <div className="absolute z-10 dark:bg-secondary dark:text-[#d8dce0] bg-white w-full rounded-md shadow-lg max-h-60 overflow-auto">
+          {results.map((post: any) => (
+            <Link
+              key={post.id}
+              href={`/post/${post.id}`}
+              className="block px-4 py-2 dark:text-[#d8dce0] hover:bg-yellow-500 dark:hover:text-gray-900"
+              onClick={handleLinkClick}
+            >
+              {post.title}
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SearchBox;
diff --git a/client/src/hooks/fetcher.tsx b/client/src/hooks/fetcher.tsx
index da070e2..2664eaa 100644
--- a/client/src/hooks/fetcher.tsx
+++ b/client/src/hooks/fetcher.tsx
@@ -107,15 +107,26 @@ export const useFetcher = (filter = 'hot') => {
 
     const getUser = async () => {
         try {
-          const response = await axios.get('/users/me', {
-            withCredentials: true
-          });
-          return response.data;
+            const response = await axios.get('/users/me', {
+                withCredentials: true
+            });
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
+    const searchPosts = async (key: string): Promise<Post[]> => {
+        const query = key.replace('searchPosts/', '');
+        try {
+            const response = await axios.get(`/posts/filtered-posts/${query}`);
+            return response.data;
         } catch (error) {
-          // @ts-ignore
-          throw new Error(error);
+            // @ts-ignore
+            throw new Error(error);
         }
-      }
+    }
 
     return {
         allPosts,
@@ -127,5 +138,6 @@ export const useFetcher = (filter = 'hot') => {
         postComment,
         getComments,
         getUser,
+        searchPosts,
     }
 }

From 66c28e33c945927f7fc2f91bfed47e12302d3316 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 10:38:31 +0000
Subject: [PATCH 16/24] feat: enable post search on server side

Uncommented code for full-text and filtered search in post controller.
Made a minor change in post service to not fetch comments when fetching posts.
---
 server/src/modules/post/post.controller.ts | 46 +++++++++++-----------
 server/src/modules/post/post.service.ts    |  3 +-
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/server/src/modules/post/post.controller.ts b/server/src/modules/post/post.controller.ts
index 30ae2f3..3f12697 100644
--- a/server/src/modules/post/post.controller.ts
+++ b/server/src/modules/post/post.controller.ts
@@ -168,30 +168,30 @@ export class PostController {
   //   });
   // }
 
-  // @Get('full-text-search/:searchString')
-  // async getFullTextSearchPosts(
-  //   @Param('searchString') searchString: string,
-  // ): Promise<PostModel[]> {
-  //   return this.postService.searchPosts(searchString);
-  // }
+  @Get('full-text-search/:searchString')
+  async getFullTextSearchPosts(
+    @Param('searchString') searchString: string,
+  ): Promise<PostModel[]> {
+    return this.postService.searchPosts(searchString);
+  }
 
-  // @Get('filtered-posts/:searchString')
-  // async getFilteredSearchPosts(
-  //   @Param('searchString') searchString: string,
-  // ): Promise<PostModel[]> {
-  //   return this.postService.findAll({
-  //     where: {
-  //       OR: [
-  //         {
-  //           title: { contains: searchString, mode: 'insensitive' },
-  //         },
-  //         {
-  //           content: { contains: searchString, mode: 'insensitive' },
-  //         },
-  //       ],
-  //     },
-  //   });
-  // }
+  @Get('filtered-posts/:searchString')
+  async getFilteredSearchPosts(
+    @Param('searchString') searchString: string,
+  ): Promise<PostModel[]> {
+    return this.postService.findAll({
+      where: {
+        OR: [
+          {
+            title: { contains: searchString, mode: 'insensitive' },
+          },
+          {
+            content: { contains: searchString, mode: 'insensitive' },
+          },
+        ],
+      },
+    });
+  }
 
   // @Post('post')
   // @ApiBody({ type: CreatePostDTO })
diff --git a/server/src/modules/post/post.service.ts b/server/src/modules/post/post.service.ts
index 3017d5d..69f8f81 100644
--- a/server/src/modules/post/post.service.ts
+++ b/server/src/modules/post/post.service.ts
@@ -6,6 +6,7 @@ import { Post as PostModel } from '@prisma/client';
 import { Comment as CommentModel } from '@prisma/client';
 import { CreatePostDTO } from './post.dto';
 import slugify from 'slugify';
+//import { fa } from '@faker-js/faker';
 
 @Injectable()
 export class PostService {
@@ -181,7 +182,7 @@ export class PostService {
             slug: true,
           },
         },
-        comments: true,
+        comments: false,
       },
     });
 

From 7a33de374a8ccefa6a068e24b22241d6417feed2 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Thu, 4 Apr 2024 10:39:29 +0000
Subject: [PATCH 17/24] feat: remove HighlightedPost component

Deleted the HighlightedPost component as it is no longer needed.
---
 .../src/components/posts/HighlightedPost.tsx  | 25 -------------------
 1 file changed, 25 deletions(-)
 delete mode 100644 client/src/components/posts/HighlightedPost.tsx

diff --git a/client/src/components/posts/HighlightedPost.tsx b/client/src/components/posts/HighlightedPost.tsx
deleted file mode 100644
index 2ff2f69..0000000
--- a/client/src/components/posts/HighlightedPost.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import Post from "~/components/posts/post";
-import Highlighter from "react-highlight-words";
-
-function HighlightedPost({ post, query }: { post: any, query: string }) {
-  const highlightedPost = {
-    ...post,
-    title: <Highlighter
-      highlightClassName="YourHighlightClass"
-      searchWords={[query]}
-      autoEscape={true}
-      textToHighlight={post.title}
-    />,
-    content: <Highlighter
-      highlightClassName="YourHighlightClass"
-      searchWords={[query]}
-      autoEscape={true}
-      textToHighlight={post.content}
-    />
-  };
-
-  return <Post post={highlightedPost} />;
-};
-
-export default HighlightedPost;

From 9d4ab2f4afcff5a283f4db51cee0f815f151ed71 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Fri, 5 Apr 2024 01:12:15 +0000
Subject: [PATCH 18/24] fix(fetcher): add getUser and getMe functions

added getUser and getMe functions to useFetcher hook in fetcher.tsx. getUser was
previously named getMe but changed for consistency. this change allows fetching
user data and current user data respectively.
---
 client/src/hooks/fetcher.tsx | 165 ++++++++++++++++++++++++++++++++++-
 1 file changed, 163 insertions(+), 2 deletions(-)

diff --git a/client/src/hooks/fetcher.tsx b/client/src/hooks/fetcher.tsx
index 2664eaa..3521600 100644
--- a/client/src/hooks/fetcher.tsx
+++ b/client/src/hooks/fetcher.tsx
@@ -105,7 +105,7 @@ export const useFetcher = (filter = 'hot') => {
         }
     }
 
-    const getUser = async () => {
+    const getMe = async () => {
         try {
             const response = await axios.get('/users/me', {
                 withCredentials: true
@@ -128,6 +128,135 @@ export const useFetcher = (filter = 'hot') => {
         }
     }
 
+    const getUser = async (username: string) => {
+        const query = username.replace('getUser/', '');
+        try {
+            const response = await axios.get(`/users/${query}`, {
+                withCredentials: true
+            });
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
+    const getUserFollowers = async (username: string) => {
+        const query = username.replace('getUserFollowers/', '');
+        try {
+            const response = await axios.get(`/users/${query}/followers`, {
+                withCredentials: true
+            });
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
+    const getUserFollowing = async (username: string) => {
+        const query = username.replace('getUserFollowing/', '');
+        try {
+            const response = await axios.get(`/users/${query}/followings`, {
+                withCredentials: true
+            });
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
+    const getUserOwnedForum = async (username: string) => {
+        const query = username.replace('getUserOwnedForum/', '');
+        try {
+            const response = await axios.get(`/users/${query}/owned-forums`, {
+                withCredentials: true
+            });
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
+    const getUserModeration = async (username: string) => {
+        const query = username.replace('getUserModeration/', '');
+        try {
+            const response = await axios.get(`/users/${query}/moderator-forums`, {
+                withCredentials: true
+            });
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
+    const getUserPosts = async (username: string) => {
+        const query = username.replace('getUserPosts/', '');
+        try {
+            const response = await axios.get(`/users/${query}/posts`, {
+                withCredentials: true
+            });
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
+    const getUserComments = async (username: string) => {
+        const query = username.replace('getUserComments/', '');
+        try {
+            const response = await axios.get(`/users/${query}/comments`, {
+                withCredentials: true
+            });
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
+    const getUserPostVotes = async (username: string) => {
+        const query = username.replace('getUserPostVotes/', '');
+        try {
+            const response = await axios.get(`/users/${query}/posts-vote`, {
+                withCredentials: true
+            });
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+    const getUserCommentVotes = async (username: string) => {
+        const query = username.replace('getUserCommentVotes/', '');
+        try {
+            const response = await axios.get(`/users/${query}/comments-vote`, {
+                withCredentials: true
+            });
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
+    const getUserSubscriptions = async (username: string) => {
+        const query = username.replace('getUserSubscriptions/', '');
+        try {
+            const response = await axios.get(`/users/${query}/subs`, {
+                withCredentials: true
+            });
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
     return {
         allPosts,
         allForums,
@@ -137,7 +266,39 @@ export const useFetcher = (filter = 'hot') => {
         getPost,
         postComment,
         getComments,
-        getUser,
+        getMe,
         searchPosts,
+        getUser,
+        getUserFollowers,
+        getUserFollowing,
+        getUserOwnedForum,
+        getUserModeration,
+        getUserPosts,
+        getUserComments,
+        getUserPostVotes,
+        getUserCommentVotes,
+        getUserSubscriptions,
+
     }
 }
+/*
+
+getUserFollowers, /api/v1/users/:idOrUsername/followers
+
+getUserFollowing, /api/v1/users/:idOrUsername/followings
+
+getUserOwnedForum /api/v1/users/:idOrUsername/owned-forums
+
+getUserModeration /api/v1/users/:idOrUsername/moderator-forums
+
+getUserPosts, /api/v1/users/:idOrUsername/posts
+
+getUserComments, /api/v1/users/:idOrUsername/comments
+
+getUserPostVotes, /api/v1/users/:idOrUsername/posts-vote
+
+getUserCommentVote /api/v1/users/:idOrUsername/comments-vote
+
+getUserSubscriptions, /api/v1/users/:idOrUsername/subs
+
+*/

From 730e2d0f70a7a404684fe8bc4d22b1b18a40cdb2 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Fri, 5 Apr 2024 01:12:38 +0000
Subject: [PATCH 19/24] style(search): add styling changes to SearchBox
 component

applied styling changes to SearchBox component in search.tsx. added rounded
corners to enhance visual appearance.
---
 client/src/components/search/search.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/search/search.tsx b/client/src/components/search/search.tsx
index 19cad3c..328a2d9 100644
--- a/client/src/components/search/search.tsx
+++ b/client/src/components/search/search.tsx
@@ -28,7 +28,7 @@ const SearchBox = () => {
   };
 
   return (
-    <div className={"relative block md:min-w-[600px] dark:bg-secondary bg-white"}>
+    <div className={"relative block md:min-w-[600px] dark:bg-secondary bg-white rounded-[20px]"}>
       <label>
         <span className={"sr-only"}>Search</span>
         <span className="absolute inset-y-0 left-2 flex items-center pl-2">

From 75b8d77c10e9f7bc5dd8e13acfb2d07ede77b764 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Fri, 5 Apr 2024 01:12:58 +0000
Subject: [PATCH 20/24] feat(user): implement user-related functions in
 UserController and UserService

implemented getUser, getUserFollowers, getUserFollowing, getUserOwnedForum,
getUserModeration, getUserPosts, getUserComments, getUserPostVotes,
getUserCommentVotes, and getUserSubscriptions functions in UserController and
UserService. these functions fetch user information, user followers, user
followings, forums owned by the user, forums where the user is a moderator,
posts authored by the user, comments made by the user, votes on posts by the
user, votes on comments by the user, and user subscriptions respectively.
---
 server/src/modules/user/user.controller.ts |  43 ++++++++
 server/src/modules/user/user.service.ts    | 112 ++++++++++++++++++++-
 2 files changed, 154 insertions(+), 1 deletion(-)

diff --git a/server/src/modules/user/user.controller.ts b/server/src/modules/user/user.controller.ts
index b0915b0..dde46bd 100644
--- a/server/src/modules/user/user.controller.ts
+++ b/server/src/modules/user/user.controller.ts
@@ -95,6 +95,49 @@ export class UserController {
     return this.forumService.getModeratorForumsByUserIdOrUsername(idOrUsername);
   }
 
+  @Get(':idOrUsername/posts')
+  @ApiOperation({ summary: 'Get posts by a specific user by ID or username' })
+  @ApiParam({ name: 'idOrUsername', description: 'User ID or username' })
+  getUserPosts(@Param('idOrUsername') idOrUsername: string) {
+    return this.userService.getUserPosts(idOrUsername);
+  }
+
+  @Get(':idOrUsername/comments')
+  @ApiOperation({
+    summary: 'Get comments by a specific user by ID or username',
+  })
+  @ApiParam({ name: 'idOrUsername', description: 'User ID or username' })
+  getUserComments(@Param('idOrUsername') idOrUsername: string) {
+    return this.userService.getUserComments(idOrUsername);
+  }
+
+  @Get(':idOrUsername/posts-vote')
+  @ApiOperation({
+    summary: 'Get post votes by a specific user by ID or username',
+  })
+  @ApiParam({ name: 'idOrUsername', description: 'User ID or username' })
+  getUserPostVotes(@Param('idOrUsername') idOrUsername: string) {
+    return this.userService.getUserPostVotes(idOrUsername);
+  }
+
+  @Get(':idOrUsername/comments-vote')
+  @ApiOperation({
+    summary: 'Get comment votes by a specific user by ID or username',
+  })
+  @ApiParam({ name: 'idOrUsername', description: 'User ID or username' })
+  getUserCommentVotes(@Param('idOrUsername') idOrUsername: string) {
+    return this.userService.getUserCommentVotes(idOrUsername);
+  }
+
+  @Get(':idOrUsername/subs')
+  @ApiOperation({
+    summary: 'Get subscriptions by a specific user by ID or username',
+  })
+  @ApiParam({ name: 'idOrUsername', description: 'User ID or username' })
+  getUserSubscriptions(@Param('idOrUsername') idOrUsername: string) {
+    return this.userService.getUserSubscriptions(idOrUsername);
+  }
+
   // @Post('user')
   // async signupUser(
   //   @Body() userData: { username: string; email: string; password: string },
diff --git a/server/src/modules/user/user.service.ts b/server/src/modules/user/user.service.ts
index baf4a70..8ee892d 100644
--- a/server/src/modules/user/user.service.ts
+++ b/server/src/modules/user/user.service.ts
@@ -1,4 +1,12 @@
-import { Prisma, User } from '@prisma/client';
+import {
+  //PostVotes,
+  Prisma,
+  User,
+  //ForumSubscription,
+  //CommentVotes,
+  Post,
+  Comment,
+} from '@prisma/client';
 import { Injectable, NotFoundException } from '@nestjs/common';
 
 import { PrismaService } from '../prisma/prisma.service';
@@ -84,4 +92,106 @@ export class UserService {
       where,
     });
   }
+
+  async getUserPosts(idOrUsername: string): Promise<Post[]> {
+    const user = await this.getUserByIdOrUsername(idOrUsername);
+    return this.prisma.post.findMany({
+      where: {
+        userId: user.id,
+      },
+    });
+  }
+
+  async getUserComments(idOrUsername: string): Promise<Comment[]> {
+    const user = await this.getUserByIdOrUsername(idOrUsername);
+    return this.prisma.comment.findMany({
+      where: {
+        userId: user.id,
+      },
+    });
+  }
+
+  async getUserPostVotes(idOrUsername: string): Promise<any[]> {
+    const user = await this.getUserByIdOrUsername(idOrUsername);
+    const postVotes = await this.prisma.postVotes.findMany({
+      where: {
+        userId: user.id,
+        voteStatus: {
+          in: [1, -1],
+        },
+      },
+      include: {
+        post: true,
+      },
+    });
+
+    return postVotes.map((postVote) => ({
+      ...postVote,
+      title: postVote.post.title,
+      content: postVote.post.content,
+      userId: postVote.post.userId,
+      forumId: postVote.post.forumId,
+      isPinned: postVote.post.isPinned,
+      isVisible: postVote.post.isVisible,
+      slug: postVote.post.slug,
+      updatedAt: postVote.post.updatedAt,
+      votesCount: postVote.post.votesCount,
+      upvotesCount: postVote.post.upvotesCount,
+      downvotesCount: postVote.post.downvotesCount,
+      post: undefined,
+    }));
+  }
+
+  async getUserCommentVotes(idOrUsername: string): Promise<any[]> {
+    const user = await this.getUserByIdOrUsername(idOrUsername);
+    const commentVotes = await this.prisma.commentVotes.findMany({
+      where: {
+        userId: user.id,
+      },
+      include: {
+        comment: true,
+      },
+    });
+
+    return commentVotes.map((commentVote) => ({
+      ...commentVote,
+      content: commentVote.comment.content,
+      userId: commentVote.comment.userId,
+      postId: commentVote.comment.postId,
+      isVisible: commentVote.comment.isVisible,
+      parentId: commentVote.comment.parentId,
+      updatedAt: commentVote.comment.updatedAt,
+      downvotesCount: commentVote.comment.downvotesCount,
+      upvotesCount: commentVote.comment.upvotesCount,
+      comment: undefined,
+    }));
+  }
+
+  async getUserSubscriptions(idOrUsername: string): Promise<any[]> {
+    const user = await this.getUserByIdOrUsername(idOrUsername);
+    const subscriptions = await this.prisma.forumSubscription.findMany({
+      where: {
+        userId: user.id,
+      },
+      include: {
+        forum: true,
+      },
+    });
+
+    return subscriptions.map((subscription) => ({
+      ...subscription,
+      name: subscription.forum.name,
+      slug: subscription.forum.slug,
+      description: subscription.forum.description,
+      ownerUserId: subscription.forum.ownerUserId,
+      logo: subscription.forum.logo,
+      banner: subscription.forum.banner,
+      updatedAt: subscription.forum.updatedAt,
+      postsCount: subscription.forum.postsCount,
+      viewsCount: subscription.forum.viewsCount,
+      subscribersCount: subscription.forum.subscribersCount,
+      deletedAt: subscription.forum.deletedAt,
+      forum: undefined,
+    }));
+  }
 }

From cec10412c979fed6b802c88969bcbe0deadb7ff3 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Fri, 5 Apr 2024 01:13:15 +0000
Subject: [PATCH 21/24] feat(forum): implement forum subscription-related
 functions in ForumController and ForumService

implemented getSubscribersForForum, subscribeToForum, and unsubscribeFromForum
functions in ForumController and ForumService. these functions respectively fetch
subscribers for a specific forum, allow users to subscribe to a forum, and allow
users to unsubscribe from a forum.
---
 server/src/modules/forum/forum.controller.ts | 61 +++++++++++--
 server/src/modules/forum/forum.service.ts    | 91 ++++++++++++++++++--
 2 files changed, 141 insertions(+), 11 deletions(-)

diff --git a/server/src/modules/forum/forum.controller.ts b/server/src/modules/forum/forum.controller.ts
index ac73ddc..f17441c 100644
--- a/server/src/modules/forum/forum.controller.ts
+++ b/server/src/modules/forum/forum.controller.ts
@@ -1,4 +1,13 @@
-import { Controller, Get, Post, Param, Query, Body, Put } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Param,
+  Query,
+  Body,
+  Put,
+  Delete,
+} from '@nestjs/common';
 import { ForumService } from './forum.service';
 import {
   ApiTags,
@@ -115,10 +124,52 @@ export class ForumController {
     return this.forumService.getPostsForForumByIdOrSlug(idOrSlug, page, limit);
   }
 
-  @Get(':id/subscribers')
+  @Get(':idOrSlug/subscribers')
   @ApiOperation({ summary: 'Get subscribers for a specific forum' })
-  @ApiParam({ name: 'id', description: 'Forum ID' })
-  getSubscribersForForum(@Param('id') forumId: string) {
-    return this.forumService.getSubscribersForForum(forumId);
+  @ApiParam({ name: 'idOrSlug', description: 'Forum ID or slug' })
+  getSubscribersForForum(@Param('idOrSlug') idOrSlug: string) {
+    return this.forumService.getSubscribersForForumByIdOrSlug(idOrSlug);
+  }
+
+  @ApiCookieAuth()
+  @Post(':idOrSlug/subscribe')
+  @UseGuards(ClerkRequiredGuard)
+  @ApiOperation({ summary: 'Subscribe to a specific forum' })
+  @ApiResponse({
+    status: 200,
+    description: 'Successfully subscribed to the forum.',
+  })
+  @ApiResponse({ status: 500, description: 'Internal server error.' })
+  async subscribeToForum(
+    @Req() request: any,
+    @Param('idOrSlug') idOrSlug: string,
+  ) {
+    const userId = request.user.id;
+    try {
+      return await this.forumService.subscribeToForum(userId, idOrSlug);
+    } catch (error) {
+      throw new HttpException(error.message, HttpStatus.BAD_REQUEST);
+    }
+  }
+
+  @ApiCookieAuth()
+  @Delete(':idOrSlug/subscribe')
+  @UseGuards(ClerkRequiredGuard)
+  @ApiOperation({ summary: 'Unsubscribe from a specific forum' })
+  @ApiResponse({
+    status: 200,
+    description: 'Successfully unsubscribed from the forum.',
+  })
+  @ApiResponse({ status: 500, description: 'Internal server error.' })
+  async unsubscribeFromForum(
+    @Req() request: any,
+    @Param('idOrSlug') idOrSlug: string,
+  ) {
+    const userId = request.user.id;
+    try {
+      return await this.forumService.unsubscribeFromForum(userId, idOrSlug);
+    } catch (error) {
+      throw new HttpException(error.message, HttpStatus.BAD_REQUEST);
+    }
   }
 }
diff --git a/server/src/modules/forum/forum.service.ts b/server/src/modules/forum/forum.service.ts
index 0475a4c..5b6d91a 100644
--- a/server/src/modules/forum/forum.service.ts
+++ b/server/src/modules/forum/forum.service.ts
@@ -220,12 +220,6 @@ export class ForumService {
     return posts;
   }
 
-  getSubscribersForForum(forumId: string) {
-    return this.prisma.forumSubscription.findMany({
-      where: { forumId: forumId },
-    });
-  }
-
   async updateForum(
     idOrSlug: string,
     forumData: CreateForumDTO,
@@ -353,4 +347,89 @@ export class ForumService {
 
     return forumModerators.map((moderator) => moderator.forum);
   }
+
+  async getSubscribersForForumByIdOrSlug(idOrSlug: string) {
+    // Try to get the forum by ID first
+    let forum = await this.prisma.forum.findUnique({ where: { id: idOrSlug } });
+
+    // If no forum is found, try to get it by slug
+    if (!forum) {
+      forum = await this.prisma.forum.findUnique({ where: { slug: idOrSlug } });
+    }
+
+    // If still no forum is found, return an empty array
+    if (!forum) {
+      return [];
+    }
+
+    // If a forum is found, get its subscribers
+    return this.prisma.forumSubscription.findMany({
+      where: { forumId: forum.id },
+    });
+  }
+
+  async subscribeToForum(userId: string, idOrSlug: string) {
+    // Try to get the forum by ID first
+    let forum = await this.prisma.forum.findUnique({ where: { id: idOrSlug } });
+
+    // If no forum is found, try to get it by slug
+    if (!forum) {
+      forum = await this.prisma.forum.findUnique({ where: { slug: idOrSlug } });
+    }
+
+    // If still no forum is found, throw an error
+    if (!forum) {
+      throw new Error('Forum not found.');
+    }
+
+    // Check if the user is already subscribed
+    const existingSubscription = await this.prisma.forumSubscription.findUnique(
+      {
+        where: { userId_forumId: { userId, forumId: forum.id } },
+      },
+    );
+
+    if (existingSubscription) {
+      throw new Error('User is already subscribed to this forum.');
+    }
+
+    // Create a new subscription
+    return this.prisma.forumSubscription.create({
+      data: {
+        user: { connect: { id: userId } },
+        forum: { connect: { id: forum.id } },
+      },
+    });
+  }
+
+  async unsubscribeFromForum(userId: string, idOrSlug: string) {
+    // Try to get the forum by ID first
+    let forum = await this.prisma.forum.findUnique({ where: { id: idOrSlug } });
+
+    // If no forum is found, try to get it by slug
+    if (!forum) {
+      forum = await this.prisma.forum.findUnique({ where: { slug: idOrSlug } });
+    }
+
+    // If still no forum is found, throw an error
+    if (!forum) {
+      throw new Error('Forum not found.');
+    }
+
+    // Check if the user is subscribed
+    const existingSubscription = await this.prisma.forumSubscription.findUnique(
+      {
+        where: { userId_forumId: { userId, forumId: forum.id } },
+      },
+    );
+
+    if (!existingSubscription) {
+      throw new Error('User is not subscribed to this forum.');
+    }
+
+    // Delete the subscription
+    return this.prisma.forumSubscription.delete({
+      where: { userId_forumId: { userId, forumId: forum.id } },
+    });
+  }
 }

From 217f835ee1ee8c361b87957245ae7648eede9257 Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Fri, 5 Apr 2024 01:14:26 +0000
Subject: [PATCH 22/24] feat(vote): implement votePost function in
 VoteController and VoteService

implemented votePost function in VoteController and VoteService to handle voting
on posts. this function allows users to vote on posts.
---
 server/src/modules/vote/vote.controller.ts | 2 ++
 server/src/modules/vote/vote.service.ts    | 7 +++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/server/src/modules/vote/vote.controller.ts b/server/src/modules/vote/vote.controller.ts
index 984e569..3ba330c 100644
--- a/server/src/modules/vote/vote.controller.ts
+++ b/server/src/modules/vote/vote.controller.ts
@@ -30,6 +30,8 @@ export class VoteController {
     @Body() voteDto: VoteDto,
   ) {
     console.log('userId', request.user.id);
+    console.log('postId', postId);
+    console.log('voteDto', voteDto);
     const userId = request.user.id;
     try {
       return await this.voteService.votePost(
diff --git a/server/src/modules/vote/vote.service.ts b/server/src/modules/vote/vote.service.ts
index 581de2a..77e0029 100644
--- a/server/src/modules/vote/vote.service.ts
+++ b/server/src/modules/vote/vote.service.ts
@@ -6,6 +6,9 @@ export class VoteService {
   constructor(private prisma: PrismaService) {}
 
   async votePost(userId: string, postId: string, voteStatus: number) {
+    console.log('userId', userId);
+    console.log('postId', postId);
+    console.log('voteStatus', voteStatus);
     const previousVote = await this.prisma.postVotes.findUnique({
       where: {
         userId_postId: {
@@ -14,7 +17,7 @@ export class VoteService {
         },
       },
     });
-    if (voteStatus === previousVote.voteStatus) {
+    if (previousVote && voteStatus === previousVote.voteStatus) {
       throw new Error(
         'New vote status is the same as the current vote status.',
       );
@@ -67,7 +70,7 @@ export class VoteService {
         },
       },
     });
-    if (voteStatus === previousVote.voteStatus) {
+    if (previousVote && voteStatus === previousVote.voteStatus) {
       throw new Error(
         'New vote status is the same as the current vote status.',
       );

From 393cec1cc6366ec9b2769c1ea65ff975b908745f Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Fri, 5 Apr 2024 01:16:23 +0000
Subject: [PATCH 23/24] fix(commentInput): fix typo in useFetcher function name

changed 'getUser' function to 'getMe' in the CommentInput component to fix a
typo in the useFetcher function name, ensuring consistency.
---
 client/src/components/comment/commentInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/comment/commentInput.tsx b/client/src/components/comment/commentInput.tsx
index 7addbfd..24f5537 100644
--- a/client/src/components/comment/commentInput.tsx
+++ b/client/src/components/comment/commentInput.tsx
@@ -13,11 +13,11 @@ interface User {
 const CommentInput: React.FC<CommentInputProps> = ({ postId }) => {
     const [content, setContent] = useState('');
     const [user, setUser] = useState<User | null>(null);
-    const { postComment, getUser } = useFetcher();
+    const { postComment, getMe } = useFetcher();
 
     useEffect(() => {
         const fetchUser = async () => {
-            const userData = await getUser();
+            const userData = await getMe();
             setUser(userData);
         };
 

From e28821b698e3efe6745a1cabe7655557d03f63db Mon Sep 17 00:00:00 2001
From: Mounssif BOUHLAOUI <cv.bouhlaoui@gmail.com>
Date: Fri, 5 Apr 2024 01:16:47 +0000
Subject: [PATCH 24/24] feat(profile): add new directory for user profile

created a new directory for user profile pages to organize and manage user-
related functionalities separately.
---
 client/src/app/[username]/page.tsx | 208 +++++++++++++++++++++++++++++
 1 file changed, 208 insertions(+)
 create mode 100644 client/src/app/[username]/page.tsx

diff --git a/client/src/app/[username]/page.tsx b/client/src/app/[username]/page.tsx
new file mode 100644
index 0000000..0788890
--- /dev/null
+++ b/client/src/app/[username]/page.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import { useFetcher } from "~/hooks/fetcher";
+import React from "react";
+import { useState } from 'react';
+import useSWR from 'swr';
+import Link from 'next/link';
+
+function UserProfile({ params }: { params: { username: string } }) {
+    const { getUser, getUserPosts, getUserComments, getUserFollowers, getUserFollowing, getUserSubscriptions, getUserPostVotes, getUserCommentVotes } = useFetcher();
+    const { data: userProfile, error } = useSWR(`getUser/${params.username}`, getUser);
+
+    const [selectedTab, setSelectedTab] = useState('posts');
+    const endpoint = selectedTab === 'posts' ? `getUserPosts/${params.username}` :
+        selectedTab === 'comments' ? `getUserComments/${params.username}` :
+            selectedTab === 'followers' ? `getUserFollowers/${params.username}` :
+                selectedTab === 'following' ? `getUserFollowing/${params.username}` :
+                    selectedTab === 'subscriptions' ? `getUserSubscriptions/${params.username}` :
+                        selectedTab === 'postVotes' ? `getUserPostVotes/${params.username}` :
+                            `getUserCommentVotes/${params.username}`;
+
+    const fetcher = selectedTab === 'posts' ? getUserPosts :
+        selectedTab === 'comments' ? getUserComments :
+            selectedTab === 'followers' ? getUserFollowers :
+                selectedTab === 'following' ? getUserFollowing :
+                    selectedTab === 'subscriptions' ? getUserSubscriptions :
+                        selectedTab === 'postVotes' ? getUserPostVotes :
+                            getUserCommentVotes;
+
+    const { data: tabData } = useSWR(endpoint, fetcher);
+    const dataToDisplay = selectedTab === 'followers' ? tabData?.followers :
+        selectedTab === 'following' ? tabData?.followings :
+            tabData;
+    console.log(endpoint, dataToDisplay);
+    if (error) return <div>Error: {error.message}</div>
+    if (!userProfile) return <div>Loading...</div>
+
+    return (
+        <div className="flex flex-col justify-between w-full max-w-6xl mx-auto">
+            <div className="flex flex-col md:flex-row lg:flex-row justify-between w-full">
+                <div className="w-full md:w-1/3 p-4">
+                    <div className="dark:bg-secondary dark:text-[#d8dce0] bg-white rounded-lg shadow-md p-6">
+                        <img className="w-24 h-24 -mt-12 border-4 border-white rounded-full mx-auto shadow-lg" src={userProfile.avatarUrl} alt={userProfile.username} />
+                        <h1 className="mb-2 text-xl font-bold">{userProfile.username}</h1>
+                        <p className="mb-2 text-sm text-gray-500 dark:text-[#d8dce0]">{userProfile.email}</p>
+                        <p className="mb-2 text-sm dark:text-[#d8dce0]">{userProfile.aboutMe}</p>
+                        <h2 className="text-lg font-semibold">Social Media</h2>
+                        <div className="flex space-x-2 mt-2">
+                            <a href={userProfile.github} target="_blank" rel="noopener noreferrer">GitHub</a>
+                            <a href={userProfile.twitter} target="_blank" rel="noopener noreferrer">Twitter</a>
+                            <a href={userProfile.linkedin} target="_blank" rel="noopener noreferrer">LinkedIn</a>
+                        </div>
+                    </div>
+                </div>
+                <div className="w-full md:w-1/3 p-4">
+                    <div className="dark:bg-secondary dark:text-[#d8dce0] bg-white rounded-lg shadow-md p-6">
+                        <h2 className="text-lg font-semibold">Stats</h2>
+                        <div className="flex flex-wrap flex-col md:flex-row lg:flex-row justify-between mt-2">
+                            <div className="text-center mx-2">Reputation: {userProfile.reputation}</div>
+                            <div className="text-center mx-2">Posts: {userProfile.PostCount}</div>
+                            <div className="text-center mx-2">Comments: {userProfile.CommentCount}</div>
+                            <div className="text-center mx-2">Followers: {userProfile.followersCount}</div>
+                            <div className="text-center mx-2">Following: {userProfile.followingCount}</div>
+                        </div>
+                    </div>
+                </div>
+                <div className="w-full md:w-1/3 p-4">
+                    <div className="dark:bg-secondary dark:text-[#d8dce0] bg-white rounded-lg shadow-md p-6">
+                        <h2 className="text-lg font-semibold">Basic Information</h2>
+                        <div className="mt-2">
+                            <div>Last Login: {new Date(userProfile.lastLogin).toLocaleString() || 'Not available'}</div>
+                            <div>Country: {userProfile.country || 'Not available'}</div>
+                            <div>City: {userProfile.city || 'Not available'}</div>
+                            <div>Phone: {userProfile.phone || 'Not available'}</div>
+                            <div>Website: {userProfile.website || 'Not available'}</div>
+                            <div>Join Time: {new Date(userProfile.createdAt).toLocaleString() || 'Not available'}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="w-full p-4">
+                <div className="dark:bg-secondary dark:text-[#d8dce0] bg-white rounded-lg shadow-md p-6">
+                    <div className="flex justify-between">
+                        <button
+                            className={`p-2 ${selectedTab === 'posts' ? 'text-orange-500' : 'text-gray-500'}`}
+                            onClick={() => setSelectedTab('posts')}
+                        >
+                            Posts
+                        </button>
+                        <button
+                            className={`p-2 ${selectedTab === 'comments' ? 'text-orange-500' : 'text-gray-500'}`}
+                            onClick={() => setSelectedTab('comments')}
+                        >
+                            Comments
+                        </button>
+                        <button
+                            className={`p-2 ${selectedTab === 'followers' ? 'text-orange-500' : 'text-gray-500'}`}
+                            onClick={() => setSelectedTab('followers')}
+                        >
+                            Followers
+                        </button>
+                        <button
+                            className={`p-2 ${selectedTab === 'following' ? 'text-orange-500' : 'text-gray-500'}`}
+                            onClick={() => setSelectedTab('following')}
+                        >
+                            Following
+                        </button>
+                        <button
+                            className={`p-2 ${selectedTab === 'subscriptions' ? 'text-orange-500' : 'text-gray-500'}`}
+                            onClick={() => setSelectedTab('subscriptions')}
+                        >
+                            Subscriptions
+                        </button>
+                        <button
+                            className={`p-2 ${selectedTab === 'postVotes' ? 'text-orange-500' : 'text-gray-500'}`}
+                            onClick={() => setSelectedTab('postVotes')}
+                        >
+                            Post Votes
+                        </button>
+                        <button
+                            className={`p-2 ${selectedTab === 'commentVotes' ? 'text-orange-500' : 'text-gray-500'}`}
+                            onClick={() => setSelectedTab('commentVotes')}
+                        >
+                            Comment Votes
+                        </button>
+                    </div>
+                    <div className="mt-4">
+                        {dataToDisplay ? (
+                            dataToDisplay.length > 0 ? (
+                                dataToDisplay.map(item => {
+                                    switch (selectedTab) {
+                                        case 'posts':
+                                            return (
+                                                <Link href={`/post/${item.id}`} key={item.id}>
+                                                    <div className="bg-white shadow rounded-lg p-4 mb-4">
+                                                        <h2 className="text-gray-700">{item.title}</h2>
+                                                        <p className="text-gray-700">{item.content}</p>
+                                                    </div>
+                                                </Link>
+                                            );
+                                        case 'comments':
+                                            return (
+                                                <Link href={`/post/${item.postId}`} key={item.id}>
+                                                    <div className="bg-white shadow rounded-lg p-4 mb-4">
+                                                        <p className="text-gray-700">{item.content}</p>
+                                                        <p>Upvotes: {item.upvotesCount}, Downvotes: {item.downvotesCount}</p>
+                                                    </div>
+                                                </Link>
+                                            );
+                                        case 'followers':
+                                        case 'following':
+                                            return (
+                                                <Link href={`/profile/${item.username}`} key={item.id}>
+                                                    <div className="bg-white shadow rounded-lg p-4 mb-4">
+                                                        <img src={item.avatarUrl} alt={item.username} />
+                                                        <p className="text-gray-700">{item.username}</p>
+                                                        <p>Reputation: {item.reputation}</p>
+                                                    </div>
+                                                </Link>
+                                            );
+                                        case 'subscriptions':
+                                            return (
+                                                <Link href={`/forum/${item.id}`} key={item.id}>
+                                                    <div className="bg-white shadow rounded-lg p-4 mb-4">
+                                                        <img src={item.logo} alt={item.name} />
+                                                        <h2 className="text-gray-700">{item.name}</h2>
+                                                        <p className="text-gray-700">{item.description}</p>
+                                                    </div>
+                                                </Link>
+                                            );
+                                        case 'postVotes':
+                                            return (
+                                                <Link href={`/post/${item.postId}`} key={item.id}>
+                                                    <div className="bg-white shadow rounded-lg p-4 mb-4">
+                                                        <p className="text-gray-700">{item.content}</p>
+                                                        <p>Vote status: {item.voteStatus}, Upvotes: {item.upvotesCount}, Downvotes: {item.downvotesCount}</p>
+                                                    </div>
+                                                </Link>
+                                            );
+                                        case 'commentVotes':
+                                            return (
+                                                <Link href={`/post/${item.postId}`} key={item.id}>
+                                                    <div className="bg-white shadow rounded-lg p-4 mb-4">
+                                                        <p className="text-gray-700">{item.content}</p>
+                                                        <p>Vote status: {item.voteStatus}, Upvotes: {item.upvotesCount}, Downvotes: {item.downvotesCount}</p>
+                                                    </div>
+                                                </Link>
+                                            );
+                                        default:
+                                            return null;
+                                    }
+                                })
+                            ) : (
+                                <p>No data available.</p>
+                            )
+                        ) : (
+                            <div className="flex justify-center items-center h-12">
+                                <p className="text-gray-500">Loading...</p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default UserProfile;