From ca388cb639f1113c13109eeb589e5a3068742b10 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Mon, 11 Nov 2024 01:29:07 +0200
Subject: [PATCH] Refactor cache reset functionality: replace old
 CacheSettingsContainer with TypeScript version, update SystemController to
 handle reset cache, and enhance SWR mutation fetcher.

---
 .../Controllers/SystemController.cs           |  3 ++-
 .../settings/system/CacheSettingsContainer.js | 22 ----------------
 .../system/CacheSettingsContainer.tsx         | 25 +++++++++++++++++++
 frontend/src/utils/swr.ts                     |  8 ++++--
 4 files changed, 33 insertions(+), 25 deletions(-)
 delete mode 100644 frontend/src/features/settings/system/CacheSettingsContainer.js
 create mode 100644 frontend/src/features/settings/system/CacheSettingsContainer.tsx

diff --git a/backend/src/api/NetworkResurrector.Api/Controllers/SystemController.cs b/backend/src/api/NetworkResurrector.Api/Controllers/SystemController.cs
index 2964d54..d793932 100644
--- a/backend/src/api/NetworkResurrector.Api/Controllers/SystemController.cs
+++ b/backend/src/api/NetworkResurrector.Api/Controllers/SystemController.cs
@@ -44,8 +44,9 @@ namespace NetworkResurrector.Api.Controllers
 
         [HttpPost("reset-cache")]
         [Authorize(Policy = Policies.SystemAdministration)]
-        public async Task<IActionResult> WakeMachine([FromBody] ResetCache resetCache)
+        public async Task<IActionResult> ResetCache()
         {
+            var resetCache = new ResetCache();
             var result = await _mediator.Send(resetCache);
             return Ok(result);
         }
diff --git a/frontend/src/features/settings/system/CacheSettingsContainer.js b/frontend/src/features/settings/system/CacheSettingsContainer.js
deleted file mode 100644
index 3e94592..0000000
--- a/frontend/src/features/settings/system/CacheSettingsContainer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { useCallback } from "react";
-import CacheSettingsComponent from "./CacheSettingsComponent";
-import { useTranslation } from "react-i18next";
-import { routes, post } from "utils/api";
-import { blip } from "utils";
-
-const CacheSettingsContainer = () => {
-  const { t } = useTranslation();
-  const handleResetCache = useCallback(async () => {
-    await post(
-      routes.resetCache,
-      {},
-      {
-        onCompleted: () => blip.info(t("Settings.Cache.ResetInfo"))
-      }
-    );
-  }, [t]);
-
-  return <CacheSettingsComponent onResetCache={handleResetCache} />;
-};
-
-export default CacheSettingsContainer;
diff --git a/frontend/src/features/settings/system/CacheSettingsContainer.tsx b/frontend/src/features/settings/system/CacheSettingsContainer.tsx
new file mode 100644
index 0000000..8ec88a8
--- /dev/null
+++ b/frontend/src/features/settings/system/CacheSettingsContainer.tsx
@@ -0,0 +1,25 @@
+import React, { useCallback } from "react";
+import CacheSettingsComponent from "./CacheSettingsComponent";
+import { useTranslation } from "react-i18next";
+import { endpoints } from "utils/api";
+import { blip } from "utils";
+import useSWRMutation from "swr/mutation";
+import { Key } from "swr";
+import { mutationFetcher } from "utils/swr";
+
+const CacheSettingsContainer: React.FC = () => {
+  const { t } = useTranslation();
+
+  const { trigger } = useSWRMutation<void, Error, Key, void>(endpoints.system.resetCache, mutationFetcher<void>, {
+    onError: err => {
+      blip.error(err.message);
+    },
+    onSuccess: () => blip.info(t("Settings.Cache.ResetInfo"))
+  });
+
+  const handleResetCache = useCallback(() => trigger(), [t]);
+
+  return <CacheSettingsComponent onResetCache={handleResetCache} />;
+};
+
+export default CacheSettingsContainer;
diff --git a/frontend/src/utils/swr.ts b/frontend/src/utils/swr.ts
index 2c718f3..a407355 100644
--- a/frontend/src/utils/swr.ts
+++ b/frontend/src/utils/swr.ts
@@ -23,10 +23,14 @@ const getHeaders = (): HeadersInit => {
 const fetcher = (url: string) => fetch(url, { method: "GET", headers: getHeaders() }).then(res => res.json());
 
 async function mutationFetcher<Command>(url: string, { arg }: { arg: Command }) {
+  const hasBody = arg !== undefined && arg !== null;
+  const headers = getHeaders();
+  const body = hasBody ? JSON.stringify(arg) : undefined;
+
   return fetch(url, {
     method: "POST",
-    headers: getHeaders(),
-    body: JSON.stringify(arg)
+    headers,
+    body
   }).then(res => res.json());
 }