Contexto para los controles del dashboard

app/src/components/pages/Home.tsx

@@ -1,11 +1,12 @@
 import React, { useContext, ChangeEvent, FC } from "react";
 import Select from "../UI/forms/select";
-import DegreeDay from "../data/DegreeDay";
-import TemperaturePerSeason from "../data/TemperaturePerSeason";
+// import DegreeDay from "../data/DegreeDay";
+// import TemperaturePerSeason from "../data/TemperaturePerSeason";
 import TemperaturePerSector from "../data/TemperaturePerSector";
-import Precipitation from "../data/Precipitation";
+// import Precipitation from "../data/Precipitation";
 import CalendarInput from "../UI/forms/calendarInput";
 import { UserStateContext } from "../../context/auth/AuthProvider";
+import DashboardProvider from "../../context/dashboard/Provider";
 import { Redirect } from "react-router-dom";
 import Layout from "../layout";
 
@@ -22,67 +23,69 @@ const Home: FC = () => {
   return (
     <>
       <Layout>
-        <section className="row p-lg-4 p-md-3 p-2">
-          <div className="col-12 col-lg-4 mb-2 col-xl-3 mb-xl-0">
-            <Select
-              list={fincaList}
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                console.log(e.target.value)
-              }
-              name="Comparación"
-              placeholder="Fincas"
-            />
-          </div>
-          <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
-            <CalendarInput
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                console.log(e.target.value)
-              }
-              name="Comparación"
-            />
-          </div>
-          <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
-            <CalendarInput
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                console.log(e.target.value)
-              }
-              name="Comparación"
-            />
-          </div>
-          <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
-            <Select
-              list={campaignList}
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                console.log(e.target.value)
-              }
-              name="Comparación"
-              placeholder="Año historicos"
-            />
-          </div>
+        <DashboardProvider>
+          <section className="row p-lg-4 p-md-3 p-2">
+            <div className="col-12 col-lg-4 mb-2 col-xl-3 mb-xl-0">
+              <Select
+                list={fincaList}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  console.log(e.target.value)
+                }
+                name="Comparación"
+                placeholder="Fincas"
+              />
+            </div>
+            <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
+              <CalendarInput
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  console.log(e.target.value)
+                }
+                name="Comparación"
+              />
+            </div>
+            <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
+              <CalendarInput
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  console.log(e.target.value)
+                }
+                name="Comparación"
+              />
+            </div>
+            <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
+              <Select
+                list={campaignList}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  console.log(e.target.value)
+                }
+                name="Comparación"
+                placeholder="Año historicos"
+              />
+            </div>
 
-          <div className="col-auto">
-            <button type="button" className="btn btn-primary">
-              Aplicar
-            </button>
-          </div>
-        </section>
+            <div className="col-auto">
+              <button type="button" className="btn btn-primary">
+                Aplicar
+              </button>
+            </div>
+          </section>
 
-        <section className="row">
-          {/*   <div className="col-xl-6"> */}
-          {/*     <TemperaturePerSeason /> */}
-          {/*     <DegreeDay */}
-          {/*       title={"Vista flores"} */}
-          {/*       periodString={"1ro Octubre - 31 Marzo"} */}
-          {/*     /> */}
-          {/*     <Precipitation */}
-          {/*       title={"Maipú"} */}
-          {/*       periodString={"1ro Octubre - 31 Marzo"} */}
-          {/*     /> */}
-          {/*   </div> */}
-          <div className="col-xl-6">
-            <TemperaturePerSector />
-          </div>
-        </section>
+          <section className="row">
+            {/*   <div className="col-xl-6"> */}
+            {/*     <TemperaturePerSeason /> */}
+            {/*     <DegreeDay */}
+            {/*       title={"Vista flores"} */}
+            {/*       periodString={"1ro Octubre - 31 Marzo"} */}
+            {/*     /> */}
+            {/*     <Precipitation */}
+            {/*       title={"Maipú"} */}
+            {/*       periodString={"1ro Octubre - 31 Marzo"} */}
+            {/*     /> */}
+            {/*   </div> */}
+            <div className="col-xl-6">
+              <TemperaturePerSector />
+            </div>
+          </section>
+        </DashboardProvider>
       </Layout>
     </>
   );

app/src/context/dashboard/Provider.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, useReducer, Dispatch, FC } from "react";
+import reducer, { State, defaultState } from "./reducer";
+import { Action } from "./actionTypes";
+
+const Provider: FC = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, defaultState);
+
+  return (
+    <StateContext.Provider value={state}>
+      <DispatchContext.Provider value={asyncDispatchWrap(dispatch)}>
+        {children}
+      </DispatchContext.Provider>
+    </StateContext.Provider>
+  );
+};
+
+type AsyncDispatch = (
+  action: Action | ((...args: any) => Promise<any>)
+) => void;
+
+function asyncDispatchWrap(dispatch: Dispatch<Action>) {
+  const asyncDispatch: AsyncDispatch = (action) => {
+    if (action instanceof Function) {
+      action(dispatch);
+      return;
+    }
+    dispatch(action);
+  };
+
+  return asyncDispatch;
+}
+
+export const StateContext = createContext<State>({});
+export const DispatchContext = createContext<
+  (action: Action | ((...args: any) => Promise<any>)) => void
+>(asyncDispatchWrap((dispatch) => {}));
+
+export default Provider;

app/src/context/dashboard/actionTypes.ts

@@ -0,0 +1,11 @@
+export type ActionType =
+  | "SET_FROM_CONTROL"
+  | "SET_TO_CONTROL"
+  | "SET_YEAR_CONTROL";
+
+export type Action = {
+  type: ActionType;
+  to?: string | null;
+  from?: string | null;
+  year?: string | null;
+};

app/src/context/dashboard/actions.ts

@@ -0,0 +1,18 @@
+import { Action } from "./actionTypes";
+
+export const setYearControl = (year: string): Action => ({
+  type: "SET_YEAR_CONTROL",
+  year,
+});
+
+export const setFromControl = (from: string): Action => ({
+  type: "SET_FROM_CONTROL",
+  from,
+});
+
+export const setToControl = (to: string): Action => ({
+  type: "SET_FROM_CONTROL",
+  to,
+});
+
+export default {};

app/src/context/dashboard/reducer.ts

@@ -0,0 +1,38 @@
+import { Reducer } from "react";
+import { Action } from "./actionTypes";
+
+export const defaultState = {
+  year: null,
+  from: null,
+  to: null,
+};
+
+export type State = {
+  to?: string | null;
+  from?: string | null;
+  year?: string | null;
+};
+
+const reducer: Reducer<State, Action> = (state, action) => {
+  switch (action.type) {
+    case "SET_TO_CONTROL":
+      return {
+        ...state,
+        to: action.to,
+      };
+    case "SET_FROM_CONTROL":
+      return {
+        ...state,
+        from: action.from,
+      };
+    case "SET_YEAR_CONTROL":
+      return {
+        ...state,
+        year: action.year,
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;