improvements to UI; display working

src/components/Contexts/VehicleContext.jsx

@@ -32,6 +32,8 @@ export const VehicleProvider = ({ children }) => {
   const [years, setYears] = useState([]);
   const [flashpacks, setFlashpacks] = useState([]);
   const [totalFlashpacks, setTotalFlashpacks] = useState(0);
+  const [flashpackECUMappings, setFlashpackECUMappings] = useState([])
+  const [totalFlashpackECUMappings, setTotalFlashpackECUMappings] = useState(0)
 
   const addConnections = async (cars, token) => {
     try {
@@ -309,18 +311,18 @@ export const VehicleProvider = ({ children }) => {
     return result;
   };
 
-  const getFlashpackECUMappings = async (flashpack, model, year, options, token) => {
+  const getFlashpackECUMappings = async (model, year, flashpack, options, token) => {
     let result;
     try {
       setBusy(true);
 
-      result = await api.getAllFlashpacks(options, token);
+      result = await api.getFlashpackECUMappings(model, year, flashpack, options, token);
       if (result.error)
-        throw new Error(`Get all flashpacks error. ${result.message}`);
+        throw new Error(`Get flashpack ecu mappings error. ${result.message}`);
 
-      setFlashpacks(result.data);
+      setFlashpackECUMappings(result.data);
       if (options && options.offset === 0 && result.total) {
-        setTotalFlashpacks(result.total);
+        setTotalFlashpackECUMappings(result.total);
       }
     } finally {
       setBusy(false);
@@ -361,9 +363,9 @@ export const VehicleProvider = ({ children }) => {
         flashpacks,
         totalFlashpacks,
         getAllFlashpacks,
+        totalFlashpackECUMappings,
+        flashpackECUMappings,
         getFlashpackECUMappings,
-        // addFlashpackECUMapping,
-        // deleteFlashpackECUMapping,
       }}
     >
       {children}

src/components/Flashpack/Details/index.jsx

@@ -1,3 +1,5 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import {
   Table,
   TableBody,
@@ -7,7 +9,6 @@ import {
   TableRow,
 } from "@material-ui/core";
 import { logger } from "../../../services/monitoring";
-import React, { useEffect, useState } from "react";
 import { useVehicleContext, VehicleProvider } from "../../Contexts/VehicleContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
@@ -17,11 +18,11 @@ import useStyles from "../../useStyles";
 
 const tableColumns = [
   {
-    id: "ecu_name",
+    id: "car_ecu_name",
     label: "ECU Name",
   },
   {
-    id: "ecu_version",
+    id: "car_ecu_version",
     label: "ECU Version",
   },
 ];
@@ -29,6 +30,7 @@ const tableColumns = [
 const PAGE_SIZE = "FLASHPACK_MAPPINGS_TABLE_PAGE_SIZE";
 
 const MainForm = () => {
+  const { model, year, flashpack } = useParams();
   const classes = useStyles();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
@@ -36,37 +38,39 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("flashpack");
   const [order, setOrder] = useState("desc");
   const {
-    getAllFlashpacks,
+    getFlashpackECUMappings,
-    flashpacks,
+    flashpackECUMappings,
-    totalFlashpacks,
+    totalFlashpackECUMappings,
   } = useVehicleContext();
   const {
     token: {
       idToken: { jwtToken: token },
     },
   } = useUserContext();
-  const { flashpack } = useParams();
 
   useEffect(() => {
     setTitle(`Flashpack ${flashpack}`);
     setSitePath([
       {
         label: `Flashpack ${flashpack}`,
-        link: `/tools/flashpack/${flashpack}`,
+        link: `/flashpack/${model}/${year}/${flashpack}`,
       },
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
-    loadFlashpacks();
+    loadFlashpackECUMappings();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token, token, pageIndex, pageSize, orderBy, order]);
 
-  const loadFlashpacks = async () => {
+  const loadFlashpackECUMappings = async () => {
     try {
       if (!token) return;
-      await getAllFlashpacks(
+      await getFlashpackECUMappings(
+        model,
+        year,
+        flashpack,
         {
           limit: pageSize,
           offset: pageSize * pageIndex,
@@ -117,23 +121,26 @@ const MainForm = () => {
           onSortRequest={handleSort}
         />
         <TableBody>
-          {flashpacks && flashpacks.map((row, index) => (
+          {flashpackECUMappings && flashpackECUMappings.map((row, index) => (
             <TableRow key={index}>
               <TableCell align="center">
-                {row}
+                {row.car_ecu_name}
+              </TableCell>
+              <TableCell align="center">
+                {row.car_ecu_version}
               </TableCell>
             </TableRow>
           ))}
         </TableBody>
         <TableFooter>
           <TableRow>
-            {!flashpacks || flashpacks.length === 0 ? (
+            {!flashpackECUMappings || flashpackECUMappings.length === 0 ? (
-              <TableCell colSpan={8} align="center">No Flashpack Numbers</TableCell>
+              <TableCell colSpan={8} align="center">No Flashpack ECU Mappings</TableCell>
             ) : (
               <TablePagination
                 rowsPerPageOptions={[5, 10, 25, 100]}
                 colSpan={1}
-                count={totalFlashpacks}
+                count={totalFlashpackECUMappings}
                 rowsPerPage={pageSize}
                 page={pageIndex}
                 SelectProps={{

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>
           ))}

src/components/Routes/SiteRoutes.jsx

@@ -292,12 +292,12 @@ const SiteRoutes = () => {
           providers={providers}
         />
         <AuthRoute
-          path="/tools/flashpack/:flashpack"
+          path="/tools/flashpack/:model/:year/:flashpack"
           render={() => <FlashpackDetails />}
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          rolesPerGroup={Permissions.FiskerCreate}
+          rolesPerGroup={Permissions.FiskerRead}
           providers={providers}
         />
         <AuthRoute

src/services/vehiclesAPI.js

@@ -262,7 +262,7 @@ const vehiclesAPI = {
   },
 
   getAllFlashpacks: async (options, token) => {
-    return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_get_all`, options), {
+    return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_versions`, options), {
       method: "GET",
       headers: Object.assign(
         { "Content-Type": "application/json" },
@@ -273,7 +273,7 @@ const vehiclesAPI = {
   },
 
   getFlashpackECUMappings: async (model, year, flashpack, options, token) => {
-    return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_ecu_mappings/${model}/${year}/${flashpack}`, options), {
+    return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_version_ecu_mappings/${model}/${year}/${flashpack}`, options), {
       method: "GET",
       headers: Object.assign(
         { "Content-Type": "application/json" },