state system

src/components/App.js

@@ -1,40 +1,29 @@
-import React, { useReducer } from "react";
-import ApplicationStepper from "./layout/stepper/ApplicationStepper";
-import Switcher from "./layout/Switcher";
-import { makeStyles } from "@material-ui/core/styles";
+import React, { useReducer, useMemo } from "react";
+import Main from "./layout/Main";
 import { initialState } from "../state/initialState";
-import { reducer } from "../state/reducer";
-
-const useStyles = makeStyles(() => ({
-  app: {
-    textAlign: "center",
-    backgroundColor: "#282c34",
-    minHeight: "100vh",
-    display: "flex",
-    flexDirection: "column"
-  },
-  content: {
-    minHeight: "80vh",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "calc(10px + 2vmin)",
-    color: "white"
-  }
-}));
+import {
+  reducer,
+  dispatchActions as reducerDispatchActions
+} from "../state/reducer";
+import {
+  ApplicationStateContext,
+  ApplicationDispatchContext
+} from "../state/ApplicationContexts";
 
 const App = () => {
-  const classes = useStyles();
+  //il fac pt test dar e gresit. daca va fi un singur state se va redesena toata aplicatia de fiecare data.
+  //testeaza ca se redeseneaza de fiecare data
   const [state, dispatch] = useReducer(reducer, initialState);
+  const dispatchActions = useMemo(() => reducerDispatchActions(dispatch), [
+    dispatch
+  ]);
 
   return (
-    <div className={classes.app}>
-      <ApplicationStepper />
-      <div className={classes.content}>
-        <Switcher />
-      </div>
-    </div>
+    <ApplicationStateContext.Provider value={state}>
+      <ApplicationDispatchContext.Provider value={dispatchActions}>
+        <Main />
+      </ApplicationDispatchContext.Provider>
+    </ApplicationStateContext.Provider>
   );
 };
 

src/components/layout/Main.js

@@ -0,0 +1,38 @@
+import React from "react";
+import ApplicationStepper from "./stepper/ApplicationStepper";
+import Switcher from "./Switcher";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(() => ({
+  app: {
+    textAlign: "center",
+    backgroundColor: "#282c34",
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column"
+  },
+  content: {
+    minHeight: "80vh",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "calc(10px + 2vmin)",
+    color: "white"
+  }
+}));
+
+const Main = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.app}>
+      <ApplicationStepper />
+      <div className={classes.content}>
+        <Switcher />
+      </div>
+    </div>
+  );
+};
+
+export default Main;

src/features/login/components/LoginComponent.js

@@ -1,8 +1,12 @@
-import React from "react";
+import React, { useContext } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { TextField, InputAdornment } from "@material-ui/core";
 import { AccountCircleOutlined } from "@material-ui/icons";
 import PasswordField from "../../../components/common/inputs/PasswordField";
+import {
+  ApplicationStateContext,
+  ApplicationDispatchContext
+} from "../../../state/ApplicationContexts";
 
 const useStyles = makeStyles(theme => ({
   field: {
@@ -13,12 +17,22 @@ const useStyles = makeStyles(theme => ({
 
 const LoginComponent = () => {
   const classes = useStyles();
+
+  const state = useContext(ApplicationStateContext);
+  const dispatchActions = useContext(ApplicationDispatchContext);
+
+  const handleChange = prop => event => {
+    dispatchActions.onCredentialsChange(prop, event.target.value);
+  };
+
   return (
     <div>
       <TextField
         className={classes.field}
         id="username"
         label="Username"
+        onChange={handleChange("userName")}
+        value={state.credentials.userName}
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
@@ -28,7 +42,13 @@ const LoginComponent = () => {
         }}
       />
       <br />
-      <PasswordField id="password" label="Password" className={classes.field} />
+      <PasswordField
+        id="password"
+        label="Password"
+        className={classes.field}
+        onChange={handleChange("password")}
+        value={state.credentials.password}
+      />
     </div>
   );
 };

src/state/ApplicationContexts.js

@@ -0,0 +1,4 @@
+import React from "react";
+
+export const ApplicationStateContext = React.createContext();
+export const ApplicationDispatchContext = React.createContext();

src/state/initialState.js

@@ -1,3 +1,6 @@
 export const initialState = {
-  credentials: {}
+  credentials: {
+    userName: "",
+    password: ""
+  }
 };

src/state/reducer.js

@@ -1,20 +1,15 @@
 export function reducer(state, action) {
   switch (action.type) {
-    case "OnPagerChange": {
+    case "onCredentialsChange": {
+      const { prop, value } = action.payload;
       return {
         ...state,
-        pager: {
-          ...state.pager,
-          ...action.payload
+        credentials: {
+          ...state.credentials,
+          [prop]: value
         }
       };
     }
-    case "OnExportRequest": {
-      return {
-        ...state,
-        export: action.value
-      };
-    }
     default: {
       return state;
     }
@@ -22,12 +17,6 @@ export function reducer(state, action) {
 }
 
 export const dispatchActions = dispatch => ({
-  onFilterPropertyValueChange: (prop, value) =>
-    dispatch({ type: "OnFilterPropertyValueChange", payload: { prop, value } }),
-
-  onPagerChange: pager =>
-    dispatch({ type: "OnPagerChange", payload: { ...pager } }),
-  onSetCachedFilters: cachedFilters =>
-    dispatch({ type: "OnSetCachedFilters", payload: cachedFilters }),
-  onExportRequest: value => dispatch({ type: "OnExportRequest", value: value })
+  onCredentialsChange: (prop, value) =>
+    dispatch({ type: "onCredentialsChange", payload: { prop, value } })
 });