From 8148da132dac55baecafb27415eba0e0b4fe83a5 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Mon, 11 Nov 2024 02:04:02 +0200
Subject: [PATCH] Refactor MachinesContainer: convert to TypeScript, implement
 SWR for data fetching, and update API routes

---
 ...inesContainer.js => MachinesContainer.tsx} | 30 +++++++++----------
 frontend/src/utils/api.js                     |  4 ++-
 2 files changed, 17 insertions(+), 17 deletions(-)
 rename frontend/src/features/machines/components/{MachinesContainer.js => MachinesContainer.tsx} (58%)

diff --git a/frontend/src/features/machines/components/MachinesContainer.js b/frontend/src/features/machines/components/MachinesContainer.tsx
similarity index 58%
rename from frontend/src/features/machines/components/MachinesContainer.js
rename to frontend/src/features/machines/components/MachinesContainer.tsx
index 46a09d1..e731139 100644
--- a/frontend/src/features/machines/components/MachinesContainer.js
+++ b/frontend/src/features/machines/components/MachinesContainer.tsx
@@ -1,32 +1,30 @@
-import React, { useContext, useEffect, useCallback, useState } from "react";
+import React, { useContext, useState } from "react";
 import { NetworkStateContext, NetworkDispatchContext } from "../../network/state/contexts";
 import MachinesListComponent from "./MachinesListComponent";
 import PageTitle from "../../../components/common/PageTitle";
 import { useTranslation } from "react-i18next";
 import ViewModeSelection, { ViewModes } from "./ViewModeSelection";
-import { routes, get } from "../../../utils/api";
+import { endpoints } from "../../../utils/api";
+import { useSWR, fetcher } from "units/swr";
+import { blip } from "utils";
+import { Machine } from "types";
 
-const MachinesContainer = () => {
+const MachinesContainer: React.FC = () => {
   const [viewMode, setViewMode] = useState(null);
 
   const state = useContext(NetworkStateContext);
   const dispatchActions = useContext(NetworkDispatchContext);
   const { t } = useTranslation();
 
-  const handleReadMachines = useCallback(async () => {
-    await get(routes.machines, {
-      onCompleted: machines => {
-        const data = Object.assign(machines, { loaded: true });
-        dispatchActions.onNetworkChange("machines", data);
-      }
-    });
-  }, [dispatchActions]);
-
-  useEffect(() => {
-    if (!state.network.machines.loaded) {
-      handleReadMachines();
+  const url = state.network.machines.loaded ? null : endpoints.network.machines;
+  useSWR<Machine[], Error>(url, fetcher, {
+    revalidateOnFocus: false,
+    onError: err => blip.error(err.message),
+    onSuccess: machines => {
+      const data = Object.assign(machines, { loaded: true });
+      dispatchActions.onNetworkChange("machines", data);
     }
-  }, [handleReadMachines, state.network.machines.loaded]);
+  });
 
   return (
     <>
diff --git a/frontend/src/utils/api.js b/frontend/src/utils/api.js
index 1b104b4..b9d84f9 100644
--- a/frontend/src/utils/api.js
+++ b/frontend/src/utils/api.js
@@ -10,11 +10,13 @@ const powerActionsRoute = `${apiHost}/resurrector`;
 const securityRoute = `${apiHost}/security`;
 
 const routes = {
-  machines: `${networkRoute}/machines`,
   wakeMachine: `${powerActionsRoute}/wake`,
   pingMachine: `${powerActionsRoute}/ping`,
   shutdownMachine: `${powerActionsRoute}/shutdown`,
   restartMachine: `${powerActionsRoute}/restart`,
+  network: {
+    machines: `${networkRoute}/machines`
+  },
   system: {
     version: `${systemRoute}/version`,
     releaseNotes: `${systemRoute}/release-notes`,