network component

src/features/network/components/NetworkComponent.js

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { TextField, Button } from "@material-ui/core";
+import MachinesList from "./MachinesList";
+import { makeStyles } from "@material-ui/core/styles";
+import styles from "../styles";
+
+const useStyles = makeStyles(styles);
+
+const NetworkComponent = ({ network, onPropertyChange, onReadMachines }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <div>NetworkContainer</div>
+      <MachinesList />
+      <TextField
+        id="ertet"
+        label="Test"
+        onChange={onPropertyChange("test")}
+        value={network.test}
+      />
+      <Button variant="contained" color="primary" onClick={onReadMachines}>
+        Read machines
+      </Button>
+    </div>
+  );
+};
+
+NetworkComponent.propTypes = {
+  network: PropTypes.object.isRequired,
+  onPropertyChange: PropTypes.func.isRequired
+};
+
+export default NetworkComponent;

src/features/network/components/NetworkContainer.js

@@ -1,11 +1,10 @@
 import React, { useContext } from "react";
-import { TextField, Button } from "@material-ui/core";
 import {
   ApplicationStateContext,
   ApplicationDispatchContext
 } from "../../../state/ApplicationContexts";
 import { readMachines } from "../api";
-import MachinesList from "./MachinesList";
+import NetworkComponent from "./NetworkComponent";
 
 const NetworkContainer = () => {
   const state = useContext(ApplicationStateContext);
@@ -21,19 +20,11 @@ const NetworkContainer = () => {
   };
 
   return (
-    <>
-      <div>NetworkContainer</div>
-      <MachinesList />
-      <TextField
-        id="ertet"
-        label="Test"
-        onChange={handleChange("test")}
-        value={state.network.test}
+    <NetworkComponent
+      network={state.network}
+      onPropertyChange={handleChange}
+      onReadMachines={handleReadMachines}
     />
-      <Button variant="contained" color="primary" onClick={handleReadMachines}>
-        Read machines
-      </Button>
-    </>
   );
 };
 

src/features/network/styles.js

@@ -0,0 +1,7 @@
+const styles = () => ({
+  root: {
+    margin: "15px"
+  }
+});
+
+export default styles;