network page

src/features/network/components/NetworkContainer.js

@@ -1,7 +1,29 @@
-import React from "react";
+import React, { useContext } from "react";
+import { TextField } from "@material-ui/core";
+import {
+  ApplicationStateContext,
+  ApplicationDispatchContext
+} from "../../../state/ApplicationContexts";
 
 const NetworkContainer = () => {
-  return <div>NetworkContainer</div>;
+  const state = useContext(ApplicationStateContext);
+  const dispatchActions = useContext(ApplicationDispatchContext);
+
+  const handleChange = prop => event => {
+    dispatchActions.onNetworkChange(prop, event.target.value);
+  };
+
+  return (
+    <>
+      <div>NetworkContainer</div>
+      <TextField
+        id="ertet"
+        label="Test"
+        onChange={handleChange("test")}
+        value={state.network.test}
+      />
+    </>
+  );
 };
 
 export default NetworkContainer;

src/state/initialState.js

@@ -2,5 +2,8 @@ export const initialState = {
   credentials: {
     userName: "",
     password: ""
+  },
+  network: {
+    test: ""
   }
 };

src/state/reducer.js

@@ -10,6 +10,16 @@ export function reducer(state, action) {
         }
       };
     }
+    case "onNetworkChange": {
+      const { prop, value } = action.payload;
+      return {
+        ...state,
+        network: {
+          ...state.network,
+          [prop]: value
+        }
+      };
+    }
     default: {
       return state;
     }
@@ -18,5 +28,7 @@ export function reducer(state, action) {
 
 export const dispatchActions = dispatch => ({
   onCredentialsChange: (prop, value) =>
-    dispatch({ type: "onCredentialsChange", payload: { prop, value } })
+    dispatch({ type: "onCredentialsChange", payload: { prop, value } }),
+  onNetworkChange: (prop, value) =>
+    dispatch({ type: "onNetworkChange", payload: { prop, value } })
 });