Add page scrolling, display README files, and show commit history. (#1138)

* feat: The function implementation of tree component

* fix: fix eslint

* feat: Add page scrolling, display README files, and show commit history.

* fix: fix conflicts

* fix: fix eslint

Author: larissa-la

moon/apps/web/components/CodeView/CodeTable.tsx

@@ -6,11 +6,9 @@ import { useMemo } from 'react'
 import { DocumentIcon, FolderIcon } from '@heroicons/react/20/solid'
 import { formatDistance, fromUnixTime } from 'date-fns'
 import { usePathname, useRouter } from 'next/navigation'
-import Markdown from 'react-markdown'
-
-import styles from './CodeTable.module.css'
 import RTable from './Table'
 import { columnsType, DirectoryType } from './Table/type'
+import Markdown from 'react-markdown'
 
 export interface DataType {
   oid: string
@@ -20,11 +18,19 @@ export interface DataType {
   date: number
 }
 
-const CodeTable = ({ directory, readmeContent, loading }: any) => {
+const CodeTable = ({ directory, loading, readmeContent}: any) => {
   const router = useRouter()
   const pathname = usePathname()
   let real_path = pathname?.replace('/tree', '')
 
+  const markdownContentStyle = {
+    margin:' 0 auto',
+    marginTop: 20,
+    border: '1px solid rgba(0, 0, 0, 0.112)',
+    padding: '2%',
+    borderRadius: '0.5rem',
+  }
+
   const columns = useMemo<columnsType<DirectoryType>[]>(
     () => [
       {
@@ -102,9 +108,8 @@ const CodeTable = ({ directory, readmeContent, loading }: any) => {
         onClick={handleRowClick}
         loading={loading}
       />
-
-      {readmeContent && (
-        <div className={styles.markdownContent}>
+    {readmeContent && (
+        <div style={markdownContentStyle}>
           <div className='markdown-body'>
             <Markdown>{readmeContent}</Markdown>
           </div>

moon/apps/web/components/CodeView/CommitDetails.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const CommitDetails = () => {
+
+  return (
+    <div>
+      CommitDetails <br/>
+      CommitDetails <br/>
+      CommitDetails <br/>
+      CommitDetails <br/>
+      CommitDetails <br/>
+    </div>
+  );
+};
+
+export default CommitDetails;

moon/apps/web/components/CodeView/CommitHistory.tsx

@@ -1,6 +1,8 @@
-import { Card, Flex } from '@radix-ui/themes'
-import { Avatar, Button, ClockIcon } from '@gitmono/ui'
+import { Flex } from '@radix-ui/themes'
+import { Avatar, Button, ClockIcon, EyeIcon } from '@gitmono/ui'
 import { MemberHovercard } from '@/components/InlinePost/MemberHovercard'
+import CommitDetails from './CommitDetails'
+import { useState } from 'react'
 
 interface UserInfo {
   avatar_url: string
@@ -14,10 +16,23 @@ export interface CommitInfo {
   date: string
 }
 
-export default function CommitHistory({ info }: { info: CommitInfo }) {
+const CommitHyStyle = {
+  width: '100%', 
+  background: '#fff', 
+  border: '1px solid #d1d9e0', 
+  borderRadius: 8 
+}
+
+export default function CommitHistory({ flag, info }: {flag:string, info: CommitInfo }) {
+  const [Expand,setExpand] = useState(false)
+  const ExpandDetails =()=>{
+    setExpand(!Expand)
+  }
+
   return (
-    <Card style={{ width: '100%', background: '#fff', border: '1px solid #d1d9e0', borderRadius: 8 }}>
-      <Flex align='center' className='p-2'>
+    <>
+    <div style={CommitHyStyle}>
+      <Flex align='center' className='p-1'>
         <MemberHovercard username={info.user.name} role='member'>
           <Flex align='center'>
             <Avatar src={info.user.avatar_url} />
@@ -29,6 +44,19 @@ export default function CommitHistory({ info }: { info: CommitInfo }) {
         <span className='text-gray-500 text-sm'>
           {info.message}
         </span>
+        {
+          flag === 'contents' &&
+          <Flex>
+            <Button 
+              size='sm'
+              variant='plain'
+              className='p-0 ml-1'
+              tooltip='Open commit details'
+              onClick={ExpandDetails}>
+              <EyeIcon size={24} />
+            </Button>
+          </Flex>
+        }
 
         <span className='text-gray-400 text-xs ml-auto mr-3'>
           {info.hash} · {info.date}
@@ -44,6 +72,8 @@ export default function CommitHistory({ info }: { info: CommitInfo }) {
           </Flex>
         </Button>
       </Flex>
-    </Card>
+    </div>
+    {Expand &&<CommitDetails/>}
+    </>
   )
 }

moon/apps/web/components/CodeView/TreeView/CloneTabs.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react'
 import { Button, Input, Popover, Space, Tabs, TabsProps } from 'antd'
 import copy from 'copy-to-clipboard'
 import { usePathname } from 'next/navigation'
-
 import { CheckIcon, CopyIcon, DownloadIcon } from '@gitmono/ui/Icons'
+import {LEGACY_API_URL} from '@gitmono/config'
 
 const CloneTabs = ({ endpoint }: any) => {
   const pathname = usePathname()
@@ -16,13 +16,13 @@ const CloneTabs = ({ endpoint }: any) => {
   }
 
   useEffect(() => {
-    if (endpoint) {
-      const url = new URL(endpoint)
+    if (LEGACY_API_URL) {
+      const url = new URL(LEGACY_API_URL)
 
       if (active_tab === '1') {
-        setText(`${url.href}${pathname?.replace('/tree/', '')}.git`)
+        setText(`${url.href}${pathname?.replace('/myorganization/code/tree/', '')}.git`)
       } else {
-        setText(`ssh://git@${url.host}${pathname?.replace('/tree', '')}.git`)
+        setText(`ssh://git@${url.host}${pathname?.replace('/myorganization/code/tree', '')}.git`)
       }
     }
   }, [pathname, active_tab, endpoint])

moon/apps/web/components/CodeView/TreeView/RepoTree.tsx

@@ -61,7 +61,7 @@ function CustomLabel({ icon: Icon, children, ...other }: CustomLabelProps) {
       {Icon && (
         <Box component={Icon} className="labelIcon" color="inherit" sx={{ mr: 1, fontSize: '1.2rem' }} />
       )}
-      <TreeItemLabel>{children}</TreeItemLabel>
+      <TreeItemLabel sx={{fontSize: '14px'}}>{children}</TreeItemLabel>
     </TreeItemLabel>
   );
 }

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

@@ -1,51 +1,22 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useMemo } from 'react'
 
 import { CommonResultVecTreeCommitItem } from '@gitmono/types/generated'
 
 import { useGetTreeCommitInfo } from '@/hooks/useGetTreeCommitInfo'
 
 import SpinnerTable from './TableWithLoading'
+import { useGetBlob } from '@/hooks/useGetBlob'
 
 export default function CodeView() {
   const { data: TreeCommitInfo } = useGetTreeCommitInfo('/')
 
   type DirectoryType = NonNullable<CommonResultVecTreeCommitItem['data']>
   const directory: DirectoryType = useMemo(() => TreeCommitInfo?.data ?? [], [TreeCommitInfo])
 
-  const [readmeContent, setReadmeContent] = useState('')
+  const reqPath = `/README.md`
+  const  {data: readmeContent} = useGetBlob({path:reqPath})
 
-  const fetchData = useCallback(async () => {
-    if (directory.length === 0) return
-
-    try {
-      const content = await getReadmeContent('/', directory)
-
-      setReadmeContent(content)
-    } catch (error) {
-      // console.error('Error fetching data:', error);
-    }
-  }, [directory])
-
-  useEffect(() => {
-    fetchData()
-  }, [fetchData])
-
-  return <SpinnerTable isLoading={!TreeCommitInfo} datasource={directory} content={readmeContent} />
-}
-
-async function getReadmeContent(pathname: string, directory: any) {
-  let readmeContent = ''
-
-  for (const project of directory || []) {
-    if (project.name === 'README.md' && project.content_type === 'file') {
-      const res = await fetch(`/api/blob?path=${pathname}/README.md`)
-      const response = await res.json()
-
-      readmeContent = response.data.data
-      break
-    }
-  }
-  return readmeContent
+  return <SpinnerTable isLoading={!TreeCommitInfo} datasource={directory} content={readmeContent?.data} />
 }

moon/apps/web/pages/[org]/code/blob/[...path].tsx

@@ -94,7 +94,7 @@ function BlobPage() {
           <BreadCrumb path={path} />
         </Layout>
         <Layout className='m-2'>
-          <CommitHistory info={commitInfo}/>
+          <CommitHistory flag={'details'} info={commitInfo}/>
         </Layout>
         <Flex gap='middle' wrap>
           <Layout style={codeStyle}>

moon/apps/web/pages/[org]/code/tree/[...path]/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 import { Theme } from '@radix-ui/themes'
 import { Flex, Layout } from 'antd'
 import { useParams } from 'next/navigation'
@@ -16,6 +16,8 @@ import { AppLayout } from '@/components/Layout/AppLayout'
 import AuthAppProviders from '@/components/Providers/AuthAppProviders'
 import { useGetTreeCommitInfo } from '@/hooks/useGetTreeCommitInfo'
 import { useGetTreePathCanClone } from '@/hooks/useGetTreePathCanClone'
+import CommitHistory from '@/components/CodeView/CommitHistory'
+import { useGetBlob } from '@/hooks/useGetBlob'
 
 function TreeDetailPage() {
   const params = useParams()
@@ -28,26 +30,22 @@ function TreeDetailPage() {
   const directory: DirectoryType = useMemo(() => TreeCommitInfo?.data ?? [], [TreeCommitInfo])
 
   const { data: canClone } = useGetTreePathCanClone({ path: new_path })
-  const [readmeContent, setReadmeContent] = useState('')
-  const [endpoint, setEndPoint] = useState('')
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const readmeContent = await getReadmeContent(new_path, directory)
+  const reqPath = `${new_path}/README.md`
+  const  {data: readmeContent}=useGetBlob({path:reqPath})
 
-        setReadmeContent(readmeContent)
-        const endpoint = await getEndpoint()
 
-        setEndPoint(endpoint)
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error('Error fetching data:', error)
-      }
-    }
+  const commitInfo = {
+    user: {
+      avatar_url: 'https://avatars.githubusercontent.com/u/112836202?v=4&size=40',
+      name: 'yetianxing2014'
+    },
+    message: '[feat(libra)]: 为 config 命令添加 --default参数 (#1119)',
+    hash: '5fe4235',
+    date: '3 months ago'
+  }
+
 
-    fetchData()
-  }, [new_path, directory])
 
   const treeStyle = {
     borderRadius: 8,
@@ -61,6 +59,7 @@ function TreeDetailPage() {
     borderRadius: 8,
     overflow: 'hidden',
     width: 'calc(80% - 8px)',
+    height:'100%',
     background: '#fff'
   }
 
@@ -73,7 +72,7 @@ function TreeDetailPage() {
   }
 
   return (
-    <div className='relative m-2 h-screen overflow-hidden'>
+    <div className='relative m-2 h-screen overflow-auto'>
       {!TreeCommitInfo ? (
         <div className='align-center container absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 justify-center'>
           <LoadingSpinner />
@@ -84,7 +83,7 @@ function TreeDetailPage() {
             <BreadCrumb path={path} />
             {canClone?.data && (
               <Flex justify={'flex-end'}>
-                <CloneTabs endpoint={endpoint} />
+                <CloneTabs/>
               </Flex>
             )}
           </Layout>
@@ -93,36 +92,19 @@ function TreeDetailPage() {
             <RepoTree directory={directory} />
           </Layout>
           <Layout style={codeStyle}>
-            <CodeTable directory={directory} loading={!TreeCommitInfo} readmeContent={readmeContent} />
+            {
+             commitInfo &&  <Layout>
+                <CommitHistory flag={'contents'} info={commitInfo}/>
+              </Layout>
+            }
+            <CodeTable directory={directory} loading={!TreeCommitInfo} readmeContent={readmeContent?.data}/>
           </Layout>
         </Flex>
       )}
     </div>
   )
 }
 
-async function getReadmeContent(pathname: string, directory: any) {
-  let readmeContent = ''
-
-  for (const project of directory || []) {
-    if (project.name === 'README.md' && project.content_type === 'file') {
-      const res = await fetch(`/api/blob?path=${pathname}/README.md`)
-      const response = await res.json()
-
-      readmeContent = response.data.data
-      break
-    }
-  }
-  return readmeContent
-}
-
-async function getEndpoint() {
-  const res = await fetch(`/host`)
-  const response = await res.json()
-
-  return response.endpoint
-}
-
 TreeDetailPage.getProviders = (
   page:
     | string