refactor: refact some part of code base

package.json

@@ -40,6 +40,7 @@
     "@tanstack/react-query": "^4.36.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "date-fns": "^3.3.1",
     "lucide-react": "^0.331.0",
     "nanoid": "^5.0.6",
     "next": "^14.0.4",

prisma/schema.prisma

@@ -84,7 +84,7 @@ model Repository {
     id                    Int       @id @default(autoincrement())
     url                   String
     description           String?
-    repositoryId          Int
+    repositoryId          Int       @unique
     repositoryName        String
     repositoryDescription String?
     repositoryStargazers  Int

src/actions/addrepository.action.ts

@@ -1,21 +1,23 @@
 "use server";
 import { revalidatePath } from "next/cache";
 import { userAction } from "@/lib/next-safe-action";
-import { formRepositorySchema } from "@/components/organisms/_forms/addrepository.schema";
 import repositoryService from "@/services/repository.service";
+import * as z from "zod";
 
-export const addRepository = userAction(
-  formRepositorySchema,
-  async (data, ctx) => {
-    try {
-      await repositoryService.postRepository({
-        ...data,
-        createdBy: ctx.session.user.id,
-      });
-    } catch (error) {
-      if (error instanceof Error) return { error: error.message };
-    }
+const schema = z.object({
+  url: z.string().url(),
+  description: z.string(),
+});
 
-    revalidatePath("/");
-  },
-);
+export const addRepository = userAction(schema, async (data, ctx) => {
+  try {
+    await repositoryService.postRepository({
+      ...data,
+      createdBy: ctx.session.user.id,
+    });
+  } catch (error) {
+    if (error instanceof Error) return { error: error.message };
+  }
+
+  revalidatePath("/repositories");
+});

src/actions/admin/hiderepository.action.ts

@@ -0,0 +1,19 @@
+"use server";
+import { revalidatePath } from "next/cache";
+import { adminAction } from "@/lib/next-safe-action";
+import repositoryService from "@/services/repository.service";
+import * as z from "zod";
+
+const schema = z.object({
+  id: z.number(),
+});
+
+export const hideRepository = adminAction(schema, async (data) => {
+  try {
+    await repositoryService.hideRepository(data.id);
+  } catch (error) {
+    if (error instanceof Error) return { error: error.message };
+  }
+
+  revalidatePath("/");
+});

src/actions/admin/removerepositorycomments.action.ts

@@ -0,0 +1,20 @@
+"use server";
+
+import { adminAction } from "@/lib/next-safe-action";
+import adminService from "@/services/admin.service";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+const schema = z.object({
+  repositoryId: z.number(),
+});
+
+export const removeRepositoryComments = adminAction(schema, async (data) => {
+  try {
+    await adminService.removeRepositoryComments(data.repositoryId);
+  } catch (error) {
+    if (error instanceof Error) return { error: error.message };
+  }
+
+  revalidatePath(`/repositories/${data.repositoryId}`);
+});

src/actions/agreement.action.ts

@@ -1,18 +1,19 @@
 "use server";
 import { revalidatePath } from "next/cache";
 import { userAction } from "@/lib/next-safe-action";
-import { dataSharingAgreementSchema } from "@/components/organisms/_forms/dataSharingAgreement.schema";
 import userService from "@/services/user.service";
+import * as z from "zod";
 
-export const updateAgreement = userAction(
-  dataSharingAgreementSchema,
-  async (data, ctx) => {
-    try {
-      await userService.updateAgreement(ctx.session.user, data.agreement!);
-    } catch (error) {
-      if (error instanceof Error) return { error: error.message };
-    }
+const schema = z.object({
+  agreement: z.boolean().default(false).optional(),
+});
 
-    revalidatePath("/");
-  },
-);
+export const updateAgreement = userAction(schema, async (data, ctx) => {
+  try {
+    await userService.updateAgreement(ctx.session.user, data.agreement!);
+  } catch (error) {
+    if (error instanceof Error) return { error: error.message };
+  }
+
+  revalidatePath("/");
+});

src/actions/likerepository.action.ts

@@ -4,34 +4,28 @@ import { userAction } from "@/lib/next-safe-action";
 import likeService from "@/services/like.service";
 import * as z from "zod";
 
-const likeRepositorySchema = z.object({
+const schema = z.object({
   repositoryId: z.number(),
 });
 
-export const likeOrUnlikeRepository = userAction(
-  likeRepositorySchema,
-  async (data, ctx) => {
-    try {
-      const hasLiked = await likeService.hasLikedRepository(
+export const likeOrUnlikeRepository = userAction(schema, async (data, ctx) => {
+  try {
+    const hasLiked = await likeService.hasLikedRepository(
+      ctx.session.user.id,
+      data.repositoryId,
+    );
+
+    if (hasLiked) {
+      await likeService.unlikeRepository(
         ctx.session.user.id,
         data.repositoryId,
       );
-
-      if (hasLiked) {
-        await likeService.unlikeRepository(
-          ctx.session.user.id,
-          data.repositoryId,
-        );
-      } else {
-        await likeService.likeRepository(
-          ctx.session.user.id,
-          data.repositoryId,
-        );
-      }
-    } catch (error) {
-      if (error instanceof Error) return { error: error.message };
+    } else {
+      await likeService.likeRepository(ctx.session.user.id, data.repositoryId);
     }
+  } catch (error) {
+    if (error instanceof Error) return { error: error.message };
+  }
 
-    revalidatePath("/");
-  },
-);
+  revalidatePath("/");
+});

src/app/repositories/[repositoryId]/layout.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from "react";
+
+export default function RepositoryCommentLayout({
+  children,
+}: PropsWithChildren) {
+  return <div className="m-auto max-w-3xl py-12">{children}</div>;
+}

src/app/repositories/[repositoryId]/page.tsx

@@ -1,25 +1,52 @@
+import Link from "next/link";
+import { ProfileAvatar } from "@/components/molecules/Avatar";
 import { CommentMessages } from "@/components/organisms/CommentMessages";
 import { AddCommentForm } from "@/components/organisms/_forms/addcomment.form";
 import repositoryService from "@/services/repository.service";
-import React from "react";
 
 export default async function RepositoryCommentPage({
   params,
 }: {
   params: { repositoryId: number };
 }) {
+  const repository = await repositoryService.getRepository(
+    Number(params.repositoryId),
+  );
   const initialComments = await repositoryService.getCommentsByRepositoryId(
     Number(params.repositoryId),
   );
 
+  if (!repository) {
+    return <div>Repository not found</div>;
+  }
+
   return (
-    <>
-      <h1>Comments</h1>
+    <div className="space-y-12">
+      <div className="flex items-center space-x-4">
+        <ProfileAvatar
+          pictureUrl={repository.ownerAvatarUrl}
+          alt={repository.repositoryName}
+        />
+        <div className="flex flex-col">
+          <Link
+            href={repository.url}
+            className="text-xl font-semibold hover:underline"
+            target="_blank"
+          >
+            {repository?.repositoryName}
+          </Link>
+          <span className="text-sm">
+            Published by{" "}
+            {repository.createdBy.username ?? repository.createdBy.name}
+          </span>
+        </div>
+      </div>
+
       <CommentMessages
         initialComments={initialComments}
         repositoryId={params.repositoryId}
       />
       <AddCommentForm repositoryId={Number(params.repositoryId)} />
-    </>
+    </div>
   );
 }

src/app/repositories/page.tsx

@@ -26,7 +26,6 @@ export default async function RepositoriesPage({ searchParams }: Props) {
   });
 
   const likes = await likeService.getLikes();
-
   const session = await getServerAuthSession();
   const user = session && (await userService.getUser(session.user.id));
   const repositoriesAlreadyStarred = getRepositoryAlreadyStarred(

src/components/organisms/CardMessage.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import { ProfileAvatar } from "@/components/molecules/Avatar";
+import { calculateCommentCreatedRange } from "@/lib/utils";
+import type { Comment } from "@/types/prisma.type";
+
+type Props = {
+  comment: Comment;
+};
+
+export const CardComment = ({ comment }: Props) => {
+  return (
+    <div className="flex flex-col space-y-4 overflow-hidden rounded-md border border-card bg-default px-4 py-2 shadow">
+      <div className="flex items-center gap-2">
+        <ProfileAvatar pictureUrl={comment.createdBy.image ?? ""} />
+        <div className="flex space-x-2">
+          <Link
+            href="#"
+            className="text-sm font-semibold hover:text-[#2F81F7] hover:underline"
+            target="_blank"
+          >
+            {comment.createdBy.username ?? comment.createdBy.name}
+          </Link>
+          <span className="cursor-pointer text-sm text-[#848D86] hover:text-[#2F81F7] hover:underline">
+            {calculateCommentCreatedRange(comment.createdAt)} ago
+          </span>
+        </div>
+      </div>
+      <div className="text-base">{comment.content}</div>
+    </div>
+  );
+};

src/components/organisms/CommentMessages.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState } from "react";
 import { pusherClient } from "@/lib/pusherClient";
 import type { Comment } from "@/types/prisma.type";
+import { CardComment } from "./CardMessage";
 
 type Props = {
   initialComments: Comment[];
@@ -21,20 +22,16 @@ export const CommentMessages = ({ initialComments, repositoryId }: Props) => {
     return () => {
       pusherClient.unsubscribe(`repo-${repositoryId}`);
     };
-  }, []);
+  }, [repositoryId]);
 
   return (
-    <div>
+    <div className=" flex flex-col gap-8">
       {initialComments.map((comment) => (
-        <div key={comment.id}>
-          <p>{comment.content}</p>
-        </div>
+        <CardComment key={comment.id} comment={comment} />
       ))}
 
       {comments.map((comment) => (
-        <div key={comment.id}>
-          <p>{comment.content}</p>
-        </div>
+        <CardComment key={comment.id} comment={comment} />
       ))}
     </div>
   );

src/components/organisms/RepositoryCard/RepositoryCardHeader.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { ProfileAvatar } from "@/components/molecules/Avatar";
 import { RepositoryCardHideWithRole } from "./RepositoryCardHide";
-import { displayNameOrUsername } from "@/lib/utils";
 import type { Repository } from "@/types/prisma.type";
 import type { User } from "@/types/prisma.type";
 
@@ -32,7 +31,8 @@ export const RepositoryCardHeader = ({
             {repository.ownerUsername}/{repository.repositoryName}
           </Link>
           <span className="text-xs">
-            Published by {displayNameOrUsername({ repository })}
+            Published by{" "}
+            {repository.createdBy.username ?? repository.createdBy.name}
           </span>
         </div>
       </div>

src/components/organisms/RepositoryCard/RepositoryCardHide.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { X } from "lucide-react";
-import { hideRepository } from "@/actions/hiderepository.action";
+import { hideRepository } from "@/actions/admin/hiderepository.action";
 import { withAdminRole } from "@/components/_HOC/withAdminRole";
 import type { Repository } from "@/types/prisma.type";