feat: wip

latitude-dev · Jul 23, 2024 · 99b8b27 · 99b8b27
1 parent 5cca57d
commit 99b8b27
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 13 deletions.
diff --git a/packages/web-ui/src/sections/Document/Sidebar/Files/index.tsx b/packages/web-ui/src/sections/Document/Sidebar/Files/index.tsx
@@ -1,24 +1,20 @@
 'use client'
 
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
+import { ChangeEventHandler, EventHandler, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 
 import { DropdownMenu, MenuOption } from '$ui/ds/atoms/DropdownMenu'
 import { Icons } from '$ui/ds/atoms/Icons'
-import Text from '$ui/ds/atoms/Text'
 import { Input } from '$ui/ds/atoms/Input'
+import Text from '$ui/ds/atoms/Text'
 import { cn } from '$ui/lib/utils'
 import {
   FileTreeProvider,
   useFileTreeContext,
 } from '$ui/sections/Document/Sidebar/Files/FilesProvider'
+import { useTempNodes } from '$ui/sections/Document/Sidebar/Files/useTempNodes'
 
 import { useOpenPaths } from './useOpenPaths'
-import {
-  Node,
-  SidebarDocument,
-  useTree,
-} from './useTree'
-import { useTempNodes } from '$ui/sections/Document/Sidebar/Files/useTempNodes'
+import { Node, SidebarDocument, useTree } from './useTree'
 
 const ICON_CLASS = 'w-6 h-6 text-muted-foreground'
 
@@ -92,7 +88,10 @@ function FolderHeader({
   indentation: IndentType[]
 }) {
   const { onDeleteFolder } = useFileTreeContext()
-  const addFolder = useTempNodes((state) => state.addFolder)
+  const { addFolder, updateFolder } = useTempNodes((state) => ({
+    addFolder: state.addFolder,
+    updateFolder: state.updateFolder,
+  }))
   const togglePath = useOpenPaths((state) => state.togglePath)
   const FolderIcon = open ? Icons.folderOpen : Icons.folderClose
   const ChevronIcon = open ? Icons.chevronDown : Icons.chevronRight
@@ -102,6 +101,11 @@ function FolderHeader({
 
     togglePath(node.path)
   }, [togglePath, node.path, node.isPersisted])
+  const onInputChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    const value = event.target.value
+    const path = `${node.path.split('/').slice(0, -1).join('/')}/${value}`
+    updateFolder({ path })
+  }, [updateFolder])
   const options = useMemo<MenuOption[]>(
     () => [
       {
@@ -112,8 +116,7 @@ function FolderHeader({
       },
       {
         label: 'New Prompt',
-        onClick: () => {
-        },
+        onClick: () => { },
       },
       {
         label: 'Delete folder',
@@ -138,7 +141,14 @@ function FolderHeader({
           </div>
           <FolderIcon className={ICON_CLASS} />
           {node.name === ' ' ? (
-            <Input autoFocus size='small' type='text' name='name' className='w-full' />
+            <Input
+              autoFocus
+              size='small'
+              type='text'
+              name='name'
+              onChange={onInputChange}
+              className='w-full'
+            />
           ) : (
             <Text.H5M userSelect={false}>{node.name}</Text.H5M>
           )}
@@ -244,6 +254,7 @@ function FileNode({
   indentation?: IndentType[]
 }) {
   const allTmpFolders = useTempNodes((state) => state.tmpFolders)
+  console.log("ALL_TMP_FOLDERS", allTmpFolders)
   const tmpNodes = allTmpFolders[node.path] ?? []
   const { currentPath } = useFileTreeContext()
   const [selected, setSelected] = useState(currentPath === node.path)
@@ -268,7 +279,7 @@ function FileNode({
             hidden: !open && !node.isRoot,
           })}
         >
-          {([...tmpNodes, ...node.children]).map((node, idx) => (
+          {[...tmpNodes, ...node.children].map((node, idx) => (
             <li key={node.id}>
               <FileNode
                 indentation={[...indentation, { isLast: idx === lastIdx }]}

diff --git a/packages/web-ui/src/sections/Document/Sidebar/Files/useTempNodes/index.ts b/packages/web-ui/src/sections/Document/Sidebar/Files/useTempNodes/index.ts
@@ -4,6 +4,7 @@ import { defaultGenerateNodeUuid, Node } from '../useTree'
 type OpenPathsState = {
   tmpFolders: Record<string, Node[]>
   addFolder: (args: { parentPath: string }) => void
+  updateFolder: (args: { path: string }) => void
 }
 
 
@@ -27,4 +28,26 @@ export const useTempNodes = create<OpenPathsState>((set) => ({
       }
     })
   },
+  updateFolder: ({ path }) => {
+    set((state) => {
+      const [parentPath] = path.split('/').slice(0, -1)
+      if (!parentPath) return state
+
+      const prevNodes = state.tmpFolders[parentPath]
+      if (!prevNodes) return state
+
+      const node = prevNodes.find((node) => node.path === path)
+      if (!node) return state
+
+      node.path = path
+      node.name = path.split('/').pop() || ''
+
+      return {
+        tmpFolders: {
+          ...state.tmpFolders,
+          [parentPath]: prevNodes ? [node, ...prevNodes] : [node],
+        },
+      }
+    })
+  },
 }))