From 385f3522ad6bda9c143d389df224b1397bef4f19 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sat, 17 Apr 2021 18:28:04 +0300 Subject: [PATCH] refactor --- .../machines/components/MachineContainer.js | 53 +++++++++++++++++++ .../machines/components/MachinesContainer.js | 47 +--------------- .../machines/components/MachinesList.js | 8 ++- 3 files changed, 57 insertions(+), 51 deletions(-) create mode 100644 src/features/machines/components/MachineContainer.js diff --git a/src/features/machines/components/MachineContainer.js b/src/features/machines/components/MachineContainer.js new file mode 100644 index 0000000..bb5e723 --- /dev/null +++ b/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 ; +}; + +MachineContainer.propTypes = { + machine: PropTypes.object.isRequired +}; + +export default MachineContainer; diff --git a/src/features/machines/components/MachinesContainer.js b/src/features/machines/components/MachinesContainer.js index 0954e9c..368b8de 100644 --- a/src/features/machines/components/MachinesContainer.js +++ b/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 ( - - ); + return ; }; export default MachinesContainer; diff --git a/src/features/machines/components/MachinesList.js b/src/features/machines/components/MachinesList.js index 505ba53..20c6ebc 100644 --- a/src/features/machines/components/MachinesList.js +++ b/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 }) => { {machines.map(machine => ( - ))} @@ -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;