Controles del dashboard del home y contexto

app/src/components/UI/dashboard/cockpit/index.tsx

@@ -0,0 +1,67 @@
+import React, { useContext, ChangeEvent, FC } from "react";
+import Select from "../../forms/select";
+import CalendarInput from "../../forms/calendarInput";
+import {
+  DispatchContext,
+  StateContext,
+} from "../../../../context/dashboard/Provider";
+import * as actions from "../../../../context/dashboard/actions";
+
+const fincaList: string[] | number[] = ["a", "b", "c", "d"];
+const campaignList: string[] | number[] = ["2018", "2019", "2020", "2021"];
+
+const Cockpit: FC = () => {
+  const dashboardState = useContext(StateContext);
+  const dashboardDispatch = useContext(DispatchContext);
+
+  return (
+    <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>) =>
+            dashboardDispatch(actions.setFromControl(e.target.value))
+          }
+          value={dashboardState.from}
+          name="Comparación"
+        />
+      </div>
+      <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
+        <CalendarInput
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            dashboardDispatch(actions.setToControl(e.target.value))
+          }
+          value={dashboardState.to}
+          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>) =>
+            dashboardDispatch(actions.setYearControl(e.target.value))
+          }
+          value={dashboardState.year}
+          name="Comparación"
+          placeholder="Año historicos"
+        />
+      </div>
+
+      <div className="col-auto">
+        <button type="button" className="btn btn-primary">
+          Aplicar
+        </button>
+      </div>
+    </section>
+  );
+};
+export default Cockpit;

app/src/components/UI/forms/calendarInput.tsx

@@ -1,24 +1,26 @@
 import React, { FC, useState } from "react";
 
 interface calendarInputProps {
-    onChange: Function;
-    name: string;
-    value?: string;
-    min?: string;
-    max?: string;
-    [index: string]: any;
+  onChange: Function;
+  name: string;
+  value?: string | null;
+  min?: string;
+  max?: string;
+  [index: string]: any;
 }
 
 const CalendarInput: FC<calendarInputProps> = ({ className, ...props }) => {
+  const defaultValue = new Date().toISOString().substr(0, 10);
 
-    const [startDate, setStartDate] = useState(new Date());
-
-    return (
-        <input {...(props as any)}
-            defaultValue={startDate.toISOString().substr(0, 10)}
-            className={`form-control ${className}`}
-            type="date" id="start" />
-    );
+  return (
+    <input
+      {...(props as any)}
+      defaultValue={defaultValue}
+      className={`form-control ${className}`}
+      type="date"
+      id="start"
+    />
+  );
 };
 
 export default CalendarInput;

app/src/components/pages/Home.tsx

@@ -1,19 +1,15 @@
-import React, { useContext, ChangeEvent, FC } from "react";
-import Select from "../UI/forms/select";
+import React, { useContext, FC } from "react";
 // import DegreeDay from "../data/DegreeDay";
 // import TemperaturePerSeason from "../data/TemperaturePerSeason";
 import TemperaturePerSector from "../data/TemperaturePerSector";
 // 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";
+import Cockpit from "../UI/dashboard/cockpit";
 
 const Home: FC = () => {
-  let fincaList: string[] | number[] = ["a", "b", "c", "d"];
-  let campaignList: string[] | number[] = ["2018", "2019", "2020", "2021"];
-
   const userState = useContext(UserStateContext);
 
   if (!userState.loggedIn) {
@@ -24,63 +20,9 @@ const Home: FC = () => {
     <>
       <Layout>
         <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>
+          <Cockpit />
 
           <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>