Merge pull request #82 from johndoe6345789/codex/centralize-flaskurl-persistence-into-hook

Centralize storage settings handlers

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`

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',
   })

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,
+  }
+}