improvements to UI; display working

src/components/Flashpack/index.jsx

@@ -6,6 +6,7 @@ import {
   TablePagination,
   TableRow,
 } from "@material-ui/core";
+import { Link } from "react-router-dom";
 import { logger } from "../../services/monitoring";
 import React, { useEffect, useState } from "react";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
@@ -20,6 +21,14 @@ const tableColumns = [
     id: "flashpack",
     label: "Flashpack Number",
   },
+  {
+    id: "car_model",
+    label: "Model",
+  },
+  {
+    id: "car_year",
+    label: "Year",
+  },
 ];
 
 const PAGE_SIZE = "FLASHPACKS_TABLE_PAGE_SIZE";
@@ -84,38 +93,26 @@ const MainForm = () => {
     setPageIndex(0);
   };
 
-  const handleSort = (event, property) => {
-    try {
-      if (property === orderBy) {
-        if (order === "asc") {
-          setOrder("desc");
-        } else {
-          setOrder("asc");
-        }
-      } else {
-        setOrderBy(property);
-        setOrder("asc");
-      }
-    } catch (e) {
-      logger.warn(e.stack);
-    }
-  };
-
   return (
     <div>
       <Table>
         <TableHeaderSortable
           classes={classes}
-          orderBy={orderBy}
-          order={order}
           columnData={tableColumns}
-          onSortRequest={handleSort}
         />
         <TableBody>
           {flashpacks && flashpacks.map((row, index) => (
             <TableRow key={index}>
               <TableCell align="center">
-                {row}
+                <Link to={`/tools/flashpack/${row.car_model}/${row.car_year}/${row.flashpack}`}>
+                  {row.flashpack}
+                </Link>
+              </TableCell>
+              <TableCell align="center">
+                {row.car_model}
+              </TableCell>
+              <TableCell align="center">
+                {row.car_year}
               </TableCell>
             </TableRow>
           ))}