refactor: refact

src/actions/addcomment.action.ts

@@ -15,10 +15,18 @@ const schema = z.object({
 export const addComment = userAction(schema, async (data, ctx) => {
   try {
     await pusherServer.trigger(`repo-${data.repositoryId}`, "new-comment", {
+      // content: data.content,
+      // picture: data.picture,
+      // name: data.name,
+      // username: data.username,
+      // userId: ctx.session.user.id,
       content: data.content,
-      picture: data.picture,
-      name: data.name,
-      username: data.username,
+      createdBy: {
+        image: data.picture,
+        name: data.name,
+        username: data.username,
+      },
+      createdAt: new Date(),
       userId: ctx.session.user.id,
     });
 

src/actions/addrepository.action.ts

@@ -1,8 +1,8 @@
 "use server";
-import { revalidatePath } from "next/cache";
+
 import { userAction } from "@/lib/next-safe-action";
 import repositoryService from "@/services/repository.service";
-import { URL } from "@/constants";
+
 import * as z from "zod";
 
 const schema = z.object({
@@ -19,6 +19,4 @@ export const addRepository = userAction(schema, async (data, ctx) => {
   } catch (error) {
     if (error instanceof Error) return { error: error.message };
   }
-
-  revalidatePath(URL.REPOSITORIES);
 });

src/actions/admin/removerepositorycomments.action.ts

@@ -1,7 +1,7 @@
 "use server";
 
-import { adminAction } from "@/lib/next-safe-action";
 import adminService from "@/services/admin.service";
+import { adminAction } from "@/lib/next-safe-action";
 import { revalidatePath } from "next/cache";
 import { URL } from "@/constants";
 import * as z from "zod";
@@ -17,5 +17,6 @@ export const removeRepositoryComments = adminAction(schema, async (data) => {
     if (error instanceof Error) return { error: error.message };
   }
 
+  revalidatePath(`${URL.REPOSITORIES}`);
   revalidatePath(`${URL.REPOSITORIES}/${data.repositoryId}`);
 });

src/actions/getRepositories.action.ts

@@ -1,6 +1,5 @@
 "use server";
 import repositoryService from "@/services/repository.service";
-import { revalidatePath } from "next/cache";
 
 type Props = {
   query?: string;

src/actions/getUser.ts

@@ -1,8 +1,6 @@
 "use server";
-
 import userService from "@/services/user.service";
-import { cache } from "react";
 
-export const getUser = cache(async (userId: string) => {
+export const getUser = async (userId: string) => {
   return await userService.getUser(userId);
-});
+};

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

@@ -1,7 +1,5 @@
 import Link from "next/link";
-import { getServerAuthSession } from "@/server/auth";
-import { getUser } from "@/actions/getUser";
-import repositoryService from "@/services/repository.service";
+import { useFetchCommentsPage } from "@/hooks/useFetchCommentsPage";
 import { ProfileAvatar } from "@/components/molecules/Avatar";
 import { CommentList } from "@/components/organisms/Comment/CommentList";
 import { AddCommentForm } from "@/components/organisms/_forms/addcomment.form";
@@ -11,12 +9,9 @@ export default async function RepositoryCommentPage({
 }: {
   params: { repositoryId: number };
 }) {
-  const repositoryId = Number(params.repositoryId);
-  const repository = await repositoryService.getRepository(repositoryId);
-  const initialComments =
-    await repositoryService.getCommentsByRepositoryId(repositoryId);
-  const session = await getServerAuthSession();
-  const user = session && (await getUser(session.user.id));
+  const { repository, comments, session, user } = await useFetchCommentsPage(
+    Number(params.repositoryId),
+  );
 
   if (!repository) {
     return <div>Repository not found</div>;
@@ -44,11 +39,13 @@ export default async function RepositoryCommentPage({
         </div>
       </div>
 
-      <CommentList
-        initialComments={initialComments}
-        repositoryId={params.repositoryId}
-      />
-      {session && <AddCommentForm user={user} repositoryId={repositoryId} />}
+      <CommentList comments={comments} />
+      {session && (
+        <AddCommentForm
+          user={user}
+          repositoryId={Number(params.repositoryId)}
+        />
+      )}
     </div>
   );
 }

src/app/(app)/repositories/page.tsx

@@ -1,5 +1,5 @@
 import { parseAsString } from "nuqs/server";
-import { fetchRepositoryRelatedData } from "@/context/fetchRepositoryRelatedData";
+import { useFetchRepositoriesPage } from "@/hooks/useFetchRepositoriesPage";
 import { RepositoriesProvider } from "@/context/repositoriesContext";
 import { RepositoriesFilter } from "@/components/organisms/RepositoriesFilter/_index";
 import { RepositoriesGridInfiniteScroll } from "@/components/organisms/RepositoriesGrid/RepositoriesGridInfiniteScroll";
@@ -16,25 +16,23 @@ type Props = {
 const queryParser = parseAsString.withDefault("");
 
 export default async function RepositoriesPage({ searchParams }: Props) {
-  const query = queryParser.parseServerSide(searchParams?.query);
-  const language = queryParser.parseServerSide(searchParams?.language);
-  const { user, data, likes, languages } = await fetchRepositoryRelatedData({
-    query,
-    language,
-  });
+  const queryParams = queryParser.parseServerSide(searchParams?.query);
+  const languageParams = queryParser.parseServerSide(searchParams?.language);
+  const { user, likes, languages } = await useFetchRepositoriesPage();
 
   return (
-    <RepositoriesProvider user={user} data={data} likes={likes}>
+    <RepositoriesProvider user={user} likes={likes}>
       <RepositoriesFilter languages={languages} />
-
       <RepositoriesGridInfiniteScroll
         user={user}
-        query={query}
-        language={language}
+        queryParams={queryParams}
+        languageParams={languageParams}
       />
-
       <DataSharingAgreementForm user={user} />
-      <AddRepositoryForm />
+      <AddRepositoryForm
+        queryParams={queryParams}
+        languageParams={languageParams}
+      />
     </RepositoriesProvider>
   );
 }

src/app/socketio/page.tsx

@@ -1,23 +1,8 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import io from "socket.io-client";
+import { getRepository } from "@/services/actions/repository.service";
 
-const API_URL = "https://nodejs-production-eb8a.up.railway.app/";
-const socket = io(API_URL, { autoConnect: false });
+export default async function SocketIOPage() {
+  const repository = await getRepository({ repositoryId: 1 });
+  console.log(repository);
 
-export default function SocketIOPage() {
-  const [views, setViews] = useState(0);
-
-  useEffect(() => {
-    socket.connect();
-    socket.on("count", (count: number) => {
-      setViews(count);
-    });
-
-    return () => {
-      socket.disconnect();
-    };
-  }, []);
-
-  return <div>{views}</div>;
+  return <div>test</div>;
 }

src/components/molecules/PrefetchLink.tsx

@@ -1,7 +1,7 @@
 "use client";
 import Link from "next/link";
 import { useQueryClient } from "@tanstack/react-query";
-import { getRepositoriesOnScroll } from "@/actions/getRepositories.action";
+import { getRepositoriesByFilter } from "@/services/actions/repository.service";
 import { URL } from "@/constants";
 
 export const PrefetchLink = () => {
@@ -12,9 +12,9 @@ export const PrefetchLink = () => {
       .prefetchInfiniteQuery({
         queryKey: ["repositories", { query: "", language: "" }],
         queryFn: ({ pageParam }) =>
-          getRepositoriesOnScroll({ cursor: pageParam }),
+          getRepositoriesByFilter({ cursor: pageParam }),
         initialPageParam: 0,
-        getNextPageParam: (lastPage) => lastPage.nextCursor,
+        getNextPageParam: (lastPage) => lastPage.data?.nextCursor,
         pages: 1,
         staleTime: 1000 * 60 * 5,
       })

src/components/organisms/Comment/CommentCard.tsx

@@ -4,28 +4,33 @@ import { calculateCommentCreatedRange } from "@/lib/utils";
 import type { Comment } from "@/types/prisma.type";
 
 type Props = {
-  comment: Comment;
+  avatar: string | null;
+  username: string | null;
+  name: string | null;
+  createdAt: Date;
+  content: string;
 };
 
-export const CommentCard = ({ comment }: Props) => {
+export const CommentCard = (props: Props) => {
+  const { avatar, username, name, createdAt, content } = 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 ?? "/avatar.png"} />
+        <ProfileAvatar pictureUrl={avatar ?? "/avatar.png"} />
         <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}
+            {username ?? name}
           </Link>
           <span className="cursor-pointer text-sm text-[#848D86] hover:text-[#2F81F7] hover:underline">
-            {calculateCommentCreatedRange(comment.createdAt)} ago
+            {calculateCommentCreatedRange(createdAt)} ago
           </span>
         </div>
       </div>
-      <div className="text-base">{comment.content}</div>
+      <div className="text-base">{content}</div>
     </div>
   );
 };

src/components/organisms/Comment/CommentList.tsx

@@ -1,47 +1,22 @@
-"use client";
-import { useEffect, useState } from "react";
-import { pusherClient } from "@/lib/pusherClient";
 import { CommentCard } from "@/components/organisms/Comment/CommentCard";
 import type { Comment } from "@/types/prisma.type";
 
 type Props = {
-  initialComments: Comment[];
-  repositoryId: number;
+  comments: Comment[];
 };
 
-type CommentEvent = {
-  picture: string | null | undefined;
-  name: string | null | undefined;
-  username: string | null | undefined;
-  content: string;
-};
-
-export const CommentList = ({ initialComments, repositoryId }: Props) => {
-  const [comments, setComments] = useState<CommentEvent[]>([]);
-
-  useEffect(() => {
-    pusherClient.subscribe(`repo-${repositoryId}`);
-
-    pusherClient.bind("new-comment", (data: CommentEvent) => {
-      setComments((prev) => [...prev, data]);
-    });
-
-    return () => {
-      pusherClient.unsubscribe(`repo-${repositoryId}`);
-    };
-  }, [repositoryId]);
-
+export const CommentList = ({ comments }: Props) => {
   return (
     <div className=" flex flex-col gap-8">
-      {initialComments.map((comment) => (
-        <CommentCard key={comment.id} comment={comment} />
-      ))}
-
       {comments.map((comment) => (
-        <>
-          <p>{comment.username}</p>
-          <p>{comment.content}</p>
-        </>
+        <CommentCard
+          key={comment.id}
+          avatar={comment.createdBy.image}
+          username={comment.createdBy.username}
+          name={comment.createdBy.name}
+          createdAt={comment.createdAt}
+          content={comment.content}
+        />
       ))}
     </div>
   );

src/components/organisms/RepositoriesFilter/_index.tsx

@@ -11,7 +11,7 @@ export const RepositoriesFilter = ({ languages }: Props) => {
   return (
     <div className="flex space-x-4">
       <DirectionListToggle />
-      <AlreadyStarredToggle />
+      {/* <AlreadyStarredToggle /> */}
       <SelectLanguages languages={languages} />
     </div>
   );

src/components/organisms/RepositoriesGrid/RepositoriesGridInfiniteScroll.tsx

@@ -4,42 +4,63 @@ import { useFetchInfiniteRepositories } from "@/hooks/useFetchInfiniteRepositori
 import { useFetchNextPage } from "@/hooks/useFetchNextPage";
 import { RepositoryCard } from "@/components/organisms/RepositoryCard/_index";
 import { RepositoriesLoader } from "@/components/organisms/RepositoriesGrid/RepositoriesLoader";
-import { RepositoriesGridLayout } from "./RepositoriesGridLayout";
-import { User } from "@/types/prisma.type";
+import { RepositoriesGridLayout } from "@/components/organisms/RepositoriesGrid/RepositoriesGridLayout";
+import { getRepositoriesAlreadyStarredURL } from "@/utils/getRepositoriesAlreadyStarredURL";
+import type { User } from "@/types/prisma.type";
+import { getFilteredRepositories } from "@/utils/getFilteredRepositories";
+import { useToggleFilter } from "@/stores/useToggleFilter";
 
 type Props = {
   user: User | null;
-  query: string;
-  language: string;
+  queryParams: string;
+  languageParams: string;
 };
 
 export const RepositoriesGridInfiniteScroll = ({
   user,
-  query,
-  language,
+  queryParams,
+  languageParams,
 }: Props) => {
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
-    useFetchInfiniteRepositories({ query, language });
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } =
+    useFetchInfiniteRepositories({ queryParams, languageParams });
 
   const { ref } = useFetchNextPage({
     action: fetchNextPage,
     hasNextPage,
   });
 
+  // const { toggleFilter } = useToggleFilter();
+
+  const flatRepositories =
+    data?.pages.map((page) => page.data!.repositories).flat() || [];
+
+  // const filteredRepositories = getFilteredRepositories({
+  //   query: queryParams,
+  //   language: languageParams,
+  //   repositories: flatRepositories,
+  //   user,
+  //   toggleFilter,
+  // });
+
   return (
     <>
-      {data?.pages.map((page, i) => (
-        <RepositoriesGridLayout key={i}>
-          {page.data.map((repository) => (
+      <RepositoriesGridLayout>
+        {flatRepositories.map((repository, index) =>
+          repository ? (
             <RepositoryCard
-              key={repository.id}
+              key={index}
               user={user}
               repository={repository}
-              // repositoriesAlreadyStarred={repositoriesAlreadyStarred}
+              repositoriesAlreadyStarred={getRepositoriesAlreadyStarredURL(
+                flatRepositories,
+                user,
+              )}
             />
-          ))}
-        </RepositoriesGridLayout>
-      ))}
+          ) : (
+            <p key={index}>Repository not found</p>
+          ),
+        )}
+      </RepositoriesGridLayout>
       <RepositoriesLoader isDisabled={isFetchingNextPage} ref={ref} />
     </>
   );