feat: add service worker cache clearing functionality and update French translations

This commit is contained in:
Julien Froidefond
2025-04-03 10:42:19 +02:00
parent fff45628ba
commit 4c676cfd16
2 changed files with 48 additions and 3 deletions

View File

@@ -16,6 +16,7 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
const { t } = useTranslate();
const { toast } = useToast();
const [isCacheClearing, setIsCacheClearing] = useState(false);
const [isServiceWorkerClearing, setIsServiceWorkerClearing] = useState(false);
const [ttlConfig, setTTLConfig] = useState<TTLConfigData>(
initialTTLConfig || {
defaultTTL: 5,
@@ -56,6 +57,29 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
}
};
const handleClearServiceWorkerCache = async () => {
setIsServiceWorkerClearing(true);
try {
if ("serviceWorker" in navigator && "caches" in window) {
const cacheNames = await caches.keys();
await Promise.all(cacheNames.map((cacheName) => caches.delete(cacheName)));
toast({
title: t("settings.cache.title"),
description: t("settings.cache.messages.serviceWorkerCleared"),
});
}
} catch (error) {
console.error("Erreur lors de la suppression des caches:", error);
toast({
variant: "destructive",
title: t("settings.cache.error.title"),
description: t("settings.cache.error.serviceWorkerMessage"),
});
} finally {
setIsServiceWorkerClearing(false);
}
};
const handleTTLChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = event.target;
setTTLConfig((prev) => ({
@@ -225,6 +249,23 @@ export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
)}
</button>
</div>
<div className="flex gap-3">
<button
type="button"
onClick={handleClearServiceWorkerCache}
disabled={isServiceWorkerClearing}
className="flex-1 inline-flex items-center justify-center rounded-md bg-destructive px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
{isServiceWorkerClearing ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
{t("settings.cache.buttons.clearingServiceWorker")}
</>
) : (
t("settings.cache.buttons.clearServiceWorker")
)}
</button>
</div>
</form>
</div>
</div>

View File

@@ -126,16 +126,20 @@
"buttons": {
"saveTTL": "Sauvegarder les TTL",
"clear": "Vider le cache",
"clearing": "Suppression..."
"clearing": "Suppression...",
"clearServiceWorker": "Vider le cache du service worker",
"clearingServiceWorker": "Suppression du cache service worker..."
},
"messages": {
"ttlSaved": "La configuration des TTL a été sauvegardée avec succès",
"cleared": "Cache serveur supprimé avec succès"
"cleared": "Cache serveur supprimé avec succès",
"serviceWorkerCleared": "Cache du service worker supprimé avec succès"
},
"error": {
"title": "Erreur lors de la suppression du cache",
"message": "Une erreur est survenue lors de la suppression du cache",
"ttl": "Erreur lors de la sauvegarde de la configuration TTL"
"ttl": "Erreur lors de la sauvegarde de la configuration TTL",
"serviceWorkerMessage": "Une erreur est survenue lors de la suppression du cache du service worker"
}
}
},