Error handling

app/src/App.tsx

@@ -3,21 +3,24 @@ import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
 import Home from "./components/pages/Home";
 import Login from "./components/pages/Login";
 import AuthProvider from "./context/auth/AuthProvider";
+import ErrorBoundary from "./components/hoc/ErrorBoundary";
 
 function App() {
   return (
-    <Router>
-      <AuthProvider>
-        <Switch>
-          <Route exact path="/">
-            <Home />
-          </Route>
-          <Route exact path="/login">
-            <Login />
-          </Route>
-        </Switch>
-      </AuthProvider>
-    </Router>
+    <ErrorBoundary>
+      <Router>
+        <AuthProvider>
+          <Switch>
+            <Route exact path="/">
+              <Home />
+            </Route>
+            <Route exact path="/login">
+              <Login />
+            </Route>
+          </Switch>
+        </AuthProvider>
+      </Router>
+    </ErrorBoundary>
   );
 }
 

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

@@ -17,8 +17,11 @@ import { sectors } from "../../../../api";
 import { UserStateContext } from "../../../../context/auth/AuthProvider";
 import { Station } from "../../../../types";
 import { mustCheckDateOrder } from "../../../../utils";
+import Modal from "../../../portals/modal";
 
 const Cockpit: FC = () => {
+  const [error, setError] = useState<string | null>(null);
+
   const dashboardState = useContext(StateContext);
   const dashboardDispatch = useContext(DispatchContext);
   const userState = useContext(UserStateContext);
@@ -63,62 +66,85 @@ const Cockpit: FC = () => {
   };
 
   const handleFromChange = (e: ChangeEvent<HTMLInputElement>) => {
-    mustCheckDateOrder(e.target.value, dashboardState.to);
+    try {
+      mustCheckDateOrder(e.target.value, dashboardState.to);
+    } catch (e) {
+      setError(e as any);
+      return;
+    }
     return dashboardDispatch(actions.setFromControl(e.target.value));
   };
 
   const handleToChange = (e: ChangeEvent<HTMLInputElement>) => {
+    try {
+      mustCheckDateOrder(e.target.value, dashboardState.to);
+    } catch (e) {
+      setError(e as any);
+      return;
+    }
     mustCheckDateOrder(e.target.value, dashboardState.to);
     return dashboardDispatch(actions.setToControl(e.target.value));
   };
 
   return (
-    <section className="row p-lg-4 p-md-3 p-2">
-      {/* Finca */}
-      <div className="col-12 col-lg-4 mb-2 col-xl-3 mb-xl-0">
-        <Select
-          list={sectorChoices}
-          onChange={(e: ChangeEvent<HTMLInputElement>) =>
-            dashboardDispatch(actions.setSector(e.target.value))
-          }
-          name="Comparación"
-          placeholder="Fincas"
-        />
-      </div>
-
-      {/* Campania */}
-      <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
-        <Select
-          list={campaignList}
-          onChange={handleCampChange}
-          value={selectedCampaignYear}
-          name="Comparación"
-          placeholder="Camapaña"
-        />
-      </div>
-
-      {/* Desde */}
-      <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
-        <CalendarInput
-          onChange={handleFromChange}
-          value={dashboardState.from}
-          name="Comparación"
-          min={dashboardState.minDate}
-          max={dashboardState.maxDate}
-        />
-      </div>
-
-      {/* Hasta */}
-      <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
-        <CalendarInput
-          onChange={handleToChange}
-          value={dashboardState.to}
-          name="Comparación"
-          min={dashboardState.minDate}
-          max={dashboardState.maxDate}
-        />
-      </div>
-    </section>
+    <>
+      {error && (
+        <Modal
+          key="Error"
+          title={"Error"}
+          staticBackdrop
+          accept={() => setError(null)}
+        >
+          <p style={{ color: "red" }}>{error.toString()}</p>
+        </Modal>
+      )}
+      <section className="row p-lg-4 p-md-3 p-2">
+        {/* Finca */}
+        <div className="col-12 col-lg-4 mb-2 col-xl-3 mb-xl-0">
+          <Select
+            list={sectorChoices}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              dashboardDispatch(actions.setSector(e.target.value))
+            }
+            name="Comparación"
+            placeholder="Fincas"
+          />
+        </div>
+
+        {/* Campania */}
+        <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
+          <Select
+            list={campaignList}
+            onChange={handleCampChange}
+            value={selectedCampaignYear}
+            name="Comparación"
+            placeholder="Camapaña"
+          />
+        </div>
+
+        {/* Desde */}
+        <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
+          <CalendarInput
+            onChange={handleFromChange}
+            value={dashboardState.from}
+            name="Comparación"
+            min={dashboardState.minDate}
+            max={dashboardState.maxDate}
+          />
+        </div>
+
+        {/* Hasta */}
+        <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
+          <CalendarInput
+            onChange={handleToChange}
+            value={dashboardState.to}
+            name="Comparación"
+            min={dashboardState.minDate}
+            max={dashboardState.maxDate}
+          />
+        </div>
+      </section>
+    </>
   );
 };
 

app/src/components/hoc/ErrorBoundary.tsx

@@ -0,0 +1,42 @@
+import React, { ClassicComponent, ErrorInfo } from "react";
+import Modal from "../portals/modal";
+
+export class ErrorBoundary extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+  }
+
+  state = {
+    currentError: null,
+    errorInfo: null,
+  };
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    this.setState({
+      currentError: error,
+      errorInfo: info,
+    });
+  }
+
+  render() {
+    return (
+      <>
+        {this.props.children}
+        {this.state.currentError && (
+          <Modal
+            key="Error"
+            title={"Error"}
+            staticBackdrop
+            accept={() =>
+              this.setState({ currentError: null, errorInfo: null })
+            }
+          >
+            <p style={{ color: "red" }}>{this.state.errorInfo}</p>
+          </Modal>
+        )}
+      </>
+    );
+  }
+}
+
+export default ErrorBoundary;