From 8d2aa51f2b983a2a34fe6bd3271db5ac585f3661 Mon Sep 17 00:00:00 2001
From: Tagaishi <tagaishi@hotmail.ch>
Date: Thu, 24 Aug 2023 00:06:14 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20Cache=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../en/settings/general/cache-buttons.json    | 24 ++++++++++++
 .../Settings/Common/CacheButtons.tsx          | 37 +++++++++++--------
 src/tools/server/translation-namespaces.ts    |  3 +-
 3 files changed, 48 insertions(+), 16 deletions(-)
 create mode 100644 public/locales/en/settings/general/cache-buttons.json

diff --git a/public/locales/en/settings/general/cache-buttons.json b/public/locales/en/settings/general/cache-buttons.json
new file mode 100644
index 000000000..d52609075
--- /dev/null
+++ b/public/locales/en/settings/general/cache-buttons.json
@@ -0,0 +1,24 @@
+{
+  "title": "Cache cleaning",
+  "selector": {
+    "label": "Select the cache(s) to clear",
+    "data": {
+      "ping": "Ping queries",
+      "repositoryIcons": "Remote/Local icons",
+      "calendar&medias": "Medias from the Calendar",
+      "weather": "Weather data"
+    }
+  },
+  "buttons": {
+    "notificationTitle": "Cache Cleared",
+    "clearAll":{
+      "text": "Clear all cache",
+      "notificationMessage": "All cache has been cleared"
+    },
+    "clearSelect":{
+      "text": "Clear selected queries",
+      "notificationMessageSingle": "Cache for {{value}} has been cleared",
+      "notificationMessageMulti": "Cache for {{values}} have been cleared"
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/Settings/Common/CacheButtons.tsx b/src/components/Settings/Common/CacheButtons.tsx
index eb35ae99c..409ededfc 100644
--- a/src/components/Settings/Common/CacheButtons.tsx
+++ b/src/components/Settings/Common/CacheButtons.tsx
@@ -4,25 +4,29 @@ import { IconTrash } from '@tabler/icons-react';
 import { useState } from 'react';
 
 import { queryClient } from '../../../tools/server/configurations/tanstack/queryClient.tool';
-
-const data = [
-  { value: 'ping', label: 'Ping queries' },
-  { value: 'repository-icons', label: 'Remote/Local icons' },
-  { value: 'calendar/medias', label: 'Medais from the Calendar' },
-  { value: 'weather', label: 'Weather data' },
-];
+import { useTranslation } from 'react-i18next';
 
 export function CacheButtons() {
   const [value, setValue] = useState<string[]>([]);
+
+  const { t } = useTranslation('settings/general/cache-buttons')
+
+  const data = [
+    { value: 'ping', label: t('selector.data.ping') },
+    { value: 'repository-icons', label: t('selector.data.repositoryIcons') },
+    { value: 'calendar/medias', label: t('selector.data.calendar&medias') },
+    { value: 'weather', label: t('selector.data.weather') },
+  ];
+
   return (
     <Stack spacing="xs">
-      <Title order={4}>Cache cleaning</Title>
+      <Title order={4}>{t('title')}</Title>
       <MultiSelect
         value={value}
         searchable
         onChange={setValue}
         data={data}
-        label="Select the cache(s) to clear"
+        label={t('selector.label')}
       />
       <Group>
         <Button
@@ -31,8 +35,11 @@ export function CacheButtons() {
           onClick={() =>
             queryClient.invalidateQueries(value).then(() =>
               notifications.show({
-                title: 'Cache cleared',
-                message: `Cache for ${value.join(', ')} has been cleared`,
+                title: t('buttons.notificationTitle'),
+                message:
+                  value.length > 1 ?
+                  t('buttons.clearSelect.notificationMessageMulti', {values: value.join(', ')}) :
+                  t('buttons.clearSelect.notificationMessageSingle', {value: value[0]}),
                 color: 'teal',
                 icon: <IconTrash />,
                 autoClose: 5000,
@@ -40,14 +47,14 @@ export function CacheButtons() {
             )
           }
         >
-          Clear selected queries
+          {t('buttons.clearSelect.text')}
         </Button>
         <Button
           onClick={() =>
             queryClient.invalidateQueries().then(() =>
               notifications.show({
-                title: 'Cache cleared',
-                message: 'All cache has been cleared',
+                title: t('buttons.notificationTitle'),
+                message: t('buttons.clearAll.notificationMessage'),
                 color: 'teal',
                 icon: <IconTrash />,
                 autoClose: 5000,
@@ -55,7 +62,7 @@ export function CacheButtons() {
             )
           }
         >
-          Clear all cache
+          {t('buttons.clearAll.text')}
         </Button>
       </Group>
     </Stack>
diff --git a/src/tools/server/translation-namespaces.ts b/src/tools/server/translation-namespaces.ts
index 73e464e5d..e9d399316 100644
--- a/src/tools/server/translation-namespaces.ts
+++ b/src/tools/server/translation-namespaces.ts
@@ -8,11 +8,12 @@ export const dashboardNamespaces = [
   'layout/header/actions/toggle-edit-mode',
   'layout/mobile/drawer',
   'settings/common',
-  'settings/general/theme-selector',
+  'settings/general/cache-buttons',
   'settings/general/config-changer',
   'settings/general/edit-mode-toggle',
   'settings/general/internationalization',
   'settings/general/search-engine',
+  'settings/general/theme-selector',
   'settings/general/widget-positions',
   'settings/customization/accessibility',
   'settings/customization/general',