changed folders structure

src/features/machines/components/MachinesComponent.js

@@ -0,0 +1,13 @@
+import React from "react";
+import PropTypes from "prop-types";
+import MachinesList from "./MachinesList";
+
+const MachinesComponent = ({ network }) => {
+  return <MachinesList dense={true} machines={network.machines} />;
+};
+
+MachinesComponent.propTypes = {
+  network: PropTypes.object.isRequired
+};
+
+export default MachinesComponent;

src/features/machines/components/MachinesContainer.js

@@ -0,0 +1,37 @@
+import React, { useContext, useEffect, useCallback } from "react";
+import {
+  ApplicationStateContext,
+  ApplicationDispatchContext
+} from "../../../state/ApplicationContexts";
+import { readMachines } from "../api";
+import MachinesComponent from "./MachinesComponent";
+
+const MachinesContainer = () => {
+  const state = useContext(ApplicationStateContext);
+  const dispatchActions = useContext(ApplicationDispatchContext);
+
+  const handleChange = prop => event => {
+    dispatchActions.onNetworkChange(prop, event.target.value);
+  };
+
+  const handleReadMachines = useCallback(async () => {
+    const machines = await readMachines();
+    const data = Object.assign(machines, { loaded: true });
+    dispatchActions.onNetworkChange("machines", data);
+  }, [dispatchActions]);
+
+  useEffect(() => {
+    if (!state.network.machines.loaded) {
+      handleReadMachines();
+    }
+  }, [handleReadMachines, state.network.machines.loaded]);
+
+  return (
+    <MachinesComponent
+      network={state.network}
+      onPropertyChange={handleChange}
+    />
+  );
+};
+
+export default MachinesContainer;

src/features/network/components/NetworkComponent.js

@@ -1,37 +0,0 @@
-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 }) => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <MachinesList dense={true} machines={network.machines} />
-      <br />
-      <TextField
-        id="ertet"
-        label="Test"
-        onChange={onPropertyChange("test")}
-        value={network.test}
-      />
-      <br />
-      <br />
-      <Button variant="contained" color="primary">
-        Read machines
-      </Button>
-    </div>
-  );
-};
-
-NetworkComponent.propTypes = {
-  network: PropTypes.object.isRequired,
-  onPropertyChange: PropTypes.func.isRequired
-};
-
-export default NetworkComponent;

src/features/network/components/NetworkContainer.js

@@ -1,33 +1,19 @@
-import React, { useContext, useEffect, useCallback } from "react";
-import {
-  ApplicationStateContext,
-  ApplicationDispatchContext
-} from "../../../state/ApplicationContexts";
-import { readMachines } from "../api";
-import NetworkComponent from "./NetworkComponent";
+import React from "react";
+import MachinesContainer from "../../machines/components/MachinesContainer";
+import NotesContainer from "../../notes/components/NotesContainer";
+import { makeStyles } from "@material-ui/core/styles";
+import styles from "../styles";
+
+const useStyles = makeStyles(styles);
 
 const NetworkContainer = () => {
-  const state = useContext(ApplicationStateContext);
-  const dispatchActions = useContext(ApplicationDispatchContext);
-
-  const handleChange = prop => event => {
-    dispatchActions.onNetworkChange(prop, event.target.value);
-  };
-
-  const handleReadMachines = useCallback(async () => {
-    const machines = await readMachines();
-    const data = Object.assign(machines, { loaded: true });
-    dispatchActions.onNetworkChange("machines", data);
-  }, [dispatchActions]);
-
-  useEffect(() => {
-    if (!state.network.machines.loaded) {
-      handleReadMachines();
-    }
-  }, [handleReadMachines, state.network.machines.loaded]);
+  const classes = useStyles();
 
   return (
-    <NetworkComponent network={state.network} onPropertyChange={handleChange} />
+    <div className={classes.root}>
+      <MachinesContainer />
+      <NotesContainer />
+    </div>
   );
 };
 

src/features/notes/components/NotesContainer.js

@@ -0,0 +1,33 @@
+import React, { useContext } from "react";
+import { TextField, Button } from "@material-ui/core";
+import {
+  ApplicationStateContext,
+  ApplicationDispatchContext
+} from "../../../state/ApplicationContexts";
+
+const NotesContainer = () => {
+  const state = useContext(ApplicationStateContext);
+  const dispatchActions = useContext(ApplicationDispatchContext);
+
+  const handleChange = prop => event => {
+    dispatchActions.onNetworkChange(prop, event.target.value);
+  };
+
+  return (
+    <>
+      <TextField
+        id="ertet"
+        label="Test"
+        onChange={handleChange("test")}
+        value={state.network.test}
+      />
+      <br />
+      <br />
+      <Button variant="contained" color="primary">
+        Read machines
+      </Button>
+    </>
+  );
+};
+
+export default NotesContainer;