refactor: update files changed UI and path handling (#1722)

Author: zyd123-cmd

moon/apps/web/components/ClView/FileChangeTab.tsx

@@ -11,20 +11,50 @@ interface FileChangeTabProps {
 }
 
 export const FileChangeTab = React.memo<FileChangeTabProps>(({ id }) => {
-  const [page] = React.useState(1)
+  const PER_PAGE = 100
+
+  const [page, setPage] = React.useState(1)
+  const [isScrollLoading, setIsScrollLoading] = React.useState(false)
+
   const { fileChanged: ClFilesChangedData, isLoading: isFileChangeLoading } = useGetClFileChanged(id, {
     page,
-    per_page: 100
+    per_page: PER_PAGE
   })
 
   const { data: treeResponse, isLoading: treeIsLoading } = useGetClFileTree(id)
 
+  const totalPages = ClFilesChangedData?.total ?? 0
+  const hasMoreData = totalPages > 0 && page < totalPages
+
+  React.useEffect(() => {
+    if (!isFileChangeLoading && isScrollLoading) {
+      setIsScrollLoading(false)
+    }
+  }, [isFileChangeLoading, isScrollLoading])
+
+  const isInitialLoading =
+    (isFileChangeLoading || treeIsLoading) &&
+    page === 1 &&
+    (!ClFilesChangedData?.items || ClFilesChangedData.items.length === 0)
+
+  const isBlockingLoading = isInitialLoading || isScrollLoading
+
+  const handleLoadMore = React.useCallback(() => {
+    if (isScrollLoading || isFileChangeLoading || !hasMoreData) return
+    setIsScrollLoading(true)
+    setPage((prev) => prev + 1)
+  }, [hasMoreData, isFileChangeLoading, isScrollLoading])
+
   return (
     <FileDiff
       fileChangeData={ClFilesChangedData}
       fileChangeIsLoading={isFileChangeLoading}
       treeData={treeResponse?.data as CommonResultVecMuiTreeNode['data']}
       treeIsLoading={treeIsLoading}
+      page={page}
+      hasMoreData={hasMoreData}
+      isBlockingLoading={isBlockingLoading}
+      onLoadMore={handleLoadMore}
     />
   )
 })

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

@@ -246,6 +246,10 @@ export const CommitsDetailView: React.FC = () => {
           fileChangeIsLoading={isLoadingFilesChanged}
           treeData={treeResponse?.data as CommonResultVecMuiTreeNode['data']}
           treeIsLoading={treeIsLoading}
+          page={1}
+          hasMoreData={false}
+          isBlockingLoading={isLoadingFilesChanged || treeIsLoading}
+          onLoadMore={() => undefined}
         />
       ) : (
         <div className='flex h-[200px] items-center justify-center text-gray-500'>No file changes</div>

moon/apps/web/components/DiffView/FileDiff.tsx

@@ -66,15 +66,25 @@ interface FileDiffProps {
   fileChangeIsLoading: boolean
   treeData: CommonResultVecMuiTreeNode['data']
   treeIsLoading: boolean
+  page: number
+  hasMoreData: boolean
+  isBlockingLoading: boolean
+  onLoadMore: () => void
 }
 
-export default function FileDiff({ fileChangeData, fileChangeIsLoading, treeData, treeIsLoading }: FileDiffProps) {
+export default function FileDiff({
+  fileChangeData,
+  fileChangeIsLoading,
+  treeData,
+  treeIsLoading,
+  page,
+  hasMoreData,
+  isBlockingLoading,
+  onLoadMore
+}: FileDiffProps) {
   const virtuosoRef = useRef<any>(null)
 
-  const [page, setPage] = useState(1)
-
   const [pageDataMap, setPageDataMap] = useState<Map<number, DiffItem[]>>(new Map())
-  const [totalCount, setTotalCount] = useState(0)
 
   useEffect(() => {
     if (fileChangeData?.items && !fileChangeIsLoading) {
@@ -86,8 +96,6 @@ export default function FileDiff({ fileChangeData, fileChangeIsLoading, treeData
         }
         return newMap
       })
-
-      setTotalCount(fileChangeData.total)
     }
   }, [fileChangeData, fileChangeIsLoading, page])
 
@@ -137,14 +145,10 @@ export default function FileDiff({ fileChangeData, fileChangeIsLoading, treeData
     [parsedFiles]
   )
 
-  const hasMoreData = useMemo(() => {
-    return fileDiff.length < totalCount
-  }, [fileDiff.length, totalCount])
-
   const loadMoreDiffs = useCallback(() => {
     if (fileChangeIsLoading || !hasMoreData) return
-    setPage((prev) => prev + 1)
-  }, [fileChangeIsLoading, hasMoreData])
+    onLoadMore()
+  }, [fileChangeIsLoading, hasMoreData, onLoadMore])
 
   useEffect(() => {
     setExpandedMap(Object.fromEntries(diffFiles.map((f) => [f.path, false])))
@@ -214,13 +218,21 @@ export default function FileDiff({ fileChangeData, fileChangeIsLoading, treeData
   }
 
   return (
-    <div className='mt-3 flex font-sans'>
+    <div className='relative mt-3 flex font-sans'>
+      {isBlockingLoading && (
+        <div className='fixed inset-0 z-50 flex items-center justify-center bg-white/60'>
+          <div className='flex items-center rounded-md bg-white px-3 py-2 shadow'>
+            <LoadingSpinner />
+            <span className='ml-2 text-sm text-gray-600'>Loading diffs...</span>
+          </div>
+        </div>
+      )}
       <div className='sticky top-5 h-[80vh] w-[300px] overflow-y-auto rounded-lg p-2'>
         <FileTree treeData={treeData} treeDataLoading={treeIsLoading} onFileClick={scrollToFile} />
       </div>
 
       <div className='h-full w-full flex-1 px-4'>
-        {totalCount === 0 && !fileChangeIsLoading ? (
+        {fileDiff.length === 0 && !fileChangeIsLoading && page === 1 ? (
           <div className='flex h-[85vh] items-center justify-center'>No File Changed</div>
         ) : (
           <Virtuoso
@@ -229,7 +241,7 @@ export default function FileDiff({ fileChangeData, fileChangeIsLoading, treeData
             totalCount={parsedFiles.length}
             itemContent={DiffItem}
             endReached={loadMoreDiffs}
-            components={{ Footer: () => fileChangeIsLoading && <LoadingSpinner /> }}
+            components={{ Footer: () => null }}
             increaseViewportBy={350}
           />
         )}

moon/apps/web/components/DiffView/TreeView/TreeUtils.ts

@@ -65,8 +65,14 @@ export const convertToTreeData = (responseData: any): MuiTreeNode[] => {
 
   // Handle the new API format where responseData is the tree structure directly
   const convertNode = (node: any, parentPath: string = ''): MuiTreeNode => {
-    // Build the full path by combining parent path with current node label
-    const fullPath = parentPath ? `${parentPath}/${node.label}` : node.label
+    const rawPath: string | undefined = node.path
+    let fullPath: string
+
+    if (typeof rawPath === 'string' && rawPath.length > 0) {
+      fullPath = rawPath.startsWith('/') ? rawPath.slice(1) : rawPath
+    } else {
+      fullPath = parentPath ? `${parentPath}/${node.label}` : node.label
+    }
 
     return {
       id: node.id,

moon/apps/web/components/Post/Notes/DragAndDrop.ts

@@ -1,7 +1,25 @@
 import { Extension } from '@tiptap/core'
+import { DOMSerializer } from '@tiptap/pm/model'
 import { NodeSelection, Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
 // @ts-ignore
-import { __serializeForClipboard, EditorView } from '@tiptap/pm/view'
+import { EditorView } from '@tiptap/pm/view'
+
+function serializeForClipboard(view: EditorView, slice: any): { dom: HTMLElement; text: string } {
+  const wrap = document.createElement('div')
+
+  try {
+    const serializer = DOMSerializer.fromSchema(view.state.schema)
+
+    wrap.appendChild(serializer.serializeFragment(slice.content))
+  } catch (_e) {
+    // ignored
+  }
+
+  return {
+    dom: wrap,
+    text: (wrap.textContent ?? '').toString()
+  }
+}
 
 interface DragHandleOptions {
   dragHandleWidth: number
@@ -74,7 +92,7 @@ function DragHandle(options: DragHandleOptions) {
     view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)))
 
     const slice = view.state.selection.content()
-    const { dom, text } = __serializeForClipboard(view, slice)
+    const { dom, text } = serializeForClipboard(view, slice)
 
     event.dataTransfer.clearData()
     event.dataTransfer.setData('text/html', dom.innerHTML)