refactor

src/features/machines/components/MachineContainer.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import MachineItem from "./MachineItem";
+import * as api from "../api";
+import { useToast } from "../../../hooks";
+import { PowerSettingsNew, LastPage } from "@material-ui/icons";
+
+const MachineContainer = ({ machine }) => {
+  const { success, error } = useToast();
+
+  const wakeMachine = machine => async () => {
+    const result = await api.wakeMachine(machine.macAddress);
+    if (result.success) {
+      success(result.status);
+    } else {
+      error(result.status);
+    }
+  };
+
+  const pingMachine = machine => async () => {
+    const result = await api.pingMachine(
+      machine.iPv4Address || machine.machineName
+    );
+    if (result.success) {
+      success(result.status);
+    } else {
+      error(result.status);
+    }
+  };
+
+  const actions = [
+    {
+      code: "wake",
+      effect: wakeMachine,
+      icon: PowerSettingsNew,
+      tooltip: "Wake"
+    },
+    {
+      code: "ping",
+      effect: pingMachine,
+      icon: LastPage,
+      tooltip: "Ping"
+    }
+  ];
+
+  return <MachineItem machine={machine} actions={actions} />;
+};
+
+MachineContainer.propTypes = {
+  machine: PropTypes.object.isRequired
+};
+
+export default MachineContainer;

src/features/machines/components/MachinesContainer.js

@@ -5,69 +5,24 @@ import {
 } from "../../../state/ApplicationContexts";
 import * as api from "../api";
 import MachinesList from "./MachinesList";
-import { PowerSettingsNew, LastPage } from "@material-ui/icons";
-import { useToast } from "../../../hooks";
 
 const MachinesContainer = () => {
   const state = useContext(ApplicationStateContext);
   const dispatchActions = useContext(ApplicationDispatchContext);
 
-  const { success, error } = useToast();
-
   const handleReadMachines = useCallback(async () => {
     const machines = await api.readMachines();
     const data = Object.assign(machines, { loaded: true });
     dispatchActions.onNetworkChange("machines", data);
   }, [dispatchActions]);
 
-  const wakeMachine = machine => async () => {
-    const result = await api.wakeMachine(machine.macAddress);
-    if (result.success) {
-      success(result.status);
-    } else {
-      error(result.status);
-    }
-  };
-
-  const pingMachine = machine => async () => {
-    const result = await api.pingMachine(
-      machine.iPv4Address || machine.machineName
-    );
-    if (result.success) {
-      success(result.status);
-    } else {
-      error(result.status);
-    }
-  };
-
-  const actions = [
-    {
-      code: "wake",
-      effect: wakeMachine,
-      icon: PowerSettingsNew,
-      tooltip: "Wake"
-    },
-    {
-      code: "ping",
-      effect: pingMachine,
-      icon: LastPage,
-      tooltip: "Ping"
-    }
-  ];
-
   useEffect(() => {
     if (!state.network.machines.loaded) {
       handleReadMachines();
     }
   }, [handleReadMachines, state.network.machines.loaded]);
 
-  return (
-    <MachinesList
-      dense={true}
-      machines={state.network.machines}
-      actions={actions}
-    />
-  );
+  return <MachinesList dense={true} machines={state.network.machines} />;
 };
 
 export default MachinesContainer;

src/features/machines/components/MachinesList.js

@@ -9,7 +9,7 @@ import {
   TableRow
 } from "@material-ui/core";
 import Paper from "@material-ui/core/Paper";
-import MachineItem from "./MachineItem";
+import MachineContainer from "./MachineContainer";
 
 const MachinesList = ({ dense, machines, actions }) => {
   return (
@@ -26,10 +26,9 @@ const MachinesList = ({ dense, machines, actions }) => {
         </TableHead>
         <TableBody>
           {machines.map(machine => (
-            <MachineItem
+            <MachineContainer
               key={`machine-${machine.machineId}`}
               machine={machine}
-              actions={actions}
             />
           ))}
         </TableBody>
@@ -40,8 +39,7 @@ const MachinesList = ({ dense, machines, actions }) => {
 
 MachinesList.propTypes = {
   dense: PropTypes.bool.isRequired,
-  machines: PropTypes.array.isRequired,
-  actions: PropTypes.array.isRequired
+  machines: PropTypes.array.isRequired
 };
 
 export default MachinesList;