feat:Change the migrated Mega API to Campsite API

moon/apps/web/components/TestView/CodeTabe.tsx → moon/apps/web/components/TestView/CodeTable.tsx

@@ -10,6 +10,7 @@ import {
     FolderIcon,
     DocumentIcon,
 } from '@heroicons/react/20/solid'
+import { useMemo } from 'react';
 
 export interface DataType {
     oid: string;
@@ -23,38 +24,38 @@ const CodeTable = ({ directory, readmeContent}:any) => {
     const router = useRouter();
     const pathname = usePathname();
     let real_path = pathname?.replace("/tree", "");
-    var columns: TableProps<DataType>['columns'] = [
+
+    const columns = useMemo<TableProps<DataType>['columns']>(() => [
         {
-            title: 'Name',
-            dataIndex: ['name', 'content_type'],
-            key: 'name',
-            render: (_, record) => {
-                return <>
-                    <Space>
-                        {record.content_type === "directory" && <FolderIcon className="size-6" />}
-                        {record.content_type === "file" && <DocumentIcon className="size-6" />}
-                        <a>{record.name}</a>
-                    </Space>
-                </>
-            }
+          title: 'Name',
+          dataIndex: ['name', 'content_type'],
+          key: 'name',
+          render: (_, record) => (
+            <Space>
+              {record.content_type === "directory" && <FolderIcon className="size-6" />}
+              {record.content_type === "file" && <DocumentIcon className="size-6" />}
+              <a>{record.name}</a>
+            </Space>
+          )
         },
         {
-            title: 'Message',
-            dataIndex: 'message',
-            key: 'message',
-            render: (text) => <a>{text}</a>,
+          title: 'Message',
+          dataIndex: 'message',
+          key: 'message',
+          render: (text) => <a>{text}</a>,
         },
         {
-            title: 'Date',
-            dataIndex: 'date',
-            key: 'date',
-            render: (_, { date }) => (
-                <>
-                    {date && formatDistance(fromUnixTime(date), new Date(), { addSuffix: true })}
-                </>
-            )
+          title: 'Date',
+          dataIndex: 'date',
+          key: 'date',
+          render: (_, { date }) => (
+            <>
+              {date && formatDistance(fromUnixTime(date), new Date(), { addSuffix: true })}
+            </>
+          )
         }
-    ];
+    ], []);
+
     const handleRowClick = (record: DataType) => {
         if (record.content_type === "file") {
             const newPath = `/blob/${real_path}/${record.name}`;

moon/apps/web/components/TestView/index.tsx

@@ -1,42 +1,40 @@
 'use client'
 
-import CodeTable from './CodeTabe';
-import { useEffect, useState } from 'react';
+import CodeTable from './CodeTable';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useGetTreeCommitInfo } from '@/hooks/useGetTreeCommitInfo';
+import { CommonResultVecTreeCommitItem } from '@gitmono/types/generated';
 
 export default function TestView() {
-  const [directory, setDirectory] = useState([]);
+  const { data:TreeCommitInfo } = useGetTreeCommitInfo('/')
+
+  type DirectoryType = NonNullable<CommonResultVecTreeCommitItem['data']>;
+  const directory:DirectoryType = useMemo(() => TreeCommitInfo?.data ?? [], [TreeCommitInfo]);
+
   const [readmeContent, setReadmeContent] = useState("");
 
-  const fetchData = async () => {
-    try {
-      const directory = await getDirectory("/");
+  const fetchData = useCallback(async () => {
+    if (directory.length === 0) return; 
 
-      setDirectory(directory);
-      const readmeContent = await getReadmeContent("/", directory);
+    try {
+      const content = await getReadmeContent("/", directory);
 
-      setReadmeContent(readmeContent);
+      setReadmeContent(content);
     } catch (error) {
       // console.error('Error fetching data:', error);
     }
-  };
+  }, [directory]);
 
   useEffect(() => {
     fetchData();
-  }, []);
-
+  }, [fetchData]);
+  
   return (
     <div className='p-3.5 mt-3'>
       <CodeTable directory={directory} readmeContent={readmeContent} />
     </div>
   );
 }
-async function getDirectory(pathname: string) {
-  const res = await fetch(`/api/tree/commit-info?path=${pathname}`);
-  const response = await res.json();
-  const directory = response?.data?.data;
-
-  return directory
-}
 
 async function getReadmeContent(pathname:string, directory: any) {
   let readmeContent = '';

moon/apps/web/hooks/useGetTreeCommitInfo.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query'
+import { legacyApiClient } from '@/utils/queryClient'
+
+const query = legacyApiClient.v1.getApiTreeCommitInfo()
+
+export function useGetTreeCommitInfo(path: string) {
+
+	return useQuery({
+		queryKey: query.requestKey({path}),
+		queryFn: () => query.request({path})
+	  })
+} 

moon/apps/web/utils/queryClient.ts

@@ -149,7 +149,6 @@ export const apiClient = new Api({
 export const legacyApiClient = new Api({
   baseUrl: LEGACY_API_URL,
   baseApiParams: {
-    credentials: 'include',
     headers: { 'Content-Type': 'application/json' },
     format: 'json'
   }