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,12 +58,12 @@ 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 },
     {
-        onCompleted: (result: any) => {
+      onError: err => blip.error(err.message),
+      onSuccess: result => {
         setState(prev => ({ ...prev, on: result.success }));
         log(`[Wake]: Success: ${result.success}. Status: ${result.status}`);
         if (result.success) {
@@ -79,7 +80,6 @@ const WakeComponent: React.FC<Props> = ({ machine, addLog, disabled }) => {
       }
     }
   );
-  }, [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: {