From 2d6df21cf16c8c717909342fff29f9912acfff51 Mon Sep 17 00:00:00 2001 From: sailong Date: Wed, 21 May 2025 21:06:10 +0800 Subject: [PATCH] feat(UI):Change the migrated Mega API to Campsite API --- .../TestView/{CodeTabe.tsx => CodeTable.tsx} | 53 ++++++++++--------- moon/apps/web/components/TestView/index.tsx | 36 ++++++------- moon/apps/web/hooks/useGetTreeCommitInfo.ts | 12 +++++ moon/apps/web/hooks/useTestInfo.ts | 25 --------- moon/apps/web/pages/[org]/testapi/index.tsx | 37 ------------- moon/apps/web/utils/queryClient.ts | 1 - 6 files changed, 56 insertions(+), 108 deletions(-) rename moon/apps/web/components/TestView/{CodeTabe.tsx => CodeTable.tsx} (67%) create mode 100644 moon/apps/web/hooks/useGetTreeCommitInfo.ts delete mode 100644 moon/apps/web/hooks/useTestInfo.ts delete mode 100644 moon/apps/web/pages/[org]/testapi/index.tsx diff --git a/moon/apps/web/components/TestView/CodeTabe.tsx b/moon/apps/web/components/TestView/CodeTable.tsx similarity index 67% rename from moon/apps/web/components/TestView/CodeTabe.tsx rename to moon/apps/web/components/TestView/CodeTable.tsx index dba27d2a6..a9afde5f0 100644 --- a/moon/apps/web/components/TestView/CodeTabe.tsx +++ b/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['columns'] = [ + + const columns = useMemo['columns']>(() => [ { - title: 'Name', - dataIndex: ['name', 'content_type'], - key: 'name', - render: (_, record) => { - return <> - - {record.content_type === "directory" && } - {record.content_type === "file" && } - {record.name} - - - } + title: 'Name', + dataIndex: ['name', 'content_type'], + key: 'name', + render: (_, record) => ( + + {record.content_type === "directory" && } + {record.content_type === "file" && } + {record.name} + + ) }, { - title: 'Message', - dataIndex: 'message', - key: 'message', - render: (text) => {text}, + title: 'Message', + dataIndex: 'message', + key: 'message', + render: (text) => {text}, }, { - 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}`; diff --git a/moon/apps/web/components/TestView/index.tsx b/moon/apps/web/components/TestView/index.tsx index 5e7e20cdb..82e75f348 100644 --- a/moon/apps/web/components/TestView/index.tsx +++ b/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; + 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 (
); } -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 = ''; diff --git a/moon/apps/web/hooks/useGetTreeCommitInfo.ts b/moon/apps/web/hooks/useGetTreeCommitInfo.ts new file mode 100644 index 000000000..6de1165b5 --- /dev/null +++ b/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}) + }) +} \ No newline at end of file diff --git a/moon/apps/web/hooks/useTestInfo.ts b/moon/apps/web/hooks/useTestInfo.ts deleted file mode 100644 index 791f29ee8..000000000 --- a/moon/apps/web/hooks/useTestInfo.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { useQuery } from '@tanstack/react-query' -import { legacyApiClient } from '@/utils/queryClient' - -interface TestAPIResponse { - req_result: boolean; - data: Data[]; - err_message: string; -} - -interface Data { - oid: string; - name: string; - content_type: string; - message: string; - date: string; -} - -export function useTestInfo(path: string) { - return useQuery({ - queryKey: ['path', path], - queryFn: () => - fetch(`${legacyApiClient.baseUrl}/api/v1/tree/commit-info?path=${path}`) - .then(res => res.json() as Promise) - }) -} \ No newline at end of file diff --git a/moon/apps/web/pages/[org]/testapi/index.tsx b/moon/apps/web/pages/[org]/testapi/index.tsx deleted file mode 100644 index 936c26091..000000000 --- a/moon/apps/web/pages/[org]/testapi/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import Head from 'next/head' -import { AppLayout } from '@/components/Layout/AppLayout' -import AuthAppProviders from '@/components/Providers/AuthAppProviders' -import { useTestInfo } from '@/hooks/useTestInfo' -import { PageWithLayout } from '@/utils/types' - -const TestApiPage: PageWithLayout = () => { - const { data, isLoading, error } = useTestInfo('/third-part') - - return ( - <> - - API Test Page - -
-

API Test Results

- {isLoading &&
Loading...
} - {error &&
Error: {error.message}
} - {data && ( -
- 
{JSON.stringify(data, null, 2)}
-
- )} -
- - ) -} - -TestApiPage.getProviders = (page, pageProps) => { - return ( - - {page} - - ) -} - -export default TestApiPage diff --git a/moon/apps/web/utils/queryClient.ts b/moon/apps/web/utils/queryClient.ts index 2853e8413..727ae4675 100644 --- a/moon/apps/web/utils/queryClient.ts +++ b/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' }