CEC-279 Add logger (#62)

* CEC-279 Add logger

* Error log 500 status requests

src/components/Cars/Add/index.jsx

@@ -8,6 +8,7 @@ import {
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { Button, TextField } from "@material-ui/core";
+import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const { addVehicle, busy } = useVehicleContext();
@@ -25,7 +26,7 @@ const MainForm = () => {
 
   useEffect(() => {
     setTitle("Add Vehicle");
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const onSubmit = async (event) => {
     try {
@@ -44,6 +45,7 @@ const MainForm = () => {
       vinEl.current.value = "";
     } catch (e) {
       setMessage(e.message);
+      logger.warn(e.stack);
     }
   };
 

src/components/Cars/CarSelection/index.jsx

@@ -40,7 +40,7 @@ const Control = (props) => {
         await getYears(token);
       } catch (e) {}
     })();
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
   useEffect(() => {
@@ -56,14 +56,14 @@ const Control = (props) => {
   useEffect(() => {
     if (model === null || year === -1) return;
     getVehicles({ model, year, trim }, token);
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [model, year, trim]);
 
   useEffect(() => {
     if (!props.onSelection) return;
     const vins = vehicles.map((item) => item.vin);
     props.onSelection(vins);
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vehicles]);
 
   return (

src/components/Cars/CarSelectionTable/index.jsx

@@ -16,6 +16,7 @@ import { useVehicleContext } from "../../Contexts/VehicleContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
+import { logger } from "../../../services/monitoring";
 
 const tableColumns = [
   {
@@ -100,12 +101,15 @@ const CarSelectionTable = (props) => {
       offset: pageSize * pageIndex,
       order: `${orderBy} ${order}`,
     };
-    try {
-      getVehicles(Object.assign(options, search), token);
-    } catch (e) {
-      setMessage(e.message);
-    }
-    // eslint-disable-next-line
+    (async () => {
+      try {
+        await getVehicles(Object.assign(options, search), token);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageIndex, pageSize, orderBy, order, search, token]);
 
   return (

src/components/Cars/List/index.jsx

@@ -20,6 +20,7 @@ import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import SearchField from "../../Controls/SearchField";
+import { logger } from "../../../services/monitoring";
 
 const tableColumns = [
   {
@@ -78,24 +79,27 @@ const MainForm = () => {
 
   useEffect(() => {
     setTitle("Vehicles");
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
-    try {
-      getVehicles(
-        {
-          limit: pageSize,
-          offset: pageSize * pageIndex,
-          order: `${orderBy} ${order}`,
-          search,
-        },
-        token
-      );
-    } catch (e) {
-      setMessage(e.message);
-    }
-    // eslint-disable-next-line
+    (async () => {
+      try {
+        await getVehicles(
+          {
+            limit: pageSize,
+            offset: pageSize * pageIndex,
+            order: `${orderBy} ${order}`,
+            search,
+          },
+          token
+        );
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageIndex, pageSize, token, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {

src/components/Cars/SendCommand/index.jsx

@@ -8,6 +8,7 @@ import commands from "../../../services/commands";
 import useStyles from "../../useStyles";
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
+import { logger } from "../../../services/monitoring";
 
 const SendCommand = ({ vins }) => {
   const classes = useStyles();
@@ -50,6 +51,7 @@ const SendCommand = ({ vins }) => {
       }
     } catch (e) {
       setMessage(e.message);
+      logger.error(e.stack);
     }
   };
 
@@ -69,7 +71,7 @@ const SendCommand = ({ vins }) => {
   useEffect(() => {
     if (!commands || commands.length === 0) return;
     selectCommand(commands[0].value);
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/components/Cars/SendCommandBulk/index.jsx

@@ -8,6 +8,7 @@ import useStyles from "../../useStyles";
 import SendCommand from "../SendCommand";
 import SearchField from "../../Controls/SearchField";
 import CarSelectionTable from "../CarSelectionTable";
+import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const classes = useStyles();
@@ -30,19 +31,23 @@ const MainForm = () => {
   };
 
   const handleSelect = (event, key) => {
-    let newSelected;
-    if (event.target.checked) {
-      newSelected = [...selected];
-      newSelected.push(key);
-    } else {
-      newSelected = selected.filter((vin) => vin !== key);
+    try {
+      let newSelected;
+      if (event.target.checked) {
+        newSelected = [...selected];
+        newSelected.push(key);
+      } else {
+        newSelected = selected.filter((vin) => vin !== key);
+      }
+      setSelected(newSelected);
+    } catch (e) {
+      logger.warn(e.stack);
     }
-    setSelected(newSelected);
   };
 
   useEffect(() => {
     setTitle("Send Command");
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/components/Cars/Status/index.jsx

@@ -19,6 +19,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
+import { logger } from "../../../services/monitoring";
 
 const tableColumns = [
   {
@@ -60,23 +61,27 @@ const MainForm = () => {
 
   useEffect(() => {
     setTitle(`Vehicle ${vin} Details`);
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vin]);
+
   useEffect(() => {
-    try {
-      getCarUpdates(
-        {
-          vin,
-          limit: pageSize,
-          offset: pageSize * pageIndex,
-          order: `${orderBy} ${order}`,
-        },
-        token
-      );
-    } catch (e) {
-      setMessage(e.message);
-    }
-    // eslint-disable-next-line
+    (async () => {
+      try {
+        await getCarUpdates(
+          {
+            vin,
+            limit: pageSize,
+            offset: pageSize * pageIndex,
+            order: `${orderBy} ${order}`,
+          },
+          token
+        );
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageIndex, pageSize, token, orderBy, order]);
 
   const handleChangePageIndex = (event, newIndex) => {
@@ -89,15 +94,19 @@ const MainForm = () => {
   };
 
   const handleSort = (event, property) => {
-    if (property === orderBy) {
-      if (order === "asc") {
-        setOrder("desc");
+    try {
+      if (property === orderBy) {
+        if (order === "asc") {
+          setOrder("desc");
+        } else {
+          setOrder("asc");
+        }
       } else {
+        setOrderBy(property);
         setOrder("asc");
       }
-    } else {
-      setOrderBy(property);
-      setOrder("asc");
+    } catch (e) {
+      logger.warn(e.stack);
     }
   };
 

src/components/Cars/StatusModal/index.jsx

@@ -41,7 +41,7 @@ export default function CarStatusModal(props) {
         setMessage(e.message);
       }
     })();
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.vin]);
   return (
     <div>