Overview

The folder operations system provides a comprehensive set of components and hooks for managing folders and files within the Lunchbox application. This system enables users to organize, move, and manage their content efficiently.

Architecture

The folder operations system is built with a layered architecture:

1. UI Components (/components)

   • Reusable UI components for displaying and interacting with folders and files
   • Implements the presentation layer and user interactions

2. Hooks (/hooks)

   • Custom React hooks that handle business logic and state management
   • Provides data fetching, mutations, and folder operations

3. Types (/types)

   • TypeScript type definitions for folder-related data structures
   • Ensures type safety across the application

4. API Layer (/libs/api)

   • HTTP client for communicating with the backend
   • Handles all folder-related API calls

Key Features

• Folder navigation and browsing
• File and folder moving operations
• Permission management
• Project organization

Component Dependencies

graph TD
    A[FileTable] --> B[useFolderOperations]
    A --> C[useFolderData]
    B --> D[folder API]
    C --> D
    E[FolderModal] --> B

Getting Started

To implement folder operations in your component:

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

function MyComponent() {
  const { data, isLoading } = useFolderData('project-id')
  
  return (
    <FileTable 
      data={data} 
      isLoading={isLoading}
      onRefresh={() => {/* handle refresh */}}
    />
  )
}