Merge branch 'release/0.0.3'

src/components/Fleets/Status/Vehicles/Table/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 import {
   Grid,
   Table,
@@ -15,24 +15,28 @@ import DeleteIcon from "@material-ui/icons/Delete";
 import clsx from "clsx";
 
 import TableHeaderSortable from "../../../../Table/HeaderSortable";
-import { useUserContext } from "../../../../Contexts/UserContext"
+import { useUserContext } from "../../../../Contexts/UserContext";
 import { useStatusContext } from "../../../../Contexts/StatusContext";
-import { FleetProvider, useFleetContext } from "../../../../Contexts/FleetContext"
+import {
+  FleetProvider,
+  useFleetContext,
+} from "../../../../Contexts/FleetContext";
 import useStyles from "../../../../useStyles";
 import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
 import { Roles, hasRole } from "../../../../../utils/roles";
-import {useLocalStorage} from "../../../../useLocalStorage";
+import { useLocalStorage } from "../../../../useLocalStorage";
+import DeleteConfirmation from "../../../../DeleteConfirmation";
 
 const tableColumns = [
   {
     id: "vin",
-    label: "VIN"
+    label: "VIN",
   },
   {
     id: "",
-    label: "Actions"
-  }
+    label: "Actions",
+  },
 ];
 
 const PAGE_SIZE = "FLEET_STATUS_VEHICLES_TABLE_PAGE_SIZE";
@@ -43,10 +47,21 @@ const MainForm = ({ name }) => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
   const [search, setSearch] = useState("");
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
   const classes = useStyles();
   const { setMessage } = useStatusContext();
-  const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
-  const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
+  const {
+    fleetVehicles,
+    totalFleetVehicles,
+    getFleetVehicles,
+    deleteFleetVehicle,
+  } = useFleetContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+    groups,
+  } = useUserContext();
 
   const handleSearch = (query) => {
     setSearch(query);
@@ -103,7 +118,7 @@ const MainForm = ({ name }) => {
   const onDelete = async (vin) => {
     try {
       await deleteFleetVehicle(name, { vin: vin }, token);
-      setMessage(`Deleted ${vin}`)
+      setMessage(`Deleted ${vin}`);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -116,8 +131,8 @@ const MainForm = ({ name }) => {
       actions.push({
         tip: `Delete "${vin}"`,
         id: vin,
-        icon: <DeleteIcon aria-label={`Delete ${vin}`} />
-      })
+        icon: <DeleteIcon aria-label={`Delete ${vin}`} />,
+      });
     }
     if (actions.length === 0) return ["No actions"];
 
@@ -132,11 +147,19 @@ const MainForm = ({ name }) => {
         );
       } else {
         return (
-          <Tooltip key={`delete-${action.id}`} title={action.tip}>
-            <Link to="#" onClick={() => onDelete(action.id)}>
-              {action.icon}
-            </Link>
-          </Tooltip>
+          <div>
+            <Tooltip key={`delete-${action.id}`} title={action.tip}>
+              <Link to="#" onClick={() => onDelete(action.id)}>
+                {action.icon}
+              </Link>
+            </Tooltip>
+            <DeleteConfirmation
+              message={action.id}
+              open={showDeleteModal}
+              close={() => setShowDeleteModal(false)}
+              deleteFunction={() => onDelete(action.id)}
+            />
+          </div>
         );
       }
     });
@@ -146,12 +169,15 @@ const MainForm = ({ name }) => {
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={classes.textJustifyAlign}>
-          <Link to={`/fleet/${name}/vehicle-add`} className={classes.labelInline}>
+          <Link
+            to={`/fleet/${name}/vehicle-add`}
+            className={classes.labelInline}
+          >
             <AddCircleIcon fontSize="large" />
           </Link>
         </Grid>
         <Grid item md={8} align="right" className={classes.textCenterAlign}>
-          <SearchField classes={classes} onSearch={handleSearch}/>
+          <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
       </Grid>
       <Table>
@@ -163,7 +189,7 @@ const MainForm = ({ name }) => {
           onSortRequest={handleSort}
         />
         <TableBody>
-          {fleetVehicles.map(vin => (
+          {fleetVehicles.map((vin) => (
             <TableRow key={vin}>
               <TableCell align="center">
                 <Link to={`/vehicle-status/${vin}`}>{vin}</Link>
@@ -190,7 +216,7 @@ const MainForm = ({ name }) => {
           </TableRow>
         </TableFooter>
       </Table>
-    </div >
+    </div>
   );
 };