From 22ddc002dd575284d051d334810c96c869701181 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sat, 19 Dec 2020 04:22:38 +0200 Subject: [PATCH] state system --- src/components/App.js | 51 ++++++++----------- src/components/layout/Main.js | 38 ++++++++++++++ .../login/components/LoginComponent.js | 24 ++++++++- src/state/ApplicationContexts.js | 4 ++ src/state/initialState.js | 5 +- src/state/reducer.js | 25 +++------ 6 files changed, 95 insertions(+), 52 deletions(-) create mode 100644 src/components/layout/Main.js create mode 100644 src/state/ApplicationContexts.js diff --git a/src/components/App.js b/src/components/App.js index 4e0bfa2..681fd41 100644 --- a/src/components/App.js +++ b/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 ( -
- -
- -
-
+ + +
+ + ); }; diff --git a/src/components/layout/Main.js b/src/components/layout/Main.js new file mode 100644 index 0000000..2303946 --- /dev/null +++ b/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 ( +
+ +
+ +
+
+ ); +}; + +export default Main; diff --git a/src/features/login/components/LoginComponent.js b/src/features/login/components/LoginComponent.js index 593028a..6f9aa03 100644 --- a/src/features/login/components/LoginComponent.js +++ b/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 (
@@ -28,7 +42,13 @@ const LoginComponent = () => { }} />
- +
); }; diff --git a/src/state/ApplicationContexts.js b/src/state/ApplicationContexts.js new file mode 100644 index 0000000..229f959 --- /dev/null +++ b/src/state/ApplicationContexts.js @@ -0,0 +1,4 @@ +import React from "react"; + +export const ApplicationStateContext = React.createContext(); +export const ApplicationDispatchContext = React.createContext(); diff --git a/src/state/initialState.js b/src/state/initialState.js index f7d5d33..c972c2c 100644 --- a/src/state/initialState.js +++ b/src/state/initialState.js @@ -1,3 +1,6 @@ export const initialState = { - credentials: {} + credentials: { + userName: "", + password: "" + } }; diff --git a/src/state/reducer.js b/src/state/reducer.js index 69c8911..ea883da 100644 --- a/src/state/reducer.js +++ b/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 } }) });