story-research-zapwall/components/CacheUpdateManager.tsx
2026-01-14 01:32:48 +01:00

110 lines
3.5 KiB
TypeScript

import { useState } from 'react'
import { useRouter } from 'next/router'
import { nostrAuthService } from '@/lib/nostrAuth'
import { objectCache } from '@/lib/objectCache'
import { Button, Card, ErrorState } from './ui'
async function updateCache(): Promise<void> {
const state = nostrAuthService.getState()
if (!state.connected || !state.pubkey) {
throw new Error('Vous devez être connecté pour mettre à jour le cache')
}
await Promise.all([
objectCache.clear('author'),
objectCache.clear('series'),
objectCache.clear('publication'),
objectCache.clear('review'),
objectCache.clear('purchase'),
objectCache.clear('sponsoring'),
objectCache.clear('review_tip'),
])
const { swClient } = await import('@/lib/swClient')
const isReady = await swClient.isReady()
if (isReady) {
await swClient.startUserSync(state.pubkey)
} else {
throw new Error('Service Worker is not ready')
}
}
function SuccessMessage(): React.ReactElement {
return (
<div className="bg-green-900/20 border border-green-400/50 rounded-lg p-4 mb-4">
<p className="text-green-400">Cache mis à jour avec succès</p>
</div>
)
}
function NotConnectedMessage(): React.ReactElement {
return (
<div className="bg-yellow-900/20 border border-yellow-400/50 rounded-lg p-4 mb-4">
<p className="text-yellow-400">Vous devez être connecté pour mettre à jour le cache</p>
</div>
)
}
function createUpdateHandler(
setUpdating: (value: boolean) => void,
setError: (value: string | null) => void,
setSuccess: (value: boolean) => void,
router: ReturnType<typeof useRouter>
): () => Promise<void> {
return async (): Promise<void> => {
try {
setUpdating(true)
setError(null)
setSuccess(false)
await updateCache()
setSuccess(true)
// Wait a bit to show success message, then reload page
setTimeout(() => {
router.reload()
}, 1000)
} catch (e) {
const errorMessage = e instanceof Error ? e.message : 'Erreur lors de la mise à jour du cache'
setError(errorMessage)
console.error('Error updating cache:', e)
setUpdating(false)
}
}
}
export function CacheUpdateManager(): React.ReactElement {
const router = useRouter()
const [updating, setUpdating] = useState(false)
const [success, setSuccess] = useState(false)
const [error, setError] = useState<string | null>(null)
const handleUpdateCache = createUpdateHandler(setUpdating, setError, setSuccess, router)
const state = nostrAuthService.getState()
const isConnected = state.connected && state.pubkey
return (
<Card variant="default" className="bg-cyber-darker">
<h2 className="text-2xl font-bold text-neon-cyan mb-4">Mise à jour du cache</h2>
<p className="text-cyber-accent mb-4 text-sm">
Videz et re-synchronisez le cache IndexedDB avec les données depuis les relais Nostr.
Cela permet de récupérer les dernières versions de vos publications, séries et profil.
</p>
{error && <ErrorState message={error} />}
{success && <SuccessMessage />}
{!isConnected && <NotConnectedMessage />}
<Button
variant="primary"
onClick={() => {
void handleUpdateCache()
}}
disabled={updating || !isConnected}
loading={updating}
className="w-full"
>
{updating ? 'Mise à jour en cours...' : 'Mettre à jour le cache'}
</Button>
</Card>
)
}