Refactor WakeComponent: integrate useSWRMutation for waking machines, update API endpoint usage, and enhance type definitions

frontend/src/features/machines/components/common/WakeComponent.tsx

@@ -4,9 +4,10 @@ import { PowerSettingsNew } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import { blip } from "../../../../utils";
 import { msToMinAndSec } from "../../../../utils/time";
-import { routes, post } from "../../../../utils/api";
+import { endpoints } from "../../../../utils/api";
-import { Machine } from "types";
+import { Machine, MachineWaked, WakeMachine } from "types";
 import { usePingTrigger } from "../../hooks";
+import { Key, mutationFetcher, useSWRMutation } from "units/swr";
 
 const initialState = { on: false };
 const defaultPingInterval = 1200000; //20 minutes
@@ -57,29 +58,28 @@ const WakeComponent: React.FC<Props> = ({ machine, addLog, disabled }) => {
     }
   });
 
-  const wakeMachine = useCallback(async () => {
+  const { trigger: wakeMachineTrigger } = useSWRMutation<MachineWaked, Error, Key, WakeMachine>(
-    await post(
+    endpoints.network.machine.wake,
-      routes.wakeMachine,
+    mutationFetcher<WakeMachine>,
-      { machineId: machine.machineId },
+    {
-      {
+      onError: err => blip.error(err.message),
-        onCompleted: (result: any) => {
+      onSuccess: result => {
-          setState(prev => ({ ...prev, on: result.success }));
+        setState(prev => ({ ...prev, on: result.success }));
-          log(`[Wake]: Success: ${result.success}. Status: ${result.status}`);
+        log(`[Wake]: Success: ${result.success}. Status: ${result.status}`);
-          if (result.success) {
+        if (result.success) {
-            blip.success(result.status);
+          blip.success(result.status);
 
-            //retrigger
+          //retrigger
-            log(`Periodic ping will be re-triggered in ${startingTime} ms [${msToMinAndSec(startingTime)}]`);
+          log(`Periodic ping will be re-triggered in ${startingTime} ms [${msToMinAndSec(startingTime)}]`);
-            // setTimeout(() => {
+          // setTimeout(() => {
-            //   setTrigger(prev => !prev);
+          //   setTrigger(prev => !prev);
-            // }, startingTime);
+          // }, startingTime);
-          } else {
+        } else {
-            blip.error(result.status);
+          blip.error(result.status);
-          }
         }
       }
-    );
+    }
-  }, [log, machine.machineId]);
+  );
 
   const pingMachine = useCallback(async () => {
     if (disabled) return;
@@ -90,8 +90,8 @@ const WakeComponent: React.FC<Props> = ({ machine, addLog, disabled }) => {
     pingMachine();
   }, [trigger, pingMachine]);
 
-  const handleWakeClick = (event: any) => {
+  const handleWakeClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    wakeMachine();
+    wakeMachineTrigger({ machineId: machine.machineId });
     event.stopPropagation();
   };
 

frontend/src/types/commands.ts

@@ -1,3 +1,7 @@
+export type WakeMachine = {
+  machineId: number;
+};
+
 export type PingMachine = {
   machineId: number;
 };

frontend/src/types/events.ts

@@ -3,8 +3,7 @@ export type MachineActionResult = {
   status: string;
 };
 
+export type MachineWaked = MachineActionResult;
 export type MachinePinged = MachineActionResult;
-
 export type MachineShutdown = MachineActionResult;
-
 export type MachineRestarted = MachineActionResult;

frontend/src/utils/api.js

@@ -10,7 +10,6 @@ const powerActionsRoute = `${apiHost}/resurrector`;
 const securityRoute = `${apiHost}/security`;
 
 const routes = {
-  wakeMachine: `${powerActionsRoute}/wake`,
   network: {
     machines: `${networkRoute}/machines`,
     machine: {