try using client component

Author: brendan-kellam

src/app/api/(client)/client.ts

@@ -1,6 +1,4 @@
-'use client';
-
-import { FileSourceResponse, fileSourceResponseSchema, SearchRequest, SearchResponse, searchResponseSchema } from "@/lib/schemas";
+import { FileSourceResponse, fileSourceResponseSchema, ListRepositoriesResponse, listRepositoriesResponseSchema, SearchRequest, SearchResponse, searchResponseSchema } from "@/lib/schemas";
 
 export const search = async (body: SearchRequest): Promise<SearchResponse> => {
     const result = await fetch(`/api/search`, {
@@ -27,4 +25,15 @@ export const fetchFileSource = async (fileName: string, repository: string): Pro
     }).then(response => response.json());
 
     return fileSourceResponseSchema.parse(result);
-}
+}
+
+export const getRepos = async (): Promise<ListRepositoriesResponse> => {
+    const result = await fetch('/api/repos', {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+        },
+    }).then(response => response.json());
+
+    return listRepositoriesResponseSchema.parse(result);
+}

src/app/repos/page.tsx

@@ -1,16 +1,13 @@
-import { Suspense } from "react";
+'use client';
+
 import { NavigationMenu } from "../navigationMenu";
 import { RepositoryTable } from "./repositoryTable";
 
-export const dynamic = 'force-dynamic'
-
-export default async function ReposPage() {
+export default function ReposPage() {
     return (
         <div className="h-screen flex flex-col items-center">
             <NavigationMenu />
-            <Suspense fallback={<div>Loading...</div>}>
-                <RepositoryTable />
-            </Suspense>
+            <RepositoryTable />
         </div>
     )
 }

src/app/repos/repositoryTable.tsx

@@ -1,18 +1,24 @@
-'use server';
+'use client';
 
 import { DataTable } from "@/components/ui/data-table";
 import { columns, RepositoryColumnInfo } from "./columns";
-import { listRepositories } from "@/lib/server/searchService";
 import { isServiceError } from "@/lib/utils";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { getRepos } from "../api/(client)/client";
 
-export const RepositoryTable = async () => {
-    const _repos = await listRepositories();
+export const RepositoryTable = () => {
+    const { data: _repos } = useQuery({
+        queryKey: ["repos"],
+        queryFn: () => getRepos(),
+    });
+
+    const repos = useMemo(() => {
+        if (isServiceError(_repos)) {
+            return [];
+        }
 
-    if (isServiceError(_repos)) {
-        return <div>Error fetching repositories</div>;
-    }
-    const repos = _repos.List.Repos.map((repo): RepositoryColumnInfo => {
-        return {
+        return _repos?.List.Repos.map((repo): RepositoryColumnInfo => ({
             name: repo.Repository.Name,
             branches: repo.Repository.Branches.map((branch) => {
                 return {
@@ -27,10 +33,10 @@ export const RepositoryTable = async () => {
             latestCommit: repo.Repository.LatestCommitDate,
             indexedFiles: repo.Stats.Documents,
             commitUrlTemplate: repo.Repository.CommitURLTemplate,
-        }
-    }).sort((a, b) => {
-        return new Date(b.lastIndexed).getTime() -  new Date(a.lastIndexed).getTime();
-    });
+        })).sort((a, b) => {
+            return new Date(b.lastIndexed).getTime() - new Date(a.lastIndexed).getTime();
+        }) ?? [];
+    }, [_repos]);
 
     return (
         <DataTable