handleReadMachines

src/features/network/components/MachinesList.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
 import Accordion from "@material-ui/core/Accordion";
 import AccordionSummary from "@material-ui/core/AccordionSummary";
@@ -7,63 +8,40 @@ import Typography from "@material-ui/core/Typography";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    width: "100%"
-  },
   heading: {
     fontSize: theme.typography.pxToRem(15),
     fontWeight: theme.typography.fontWeightRegular
   }
 }));
 
-const MachinesList = () => {
+const MachinesList = ({ machines }) => {
   const classes = useStyles();
 
   return (
-    <div className={classes.root}>
-      <Accordion>
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1a-content"
-          id="panel1a-header"
-        >
-          <Typography className={classes.heading}>Accordion 1</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget.
-          </Typography>
-        </AccordionDetails>
-      </Accordion>
-      <Accordion>
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel2a-content"
-          id="panel2a-header"
-        >
-          <Typography className={classes.heading}>Accordion 2</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            malesuada lacus ex, sit amet blandit leo lobortis eget.
-          </Typography>
-        </AccordionDetails>
-      </Accordion>
-      <Accordion disabled>
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel3a-content"
-          id="panel3a-header"
-        >
-          <Typography className={classes.heading}>
-            Disabled Accordion
-          </Typography>
-        </AccordionSummary>
-      </Accordion>
+    <div>
+      {machines.map(m => (
+        <Accordion key={`machine-${m.machineId}`}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            id={`machine-${m.machineId}-summary`}
+          >
+            <Typography className={classes.heading}>{m.machineName}</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Typography>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
+              eget.
+            </Typography>
+          </AccordionDetails>
+        </Accordion>
+      ))}
     </div>
   );
 };
 
+MachinesList.propTypes = {
+  machines: PropTypes.array.isRequired
+};
+
 export default MachinesList;

src/features/network/components/NetworkComponent.js

@@ -7,20 +7,22 @@ import styles from "../styles";
 
 const useStyles = makeStyles(styles);
 
-const NetworkComponent = ({ network, onPropertyChange, onReadMachines }) => {
+const NetworkComponent = ({ network, onPropertyChange }) => {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
-      <div>NetworkContainer</div>
-      <MachinesList />
+      <MachinesList machines={network.machines} />
+      <br />
       <TextField
         id="ertet"
         label="Test"
         onChange={onPropertyChange("test")}
         value={network.test}
       />
-      <Button variant="contained" color="primary" onClick={onReadMachines}>
+      <br />
+      <br />
+      <Button variant="contained" color="primary">
         Read machines
       </Button>
     </div>

src/features/network/components/NetworkContainer.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useCallback } from "react";
 import {
   ApplicationStateContext,
   ApplicationDispatchContext
@@ -14,17 +14,18 @@ const NetworkContainer = () => {
     dispatchActions.onNetworkChange(prop, event.target.value);
   };
 
-  const handleReadMachines = async () => {
+  const handleReadMachines = useCallback(async () => {
+    alert("rad");
     const machines = await readMachines();
     dispatchActions.onNetworkChange("machines", machines);
-  };
+  }, [dispatchActions]);
+
+  useEffect(() => {
+    handleReadMachines();
+  }, [handleReadMachines]);
 
   return (
-    <NetworkComponent
-      network={state.network}
-      onPropertyChange={handleChange}
-      onReadMachines={handleReadMachines}
-    />
+    <NetworkComponent network={state.network} onPropertyChange={handleChange} />
   );
 };