cambios recomendados por guille

app/src/components/UI/checkbox/index.tsx

@@ -1,35 +0,0 @@
-import React, { FC } from "react";
-
-interface checkProps {
-    changeSeason:any;
-    changeDegree:any;
-    changePrep:any;
-
-}
-
-
-const Checkbox: FC<checkProps> = ({changeSeason,changeDegree,changePrep,...props }) => {
-    return (    
-        <section className="row p-lg-4 p-md-3 p-2">
-            <div className="btn-group col-8" role="group" aria-label="Basic checkbox toggle button group">
-                {/* 
-                {list.map((tittle:any) =>
-                    <input type="checkbox" className="btn-check" id="btncheck1" autoComplete="off"/>
-                    <label className="btn btn-outline-primary" htmlFor="btncheck1">{tittle}</label>
-                ): null} */}
-                <input type="checkbox" className="btn-check"  id="btncheckSeason" autoComplete="off"/>
-                <label className="btn btn-outline-primary" onClick={changeSeason} htmlFor="btncheckSeason">GeneralPerSeason</label>
-
-                <input type="checkbox" className="btn-check" id="btncheckDegree" autoComplete="off"/>
-                <label className="btn btn-outline-primary" onClick={changeDegree} htmlFor="btncheckDegree">DegreeDay</label>
-
-                <input type="checkbox" className="btn-check" id="btncheckPre" autoComplete="off"/>
-                <label className="btn btn-outline-primary" onClick={changePrep} htmlFor="btncheckPre">Precipitation</label>
-
-            </div>
-        </section>     
-  );
-};
-
-export default Checkbox;
-

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

@@ -0,0 +1,35 @@
+import React, { FC } from "react";
+
+interface checkProps {
+    changeSeason:any;
+    changeDegree:any;
+    changePrep:any;
+
+}
+
+
+const CheckboxTables: FC<checkProps> = ({changeSeason,changeDegree,changePrep,...props }) => {
+    return (    
+        <section className="row p-lg-4 p-md-3 p-2">
+            <div className="btn-group col-8" role="group" aria-label="Basic checkbox toggle button group">
+                {/* 
+                {list.map((tittle:any) =>
+                    <input type="checkbox" className="btn-check" id="btncheck1" autoComplete="off"/>
+                    <label className="btn btn-outline-primary" htmlFor="btncheck1">{tittle}</label>
+                ): null} */}
+                <input type="checkbox" className="btn-check" onClick={changeSeason}  id="btncheckSeason" autoComplete="off"/>
+                <label className="btn btn-outline-primary" htmlFor="btncheckSeason">GeneralPerSeason</label>
+
+                <input type="checkbox" className="btn-check" onClick={changeDegree} id="btncheckDegree" autoComplete="off"/>
+                <label className="btn btn-outline-primary" htmlFor="btncheckDegree">DegreeDay</label>
+
+                <input type="checkbox" className="btn-check" onClick={changePrep} id="btncheckPre" autoComplete="off"/>
+                <label className="btn btn-outline-primary" htmlFor="btncheckPre">Precipitation</label>
+
+            </div>
+        </section>     
+  );
+};
+
+export default CheckboxTables;
+

app/src/components/pages/Home.tsx

@@ -12,16 +12,16 @@ import DashboardProvider from "../../context/dashboard/Provider";
 import { Redirect } from "react-router-dom";
 import Layout from "../layout";
 import Cockpit from "../UI/dashboard/cockpit";
-import Checkbox from "../UI/checkbox";
+import CheckboxTables from "../UI/dashboard/checkboxTables";
 
 const Home: FC = () => {
   const userState = useContext(UserStateContext);
-  const [getViewSeasonState, setViewSeasonState] = useState<Boolean>(false);
-  const [getViewDegreeState, setViewDegreeState] = useState<Boolean>(false);
-  const [getViewPrepState, setViewPrepState] = useState<Boolean>(false);
-  const changeSeason = () => {if(getViewSeasonState){setViewSeasonState(false)}else{setViewSeasonState(true)}}
-  const changeDegree = () => {if(getViewDegreeState){setViewDegreeState(false)}else{setViewDegreeState(true)}}
-  const changePrep = () => {if(getViewPrepState){setViewPrepState(false)}else{setViewPrepState(true)}}
+  const [viewSeasonState, setViewSeasonState] = useState<Boolean>(false);
+  const [viewDegreeState, setViewDegreeState] = useState<Boolean>(false);
+  const [viewPrepState, setViewPrepState] = useState<Boolean>(false);
+  const toggleSeason = () => setViewSeasonState(!viewSeasonState)
+  const toggleDegree = () => setViewDegreeState(!viewDegreeState)
+  const togglePrep = () => setViewPrepState(!viewPrepState)
 
   if (!userState.loggedIn) {
     return <Redirect to="/login" />;
@@ -38,23 +38,23 @@ const Home: FC = () => {
             </div>
           </section>
 
-          <Checkbox changeSeason={changeSeason} changeDegree={changeDegree} changePrep={changePrep}/>
+          <CheckboxTables changeSeason={toggleSeason} changeDegree={toggleDegree} changePrep={togglePrep}/>
 
-          { getViewSeasonState ?
+          { viewSeasonState ?
           <section className="row">
             <div className="col-xl-8">
               <GeneralPerSeason />
             </div>
           </section>
           : null }
-          { getViewDegreeState ?  
+          { viewDegreeState ?  
           <section className="row">
             <div className="col-xl-8">
               <DegreeDay title="hola" periodString="0/0/0" />
             </div>
           </section> 
           : null }
-          { getViewPrepState ?
+          { viewPrepState ?
           <section className="row">
             <div className="col-xl-8">
               <Precipitation title="hola" periodString="0/0/0" />