useFolderData Hook

The useFolderData hook manages the data fetching and state management for folders. It provides an easy way to access and manipulate folder data throughout the application.

Usage

import { useFolderData } from '@hooks/useFolderData'

function MyComponent() {
  const { data, isLoading, error, move, rename, create } = useFolderData('folder-id', 'project-id')

  const handleMove = async () => {
    try {
      await move('new-parent-id', 'canvas')
    } catch (error) {
      console.error('Failed to move:', error)
    }
  }

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <div>
      <h1>{data.name}</h1>
      <button onClick={handleMove}>Move</button>
    </div>
  )
}

API Reference

Hook Parameters

Name	Type	Required	Description
folderId	string	No	The ID of the folder to fetch. If not provided, fetches root folder
projectId	string	No	The ID of the project to scope the folder operations to
options	UseQueryOptions	No	React Query options for customizing the query behavior

Return Value

interface UseFolderDataReturn {
  data: FolderData | undefined
  isLoading: boolean
  isError: boolean
  error: Error | null
  move: (newParentId: string, itemType: string) => Promise<void>
  rename: (newName: string) => Promise<void>
  create: (name: string) => Promise<void>
  remove: () => Promise<void>
  invalidateFolder: () => void
}

interface FolderData {
  _id: string
  name: string
  parent: string | null
  project: string
  owner: string
  users: string[]
  children: FolderChild[]
  inheritPermissions: boolean
  createdAt: string
  updateDate: string
}

Features

Data Fetching

The hook handles data fetching with caching and automatic revalidation:

const { data, isLoading, error } = useFolderData(folderId, projectId)

if (isLoading) return <div>Loading...</div>
if (error) return <div>Error: {error.message}</div>

console.log('Folder name:', data.name)

Move Operation

Move a folder to a new parent:

const { move } = useFolderData(folderId)

try {
  // Move the folder
  await move('new-parent-id', 'folder')
} catch (error) {
  console.error('Failed to move folder:', error)
}

Rename Operation

Rename a folder:

const { rename } = useFolderData(folderId)

try {
  // Rename the folder
  await rename('New Folder Name')
} catch (error) {
  console.error('Failed to rename folder:', error)
}

Create Operation

Create a new folder:

const { create } = useFolderData(folderId)

try {
  // Create a new subfolder
  await create('New Subfolder')
} catch (error) {
  console.error('Failed to create folder:', error)
}

Remove Operation

Remove a folder:

const { remove } = useFolderData(folderId)

try {
  // Remove the folder
  await remove()
} catch (error) {
  console.error('Failed to remove folder:', error)
}

Cache Invalidation

Manually invalidate the folder cache:

const { invalidateFolder } = useFolderData(folderId)

// Invalidate the cache after external changes
invalidateFolder()

Implementation Details

The hook uses React Query for data fetching and cache management:

export function useFolderData(folderId?: string, projectId?: string) {
  const queryClient = useQueryClient()

  const {
    data: folder,
    isLoading,
    error
  } = useQuery({
    queryKey: [FOLDER_QUERY_KEY, 'detail', folderId],
    queryFn: () => (folderId ? getFolder({ id: folderId }) : null),
    enabled: !!folderId
  })

  const invalidateFolder = () => {
    queryClient.invalidateQueries({ queryKey: [FOLDER_QUERY_KEY] })
  }

  // Error handling wrapper
  const handleOperation = async <T>(operation: () => Promise<T>) => {
    try {
      await operation()
      invalidateFolder()
    } catch (error) {
      console.error('Folder operation failed:', error)
      throw error
    }
  }

  return {
    data: folder,
    isLoading,
    error,
    move: (newParentId, itemType) => 
      handleOperation(() => moveFolder({ id: folderId, newParentId, itemType })),
    rename: (newName) => 
      handleOperation(() => editFolderName({ id: folderId, name: newName })),
    create: (name) => 
      handleOperation(() => createFolder({ name, parent: folderId, project: projectId })),
    remove: () => 
      handleOperation(() => removeFolder({ id: folderId })),
    invalidateFolder
  }
}