diff --git a/src/components/StorageSettingsPanel.tsx b/src/components/StorageSettingsPanel.tsx index 7b62368..df289bd 100644 --- a/src/components/StorageSettingsPanel.tsx +++ b/src/components/StorageSettingsPanel.tsx @@ -1,10 +1,8 @@ -import { useState } from 'react' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' -import { useStorageBackend } from '@/hooks/use-unified-storage' import { Database, HardDrive, @@ -15,8 +13,7 @@ import { CloudArrowUp, } from '@phosphor-icons/react' import { storageSettingsCopy, getBackendCopy, type StorageBackendKey } from '@/components/storage/storageSettingsConfig' -import { useStorageSwitchHandlers } from '@/components/storage/useStorageSwitchHandlers' -import { useStorageDataHandlers } from '@/components/storage/useStorageDataHandlers' +import { useStorageSettingsHandlers } from '@/components/storage/useStorageSettingsHandlers' const getBackendIcon = (backend: StorageBackendKey | null) => { switch (backend) { @@ -186,29 +183,18 @@ export function StorageSettingsPanel() { const { backend, isLoading, - switchToFlask, - switchToSQLite, - switchToIndexedDB, - exportData, - importData, - } = useStorageBackend() - - const [flaskUrl, setFlaskUrl] = useState( - localStorage.getItem('codeforge-flask-url') || storageSettingsCopy.panel.flaskUrlPlaceholder - ) - - const { isSwitching, handleSwitchToFlask, handleSwitchToSQLite, handleSwitchToIndexedDB } = - useStorageSwitchHandlers({ - backend, - flaskUrl, - switchToFlask, - switchToSQLite, - switchToIndexedDB, - }) - - const { isExporting, isImporting, handleExport, handleImport } = useStorageDataHandlers({ - exportData, - importData, + flaskUrl, + setFlaskUrl, + isSwitching, + handleSwitchToFlask, + handleSwitchToSQLite, + handleSwitchToIndexedDB, + isExporting, + isImporting, + handleExport, + handleImport, + } = useStorageSettingsHandlers({ + defaultFlaskUrl: storageSettingsCopy.panel.flaskUrlPlaceholder, exportFilename: () => { const dateStamp = new Date().toISOString().split('T')[0] return `${storageSettingsCopy.panel.exportFilenamePrefix}-${dateStamp}.json` diff --git a/src/components/molecules/StorageSettings.tsx b/src/components/molecules/StorageSettings.tsx index 20fa6b0..e9f3b53 100644 --- a/src/components/molecules/StorageSettings.tsx +++ b/src/components/molecules/StorageSettings.tsx @@ -1,18 +1,15 @@ -import { useState } from 'react' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Badge } from '@/components/ui/badge' -import { useStorageBackend } from '@/hooks/use-unified-storage' import { Database, HardDrive, Cloud, Cpu, Download, Upload } from '@phosphor-icons/react' import { storageSettingsCopy, getBackendCopy, type StorageBackendKey, } from '@/components/storage/storageSettingsConfig' -import { useStorageSwitchHandlers } from '@/components/storage/useStorageSwitchHandlers' -import { useStorageDataHandlers } from '@/components/storage/useStorageDataHandlers' +import { useStorageSettingsHandlers } from '@/components/storage/useStorageSettingsHandlers' const getBackendIcon = (backend: StorageBackendKey | null) => { switch (backend) { @@ -169,29 +166,18 @@ export function StorageSettings() { const { backend, isLoading, - switchToFlask, - switchToIndexedDB, - switchToSQLite, - exportData, - importData, - } = useStorageBackend() - - const [flaskUrl, setFlaskUrl] = useState( - localStorage.getItem('codeforge-flask-url') || storageSettingsCopy.molecule.flaskUrlPlaceholder - ) - - const { isSwitching, handleSwitchToFlask, handleSwitchToSQLite, handleSwitchToIndexedDB } = - useStorageSwitchHandlers({ - backend, - flaskUrl, - switchToFlask, - switchToSQLite, - switchToIndexedDB, - }) - - const { isExporting, isImporting, handleExport, handleImport } = useStorageDataHandlers({ - exportData, - importData, + flaskUrl, + setFlaskUrl, + isSwitching, + handleSwitchToFlask, + handleSwitchToSQLite, + handleSwitchToIndexedDB, + isExporting, + isImporting, + handleExport, + handleImport, + } = useStorageSettingsHandlers({ + defaultFlaskUrl: storageSettingsCopy.molecule.flaskUrlPlaceholder, exportFilename: () => `${storageSettingsCopy.molecule.exportFilenamePrefix}-${Date.now()}.json`, importAccept: '.json', }) diff --git a/src/components/storage/useStorageSettingsHandlers.ts b/src/components/storage/useStorageSettingsHandlers.ts new file mode 100644 index 0000000..9dd98ce --- /dev/null +++ b/src/components/storage/useStorageSettingsHandlers.ts @@ -0,0 +1,68 @@ +import { useCallback, useState } from 'react' +import { useStorageBackend } from '@/hooks/use-unified-storage' +import { useStorageSwitchHandlers } from './useStorageSwitchHandlers' +import { useStorageDataHandlers } from './useStorageDataHandlers' + +type StorageSettingsHandlersOptions = { + defaultFlaskUrl: string + exportFilename: () => string + importAccept: string +} + +const flaskUrlStorageKey = 'codeforge-flask-url' + +export const useStorageSettingsHandlers = ({ + defaultFlaskUrl, + exportFilename, + importAccept, +}: StorageSettingsHandlersOptions) => { + const { + backend, + isLoading, + switchToFlask, + switchToSQLite, + switchToIndexedDB, + exportData, + importData, + } = useStorageBackend() + + const [flaskUrl, setFlaskUrlState] = useState( + () => localStorage.getItem(flaskUrlStorageKey) || defaultFlaskUrl + ) + + const setFlaskUrl = useCallback((value: string) => { + setFlaskUrlState(value) + localStorage.setItem(flaskUrlStorageKey, value) + }, []) + + const { isSwitching, handleSwitchToFlask, handleSwitchToSQLite, handleSwitchToIndexedDB } = + useStorageSwitchHandlers({ + backend, + flaskUrl, + switchToFlask, + switchToSQLite, + switchToIndexedDB, + }) + + const { isExporting, isImporting, handleExport, handleImport } = useStorageDataHandlers({ + exportData, + importData, + exportFilename, + importAccept, + }) + + return { + backend, + isLoading, + flaskUrl, + setFlaskUrl, + isSwitching, + handleSwitchToFlask, + handleSwitchToSQLite, + handleSwitchToIndexedDB, + isExporting, + isImporting, + handleExport, + handleImport, + } +}