From 13ab8266c9bc42372065a4486b39e8094cd1a9e9 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Fri, 16 Apr 2021 02:04:29 +0300
Subject: [PATCH] network component

---
 .../network/components/NetworkComponent.js    | 35 +++++++++++++++++++
 .../network/components/NetworkContainer.js    | 21 ++++-------
 src/features/network/styles.js                |  7 ++++
 3 files changed, 48 insertions(+), 15 deletions(-)
 create mode 100644 src/features/network/components/NetworkComponent.js
 create mode 100644 src/features/network/styles.js

diff --git a/src/features/network/components/NetworkComponent.js b/src/features/network/components/NetworkComponent.js
new file mode 100644
index 0000000..1c1ca56
--- /dev/null
+++ b/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;
diff --git a/src/features/network/components/NetworkContainer.js b/src/features/network/components/NetworkContainer.js
index bfc99a5..277c499 100644
--- a/src/features/network/components/NetworkContainer.js
+++ b/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}
-      />
-      <Button variant="contained" color="primary" onClick={handleReadMachines}>
-        Read machines
-      </Button>
-    </>
+    <NetworkComponent
+      network={state.network}
+      onPropertyChange={handleChange}
+      onReadMachines={handleReadMachines}
+    />
   );
 };
 
diff --git a/src/features/network/styles.js b/src/features/network/styles.js
new file mode 100644
index 0000000..ec844e3
--- /dev/null
+++ b/src/features/network/styles.js
@@ -0,0 +1,7 @@
+const styles = () => ({
+  root: {
+    margin: "15px"
+  }
+});
+
+export default styles;