Add updates by car screen and modal popup (#29)

src/components/CarUpdates/Status/index.jsx

@@ -20,12 +20,15 @@ import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
+import VehicleStatus from "../../Cars/StatusModal";
 
 const MainForm = () => {
   const { packageid } = useParams();
   const classes = useStyles();
   const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(0);
+  const [viewVIN, setViewVIN] = useState(null);
+
   const {
     getCarUpdates,
     carUpdates,
@@ -74,6 +77,15 @@ const MainForm = () => {
     setPageIndex(0);
   };
 
+  const handleViewVIN = (event) => {
+    event.preventDefault();
+    setViewVIN(event.target.innerHTML);
+  };
+
+  const handleCloseViewVIN = (event) => {
+    setViewVIN(null);
+  };
+
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
       <Typography component="h1" variant="h5">
@@ -96,7 +108,11 @@ const MainForm = () => {
             {carUpdates.map((row) => (
               <TableRow key={row.id}>
                 <TableCell align="center">{row.id}</TableCell>
-                <TableCell align="center">{row.vin}</TableCell>
+                <TableCell align="center">
+                  <span className={classes.link} onClick={handleViewVIN}>
+                    {row.vin}
+                  </span>
+                </TableCell>
                 <TableCell align="center">{row.status}</TableCell>
                 <TableCell align="center">
                   {LocalDateTimeString(row.created)}
@@ -126,6 +142,7 @@ const MainForm = () => {
           </TableFooter>
         </Table>
       </TableContainer>
+      <VehicleStatus vin={viewVIN} handleClose={handleCloseViewVIN} />
     </div>
   );
 };