@startsimpli/ui 0.1.0

package/src/components/unified-table/hooks/useTablePreferences.ts

@@ -0,0 +1,198 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { ColumnVisibilityState, SortState } from '../types'
+
+interface TablePreferences {
+  columnVisibility: ColumnVisibilityState
+  columnOrder: string[] | null
+  defaultSortColumn: string | null
+  defaultSortDirection: 'asc' | 'desc' | null
+  pageSize: number
+}
+
+interface UseTablePreferencesOptions {
+  tableId: string
+  enabled?: boolean
+  defaultColumnVisibility?: ColumnVisibilityState
+  defaultPageSize?: number
+  debounceMs?: number
+  // Custom fetch function for API calls
+  // Applications should provide their own apiFetch implementation
+  apiFetch?: typeof fetch
+}
+
+interface UseTablePreferencesReturn {
+  preferences: TablePreferences | null
+  isLoading: boolean
+  error: Error | null
+  updateColumnVisibility: (visibility: ColumnVisibilityState) => void
+  updateColumnOrder: (order: string[]) => void
+  updateSortPreference: (sort: SortState) => void
+  updatePageSize: (size: number) => void
+  resetPreferences: () => Promise<void>
+}
+
+export function useTablePreferences({
+  tableId,
+  enabled = true,
+  defaultColumnVisibility = {},
+  defaultPageSize = 25,
+  debounceMs = 500,
+  apiFetch = fetch // Default to native fetch if not provided
+}: UseTablePreferencesOptions): UseTablePreferencesReturn {
+  const [preferences, setPreferences] = useState<TablePreferences | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const pendingUpdatesRef = useRef<Partial<TablePreferences>>({})
+
+  // Load preferences on mount
+  useEffect(() => {
+    if (!enabled) {
+      setIsLoading(false)
+      return
+    }
+
+    const loadPreferences = async () => {
+      try {
+        const response = await apiFetch(`/api/v1/table-preferences/?tableId=${encodeURIComponent(tableId)}`)
+        if (!response.ok) {
+          throw new Error('Failed to load table preferences')
+        }
+        const data = await response.json()
+
+        if (data) {
+          setPreferences(data)
+        } else {
+          // Use defaults if no saved preferences
+          setPreferences({
+            columnVisibility: defaultColumnVisibility,
+            columnOrder: null,
+            defaultSortColumn: null,
+            defaultSortDirection: null,
+            pageSize: defaultPageSize
+          })
+        }
+      } catch (err) {
+        console.error('Error loading table preferences:', err)
+        setError(err instanceof Error ? err : new Error('Unknown error'))
+        // Fall back to defaults on error
+        setPreferences({
+          columnVisibility: defaultColumnVisibility,
+          columnOrder: null,
+          defaultSortColumn: null,
+          defaultSortDirection: null,
+          pageSize: defaultPageSize
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadPreferences()
+  }, [tableId, enabled, defaultPageSize])
+
+  // Debounced save function
+  const savePreferences = useCallback(async (updates: Partial<TablePreferences>) => {
+    // Merge with pending updates
+    pendingUpdatesRef.current = { ...pendingUpdatesRef.current, ...updates }
+
+    // Clear existing timeout
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current)
+    }
+
+    // Set new debounced timeout
+    saveTimeoutRef.current = setTimeout(async () => {
+      const updatesToSave = { ...pendingUpdatesRef.current }
+      pendingUpdatesRef.current = {}
+
+      try {
+        const response = await apiFetch('/api/v1/table-preferences/', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            tableId,
+            ...updatesToSave
+          })
+        })
+
+        if (!response.ok) {
+          throw new Error('Failed to save table preferences')
+        }
+      } catch (err) {
+        console.error('Error saving table preferences:', err)
+        // Don't update error state for save failures - user can continue working
+      }
+    }, debounceMs)
+  }, [tableId, debounceMs])
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  const updateColumnVisibility = useCallback((visibility: ColumnVisibilityState) => {
+    setPreferences(prev => prev ? { ...prev, columnVisibility: visibility } : null)
+    savePreferences({ columnVisibility: visibility })
+  }, [savePreferences])
+
+  const updateColumnOrder = useCallback((order: string[]) => {
+    setPreferences(prev => prev ? { ...prev, columnOrder: order } : null)
+    savePreferences({ columnOrder: order })
+  }, [savePreferences])
+
+  const updateSortPreference = useCallback((sort: SortState) => {
+    setPreferences(prev => prev ? {
+      ...prev,
+      defaultSortColumn: sort.sortBy,
+      defaultSortDirection: sort.sortDirection
+    } : null)
+    savePreferences({
+      defaultSortColumn: sort.sortBy,
+      defaultSortDirection: sort.sortDirection
+    })
+  }, [savePreferences])
+
+  const updatePageSize = useCallback((size: number) => {
+    setPreferences(prev => prev ? { ...prev, pageSize: size } : null)
+    savePreferences({ pageSize: size })
+  }, [savePreferences])
+
+  const resetPreferences = useCallback(async () => {
+    try {
+      const response = await apiFetch(`/api/v1/table-preferences/?tableId=${encodeURIComponent(tableId)}`, {
+        method: 'DELETE'
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to reset table preferences')
+      }
+
+      setPreferences({
+        columnVisibility: defaultColumnVisibility,
+        columnOrder: null,
+        defaultSortColumn: null,
+        defaultSortDirection: null,
+        pageSize: defaultPageSize
+      })
+    } catch (err) {
+      console.error('Error resetting table preferences:', err)
+      throw err
+    }
+  }, [tableId, defaultColumnVisibility, defaultPageSize])
+
+  return {
+    preferences,
+    isLoading,
+    error,
+    updateColumnVisibility,
+    updateColumnOrder,
+    updateSortPreference,
+    updatePageSize,
+    resetPreferences
+  }
+}

