changed accordion with table

src/features/network/components/MachineItem.js

@@ -0,0 +1,63 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { TableCell, TableRow, IconButton } from "@material-ui/core";
+import Collapse from "@material-ui/core/Collapse";
+import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
+import { makeStyles } from "@material-ui/core/styles";
+import MachineLog from "./MachineLog";
+
+const useRowStyles = makeStyles({
+  root: {
+    "& > *": {
+      borderBottom: "unset"
+    }
+  }
+});
+
+const MachineItem = ({ machine }) => {
+  const [open, setOpen] = React.useState(false);
+  const classes = useRowStyles();
+
+  return (
+    <React.Fragment>
+      <TableRow className={classes.root}>
+        <TableCell>
+          <IconButton
+            aria-label="expand row"
+            size="small"
+            onClick={() => setOpen(!open)}
+          >
+            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+          </IconButton>
+        </TableCell>
+        <TableCell component="th" scope="row">
+          {machine.fullMachineName}
+        </TableCell>
+        <TableCell>{machine.machineName}</TableCell>
+        <TableCell>{machine.iPv4Address}</TableCell>
+        <TableCell align="right">{"buttons"}</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <MachineLog />
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </React.Fragment>
+  );
+};
+
+MachineItem.propTypes = {
+  machine: PropTypes.shape({
+    machineId: PropTypes.number.isRequired,
+    machineName: PropTypes.string.isRequired,
+    fullMachineName: PropTypes.string.isRequired,
+    macAddress: PropTypes.string.isRequired,
+    iPv4Address: PropTypes.string,
+    description: PropTypes.string
+  }).isRequired
+};
+
+export default MachineItem;

src/features/network/components/MachineLog.js

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography
+} from "@material-ui/core";
+import Box from "@material-ui/core/Box";
+
+const MachineLog = () => {
+  const history = [
+    { date: "2020-01-05", customerId: "11091700", amount: 3 },
+    { date: "2020-01-02", customerId: "Anonymous", amount: 1 }
+  ];
+  return (
+    <Box margin={1}>
+      <Typography variant="h6" gutterBottom component="div">
+        History
+      </Typography>
+      <Table size="small" aria-label="purchases">
+        <TableHead>
+          <TableRow>
+            <TableCell>Date</TableCell>
+            <TableCell>Customer</TableCell>
+            <TableCell align="right">Amount</TableCell>
+            <TableCell align="right">Total price ($)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {history.map(historyRow => (
+            <TableRow key={historyRow.date}>
+              <TableCell component="th" scope="row">
+                {historyRow.date}
+              </TableCell>
+              <TableCell>{historyRow.customerId}</TableCell>
+              <TableCell align="right">{historyRow.amount}</TableCell>
+              <TableCell align="right">
+                {Math.round(historyRow.amount * 5 * 100) / 100}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+};
+
+export default MachineLog;

src/features/network/components/MachinesList.js

@@ -1,46 +1,44 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import {
-import Accordion from "@material-ui/core/Accordion";
+  Table,
-import AccordionSummary from "@material-ui/core/AccordionSummary";
+  TableBody,
-import AccordionDetails from "@material-ui/core/AccordionDetails";
+  TableCell,
-import Typography from "@material-ui/core/Typography";
+  TableContainer,
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+  TableHead,
-
+  TableRow
-const useStyles = makeStyles(theme => ({
+} from "@material-ui/core";
-  heading: {
+import Paper from "@material-ui/core/Paper";
-    fontSize: theme.typography.pxToRem(15),
+import MachineItem from "./MachineItem";
-    fontWeight: theme.typography.fontWeightRegular
-  }
-}));
-
-const MachinesList = ({ machines }) => {
-  const classes = useStyles();
 
+const MachinesList = ({ dense, machines }) => {
   return (
-    <div>
+    <TableContainer component={Paper}>
-      {machines.map(m => (
+      <Table aria-label="collapsible table" size={dense ? "small" : "medium"}>
-        <Accordion key={`machine-${m.machineId}`}>
+        <TableHead>
-          <AccordionSummary
+          <TableRow>
-            expandIcon={<ExpandMoreIcon />}
+            <TableCell />
-            id={`machine-${m.machineId}-summary`}
+            <TableCell>Full machine name</TableCell>
-          >
+            <TableCell>Machine name</TableCell>
-            <Typography className={classes.heading}>{m.machineName}</Typography>
+            <TableCell>IP</TableCell>
-          </AccordionSummary>
+            <TableCell align="right">Actions</TableCell>
-          <AccordionDetails>
+          </TableRow>
-            <Typography>
+        </TableHead>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <TableBody>
-              Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
+          {machines.map(machine => (
-              eget.
+            <MachineItem
-            </Typography>
+              key={`machine-${machine.machineId}`}
-          </AccordionDetails>
+              machine={machine}
-        </Accordion>
+            />
           ))}
-    </div>
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 };
 
 MachinesList.propTypes = {
+  dense: PropTypes.bool.isRequired,
   machines: PropTypes.array.isRequired
 };
 

src/features/network/components/NetworkComponent.js

@@ -12,7 +12,7 @@ const NetworkComponent = ({ network, onPropertyChange }) => {
 
   return (
     <div className={classes.root}>
-      <MachinesList machines={network.machines} />
+      <MachinesList dense={true} machines={network.machines} />
       <br />
       <TextField
         id="ertet"

src/features/network/components/NetworkContainer.js

@@ -15,14 +15,16 @@ const NetworkContainer = () => {
   };
 
   const handleReadMachines = useCallback(async () => {
-    alert("rad");
     const machines = await readMachines();
-    dispatchActions.onNetworkChange("machines", machines);
+    const data = Object.assign(machines, { loaded: true });
+    dispatchActions.onNetworkChange("machines", data);
   }, [dispatchActions]);
 
   useEffect(() => {
+    if (!state.network.machines.loaded) {
       handleReadMachines();
-  }, [handleReadMachines]);
+    }
+  }, [handleReadMachines, state.network.machines.loaded]);
 
   return (
     <NetworkComponent network={state.network} onPropertyChange={handleChange} />

src/state/initialState.js

@@ -15,7 +15,7 @@ export const initialState = {
     }
   },
   network: {
-    machines: [],
+    machines: Object.assign([], { loaded: false }),
     test: ""
   }
 };