FolderView

The FolderView component displays the contents of a folder, including subfolders and files, and provides functionality for folder management.

Implementation

The component uses React Router and several custom hooks for folder management:

import { FileTable } from '@components/FileTable'
import { useFolderData } from '@hooks/useFolderData'
import { useFolderModals } from '@hooks/useFolderModals'
import { useFolderOperations } from '@hooks/useFolderOperations'

Features

Folder Management

• Display folder contents using FileTable
• Create new folders
• Show folder hierarchy
• Format dates for file/folder updates

Data Handling

• Fetch folder data using useFolderData hook
• Convert folder structure to file items for display
• Handle folder operations through useFolderOperations
• Manage modals with useFolderModals

Hooks

Hook	Purpose
useFolderData	Fetches folder data based on folder ID and project ID
useFolderOperations	Provides operations like creating folders
useFolderModals	Manages modal dialogs for folder operations

Usage Example

import { FolderView } from '../views/protected-route/FolderView'

function App() {
  return (
    <Route path="/folder/:folderId/:folderName">
      <FolderView />
    </Route>
  )
}

URL Parameters

The component expects the following URL parameters:

• folderId: ID of the folder to display
• folderName: Name of the folder (for display)
• project: Project ID (as a query parameter)

Internal Functions

Convert Folder Data

const convertFolderToFileItems = (folder: Folder | null): FileItem[] => {
  if (!folder?.children) return []
  return folder.children
    .filter((child: FolderChild) => child.item !== null)
    .map((child: FolderChild) => ({
      _id: child.item._id,
      name: child.item.name,
      type: child.itemType,
      updateDate: formatDate(child.item.updateDate),
      project: folder.project,
      owner: child.item.owner,
      effectivePermissions: child.item.effectivePermissions,
      inheritPermissions: child.item.inheritPermissions
    }))
}

Create Folder

const handleCreateFolder = () => {
  openFolderNameModal({
    title: 'Create New Folder',
    onSubmit: (name) =>
      createFolder({
        name,
        parent: folderId === projectId ? null : folderId,
        project: projectId || ''
      })
  })
}

Types

interface Folder {
  _id: string
  name: string
  project: string
  children?: FolderChild[]
}

interface FolderChild {
  item: {
    _id: string
    name: string
    updateDate: string
    owner: string
    effectivePermissions: any
    inheritPermissions: boolean
  }
  itemType: string
}

interface FileItem {
  _id: string
  name: string
  type: string
  updateDate: string
  project: string
  owner: string
  effectivePermissions: any
  inheritPermissions: boolean
}

Code

import { FolderView } from '@views/protected-route/FolderView'
import { useParams, useSearchParams } from 'react-router-dom'
import { useFolderData } from '@hooks/useFolderData'
import { useFolderOperations } from '@hooks/useFolderOperations'
import { useFolderModals } from '@hooks/useFolderModals'

export const FolderView = memo(() => {
  const { folderId, folderName } = useParams()
  const [searchParams] = useSearchParams()
  const projectId = searchParams.get('project')
  
  const { folder } = useFolderData(folderId || null, projectId || undefined)
  const { createFolder } = useFolderOperations()
  const { openFolderNameModal } = useFolderModals()

  const handleCreateFolder = () => {
    openFolderNameModal({
      title: 'Create New Folder',
      onSubmit: (name) =>
        createFolder({
          name,
          parent: folderId === projectId ? null : folderId,
          project: projectId || ''
        })
    })
  }

  return (
    <Box p="md">
      <Flex align="center" mb="md" gap="sm">
        <Text size="xl" fw={700}>
          {folder?.name || folderName || 'Root'}
        </Text>
        <Button onClick={handleCreateFolder}>Create Folder</Button>
      </Flex>

      <FileTable data={folder ? convertFolderToFileItems(folder) : []} />
    </Box>
  )
})