application state

src/App.js

@@ -1,12 +0,0 @@
-import React, { Suspense } from "react";
-import Main from "./components/layout/Main";
-
-function App() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <Main />
-    </Suspense>
-  );
-}
-
-export default App;

src/components/App.js

@@ -1,7 +1,9 @@
-import React from "react";
+import React, { useReducer } from "react";
-import ApplicationStepper from "./stepper/ApplicationStepper";
+import ApplicationStepper from "./layout/stepper/ApplicationStepper";
-import Switcher from "./Switcher";
+import Switcher from "./layout/Switcher";
 import { makeStyles } from "@material-ui/core/styles";
+import { initialState } from "../state/initialState";
+import { reducer } from "../state/reducer";
 
 const useStyles = makeStyles(() => ({
   app: {
@@ -22,8 +24,9 @@ const useStyles = makeStyles(() => ({
   }
 }));
 
-const Main = () => {
+const App = () => {
   const classes = useStyles();
+  const [state, dispatch] = useReducer(reducer, initialState);
 
   return (
     <div className={classes.app}>
@@ -35,4 +38,4 @@ const Main = () => {
   );
 };
 
-export default Main;
+export default App;

src/index.js

@@ -1,13 +1,15 @@
-import React from "react";
+import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-import App from "./App";
+import App from "./components/App";
 import { BrowserRouter as Router } from "react-router-dom";
 
 ReactDOM.render(
   <React.StrictMode>
     <Router basename={process.env.PUBLIC_URL || ""}>
+      <Suspense fallback={<div>Loading...</div>}>
         <App />
+      </Suspense>
     </Router>
   </React.StrictMode>,
   document.getElementById("root")

src/state/initialState.js

@@ -0,0 +1,3 @@
+export const initialState = {
+  credentials: {}
+};

src/state/reducer.js

@@ -0,0 +1,33 @@
+export function reducer(state, action) {
+  switch (action.type) {
+    case "OnPagerChange": {
+      return {
+        ...state,
+        pager: {
+          ...state.pager,
+          ...action.payload
+        }
+      };
+    }
+    case "OnExportRequest": {
+      return {
+        ...state,
+        export: action.value
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+}
+
+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 })
+});