From 81efacd93e4cd79440ae9e381aad6488b106309f Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 00:51:27 +0000 Subject: [PATCH] Add persistence dashboard hook --- src/components/PersistenceDashboard.tsx | 75 +++++----------------- src/hooks/use-persistence-dashboard.ts | 82 +++++++++++++++++++++++++ 2 files changed, 96 insertions(+), 61 deletions(-) create mode 100644 src/hooks/use-persistence-dashboard.ts diff --git a/src/components/PersistenceDashboard.tsx b/src/components/PersistenceDashboard.tsx index 54653b0..4b364ba 100644 --- a/src/components/PersistenceDashboard.tsx +++ b/src/components/PersistenceDashboard.tsx @@ -1,4 +1,3 @@ -import { useState, useEffect } from 'react' import { Card } from '@/components/ui/card' import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' @@ -16,13 +15,7 @@ import { Gauge, } from '@phosphor-icons/react' import { usePersistence } from '@/hooks/use-persistence' -import { useAppDispatch } from '@/store' -import { - syncToFlaskBulk, - syncFromFlaskBulk, - checkFlaskConnection, -} from '@/store/slices/syncSlice' -import { toast } from 'sonner' +import { usePersistenceDashboard } from '@/hooks/use-persistence-dashboard' import copy from '@/data/persistence-dashboard.json' const formatDuration = (ms: number) => { @@ -286,58 +279,18 @@ const HowPersistenceWorksCard = () => ( ) export function PersistenceDashboard() { - const dispatch = useAppDispatch() - const { status, metrics, autoSyncStatus, syncNow, configureAutoSync } = usePersistence() - const [autoSyncEnabled, setAutoSyncEnabled] = useState(false) - const [syncing, setSyncing] = useState(false) - - useEffect(() => { - dispatch(checkFlaskConnection()) - const interval = setInterval(() => { - dispatch(checkFlaskConnection()) - }, 10000) - - return () => clearInterval(interval) - }, [dispatch]) - - const handleSyncToFlask = async () => { - setSyncing(true) - try { - await dispatch(syncToFlaskBulk()).unwrap() - toast.success(copy.toasts.syncToSuccess) - } catch (error: any) { - toast.error(copy.toasts.syncFailed.replace('{{error}}', String(error))) - } finally { - setSyncing(false) - } - } - - const handleSyncFromFlask = async () => { - setSyncing(true) - try { - await dispatch(syncFromFlaskBulk()).unwrap() - toast.success(copy.toasts.syncFromSuccess) - } catch (error: any) { - toast.error(copy.toasts.syncFailed.replace('{{error}}', String(error))) - } finally { - setSyncing(false) - } - } - - const handleAutoSyncToggle = (enabled: boolean) => { - setAutoSyncEnabled(enabled) - configureAutoSync({ enabled, syncOnChange: true }) - toast.info(enabled ? copy.toasts.autoSyncEnabled : copy.toasts.autoSyncDisabled) - } - - const handleManualSync = async () => { - try { - await syncNow() - toast.success(copy.toasts.manualSyncSuccess) - } catch (error: any) { - toast.error(copy.toasts.manualSyncFailed.replace('{{error}}', String(error))) - } - } + const { + status, + metrics, + autoSyncStatus, + autoSyncEnabled, + syncing, + handleSyncToFlask, + handleSyncFromFlask, + handleManualSync, + handleAutoSyncToggle, + handleCheckConnection, + } = usePersistenceDashboard() return (
@@ -357,7 +310,7 @@ export function PersistenceDashboard() { onSyncToFlask={handleSyncToFlask} onSyncFromFlask={handleSyncFromFlask} onManualSync={handleManualSync} - onCheckConnection={() => dispatch(checkFlaskConnection())} + onCheckConnection={handleCheckConnection} syncing={syncing} status={status} autoSyncStatus={autoSyncStatus} diff --git a/src/hooks/use-persistence-dashboard.ts b/src/hooks/use-persistence-dashboard.ts new file mode 100644 index 0000000..61325e7 --- /dev/null +++ b/src/hooks/use-persistence-dashboard.ts @@ -0,0 +1,82 @@ +import { useEffect, useState } from 'react' +import { toast } from 'sonner' +import { usePersistence } from '@/hooks/use-persistence' +import { useAppDispatch } from '@/store' +import { + syncToFlaskBulk, + syncFromFlaskBulk, + checkFlaskConnection, +} from '@/store/slices/syncSlice' +import copy from '@/data/persistence-dashboard.json' + +export function usePersistenceDashboard() { + const dispatch = useAppDispatch() + const { status, metrics, autoSyncStatus, syncNow, configureAutoSync } = usePersistence() + const [autoSyncEnabled, setAutoSyncEnabled] = useState(false) + const [syncing, setSyncing] = useState(false) + + useEffect(() => { + dispatch(checkFlaskConnection()) + const interval = setInterval(() => { + dispatch(checkFlaskConnection()) + }, 10000) + + return () => clearInterval(interval) + }, [dispatch]) + + const handleSyncToFlask = async () => { + setSyncing(true) + try { + await dispatch(syncToFlaskBulk()).unwrap() + toast.success(copy.toasts.syncToSuccess) + } catch (error: any) { + toast.error(copy.toasts.syncFailed.replace('{{error}}', String(error))) + } finally { + setSyncing(false) + } + } + + const handleSyncFromFlask = async () => { + setSyncing(true) + try { + await dispatch(syncFromFlaskBulk()).unwrap() + toast.success(copy.toasts.syncFromSuccess) + } catch (error: any) { + toast.error(copy.toasts.syncFailed.replace('{{error}}', String(error))) + } finally { + setSyncing(false) + } + } + + const handleAutoSyncToggle = (enabled: boolean) => { + setAutoSyncEnabled(enabled) + configureAutoSync({ enabled, syncOnChange: true }) + toast.info(enabled ? copy.toasts.autoSyncEnabled : copy.toasts.autoSyncDisabled) + } + + const handleManualSync = async () => { + try { + await syncNow() + toast.success(copy.toasts.manualSyncSuccess) + } catch (error: any) { + toast.error(copy.toasts.manualSyncFailed.replace('{{error}}', String(error))) + } + } + + const handleCheckConnection = () => { + dispatch(checkFlaskConnection()) + } + + return { + status, + metrics, + autoSyncStatus, + autoSyncEnabled, + syncing, + handleSyncToFlask, + handleSyncFromFlask, + handleManualSync, + handleAutoSyncToggle, + handleCheckConnection, + } +}