Refactor MachineContainer and WakeComponent: implement usePingTrigger for pinging machines, update action result types, and clean up API calls

frontend/src/features/machines/components/MachineContainer.tsx

@@ -5,9 +5,17 @@ import { ViewModes } from "./ViewModeSelection";
 import { blip } from "../../../utils";
 import { LastPage, RotateLeft, Launch, Stop } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
-import { routes, post, endpoints } from "../../../utils/api";
-import { Machine, MachineRestarted, MachineShutdown, RestartMachine, ShutdownMachine } from "types";
+import { endpoints } from "../../../utils/api";
+import {
+  Machine,
+  MachineActionResult,
+  MachineRestarted,
+  MachineShutdown,
+  RestartMachine,
+  ShutdownMachine
+} from "types";
 import { Key, mutationFetcher, useSWRMutation } from "units/swr";
+import { usePingTrigger } from "../hooks";
 
 type Props = {
   machine: Machine;
@@ -25,7 +33,7 @@ const MachineContainer: React.FC<Props> = ({ machine, viewMode }) => {
   );
 
   const manageActionResponse = useCallback(
-    (response: any) => {
+    (response: MachineActionResult) => {
       addLog(`Success: ${response.success}. Status: ${response.status}`);
       if (response.success) {
         blip.success(response.status);
@@ -36,6 +44,10 @@ const MachineContainer: React.FC<Props> = ({ machine, viewMode }) => {
     [addLog]
   );
 
+  const { pingMachineTrigger } = usePingTrigger({
+    onSuccess: manageActionResponse
+  });
+
   const { trigger: shutdownMachineTrigger } = useSWRMutation<MachineShutdown, Error, Key, ShutdownMachine>(
     endpoints.network.machine.shutdown,
     mutationFetcher<ShutdownMachine>,
@@ -55,16 +67,8 @@ const MachineContainer: React.FC<Props> = ({ machine, viewMode }) => {
   );
 
   const pingMachine = useCallback(
-    async (machine: Machine) => {
-      await post(
-        routes.pingMachine,
-        { machineId: machine.machineId },
-        {
-          onCompleted: manageActionResponse
-        }
-      );
-    },
-    [manageActionResponse]
+    async (machine: Machine) => pingMachineTrigger({ machineId: machine.machineId }),
+    [pingMachineTrigger]
   );
 
   const shutdownMachine = useCallback(

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

@@ -6,6 +6,7 @@ import { blip } from "../../../../utils";
 import { msToMinAndSec } from "../../../../utils/time";
 import { routes, post } from "../../../../utils/api";
 import { Machine } from "types";
+import { usePingTrigger } from "../../hooks";
 
 const initialState = { on: false };
 const defaultPingInterval = 1200000; //20 minutes
@@ -39,6 +40,22 @@ const WakeComponent: React.FC<Props> = ({ machine, addLog, disabled }) => {
     [addLog, getCurrentDateTime]
   );
 
+  const { pingMachineTrigger } = usePingTrigger({
+    onSuccess: result => {
+      setState(prev => ({ ...prev, on: result.success }));
+      log(`[Ping]: Success: ${result.success}. Status: ${result.status}`);
+
+      // if (result.success) {
+      //   setTimeout(() => {
+      //     setTrigger(prev => !prev);
+      //   }, pingInterval);
+      // }
+    },
+    onError: () => {
+      // to do: handle error
+    }
+  });
+
   const wakeMachine = useCallback(async () => {
     await post(
       routes.wakeMachine,
@@ -65,25 +82,7 @@ const WakeComponent: React.FC<Props> = ({ machine, addLog, disabled }) => {
 
   const pingInLoop = useCallback(async () => {
     if (disabled) return;
-    await post(
-      routes.pingMachine,
-      { machineId: machine.machineId },
-      {
-        onCompleted: (result: any) => {
-          setState(prev => ({ ...prev, on: result.success }));
-          log(`[Ping]: Success: ${result.success}. Status: ${result.status}`);
-
-          // if (result.success) {
-          //   setTimeout(() => {
-          //     setTrigger(prev => !prev);
-          //   }, pingInterval);
-          // }
-        },
-        onError: () => {
-          // to do: handle error
-        }
-      }
-    );
+    pingMachineTrigger({ machineId: machine.machineId });
   }, [machine, log, pingInterval, disabled]);
 
   useEffect(() => {

frontend/src/features/machines/hooks/index.ts

@@ -0,0 +1,3 @@
+import usePingTrigger from "./usePingTrigger";
+
+export { usePingTrigger };

frontend/src/features/machines/hooks/usePingTrigger.ts

@@ -0,0 +1,25 @@
+import { useMemo } from "react";
+import { MachinePinged, PingMachine } from "types";
+import { Key, mutationFetcher, useSWRMutation } from "units/swr";
+import { blip } from "utils";
+import { endpoints } from "utils/api";
+
+type PingTriggerOptions = {
+  onSuccess: (response: MachinePinged) => void;
+  onError?: (error: Error) => void;
+};
+const usePingTrigger = (options: PingTriggerOptions) => {
+  const { onSuccess } = options;
+  const onError = useMemo(() => options.onError || ((error: Error) => blip.error(error.message)), [options.onError]);
+
+  const { trigger: pingMachineTrigger } = useSWRMutation<MachinePinged, Error, Key, PingMachine>(
+    endpoints.network.machine.ping,
+    mutationFetcher<PingMachine>,
+    {
+      onError,
+      onSuccess
+    }
+  );
+  return { pingMachineTrigger };
+};
+export default usePingTrigger;

frontend/src/types/commands.ts

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

frontend/src/types/events.ts

@@ -1,9 +1,10 @@
-export type MachineShutdown = {
+export type MachineActionResult = {
   success: boolean;
   status: string;
 };
 
-export type MachineRestarted = {
-  success: boolean;
-  status: string;
-};
+export type MachinePinged = MachineActionResult;
+
+export type MachineShutdown = MachineActionResult;
+
+export type MachineRestarted = MachineActionResult;

frontend/src/utils/api.js

@@ -11,8 +11,6 @@ const securityRoute = `${apiHost}/security`;
 
 const routes = {
   wakeMachine: `${powerActionsRoute}/wake`,
-  pingMachine: `${powerActionsRoute}/ping`,
-
   network: {
     machines: `${networkRoute}/machines`,
     machine: {