package/src/components/unified-table/hooks/useTableState.ts

@@ -0,0 +1,103 @@
+import { useState, useCallback, useMemo } from 'react'
+import { UseTableStateReturn, TableState } from '../types'
+
+interface UseTableStateProps<TData> {
+  initialData?: TData[]
+  initialPageSize?: number
+}
+
+export function useTableState<TData>({
+  initialData = [],
+  initialPageSize = 25,
+}: UseTableStateProps<TData>): UseTableStateReturn<TData> {
+  const [data, setDataState] = useState<TData[]>(initialData)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [pageSize, setPageSizeState] = useState(initialPageSize)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('')
+  const [sortBy, setSortBy] = useState<string | null>(null)
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
+  const [loading, setLoadingState] = useState(false)
+  const [loadingRows, setLoadingRowsState] = useState<Set<string>>(new Set())
+  const [error, setErrorState] = useState<Error | null>(null)
+  const [viewMode, setViewModeState] = useState<'table' | 'card'>('table')
+
+  // Computed values
+  const totalCount = data.length
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize))
+
+  const state: TableState<TData> = useMemo(() => ({
+    data,
+    filteredData: data, // Will be computed by filters hook
+    displayedData: data, // Will be computed by pagination
+    currentPage,
+    pageSize,
+    totalPages,
+    totalCount,
+    selectedIds: new Set(),
+    selectAllPages: false,
+    activeFilters: {},
+    sortBy,
+    sortDirection,
+    searchTerm,
+    debouncedSearchTerm,
+    loading,
+    loadingRows,
+    error,
+    viewMode,
+  }), [
+    data,
+    currentPage,
+    pageSize,
+    totalPages,
+    totalCount,
+    sortBy,
+    sortDirection,
+    searchTerm,
+    debouncedSearchTerm,
+    loading,
+    loadingRows,
+    error,
+    viewMode,
+  ])
+
+  const setData = useCallback((newData: TData[]) => {
+    setDataState(newData)
+  }, [])
+
+  const setPage = useCallback((page: number) => {
+    setCurrentPage(page)
+  }, [])
+
+  const setPageSize = useCallback((size: number) => {
+    setPageSizeState(size)
+    setCurrentPage(1) // Reset to first page when changing page size
+  }, [])
+
+  const setLoading = useCallback((isLoading: boolean) => {
+    setLoadingState(isLoading)
+  }, [])
+
+  const setLoadingRows = useCallback((ids: Set<string>) => {
+    setLoadingRowsState(ids)
+  }, [])
+
+  const setError = useCallback((err: Error | null) => {
+    setErrorState(err)
+  }, [])
+
+  const setViewMode = useCallback((mode: 'table' | 'card') => {
+    setViewModeState(mode)
+  }, [])
+
+  return {
+    state,
+    setData,
+    setPage,
+    setPageSize,
+    setLoading,
+    setLoadingRows,
+    setError,
+    setViewMode,
+  }
+}