issues fixed

src/components/SUMS/__snapshots__/index.test.jsx.snap

@@ -71,19 +71,25 @@ exports[`SUMS Render 1`] = `
                     </span>
                   </th>
                   <th
+                    aria-sort="descending"
                     class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                     scope="col"
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
                       role="button"
                       tabindex="0"
                     >
                       Created
+                      <span
+                        class="makeStyles-hiddenSortSpan-0"
+                      >
+                        sorted descending
+                      </span>
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
                         focusable="false"
                         viewBox="0 0 24 24"
                       >

src/components/SUMS/index.jsx

@@ -31,7 +31,7 @@ import { RoleWrap } from "../Controls/RoleWrap";
 
 const tableColumns = [
   {
-    id: "sums_rxswin",
+    id: "rxswin",
     label: "RXSWIN (RX Software Identification Number)",
   },
   {
@@ -47,7 +47,7 @@ const MainForm = () => {
   const classes = useStyles();
   const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
-  const [orderBy, setOrderBy] = useState("id");
+  const [orderBy, setOrderBy] = useState("created_at");
   const [order, setOrder] = useState("desc");
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [rowToDelete, setRowToDelete] = useState({});
@@ -55,6 +55,7 @@ const MainForm = () => {
     deleteSUMSVersionRxSwins,
     getSUMSVersionRxSwins,
     versionRxSwins,
+    totalVersionRxSwins,
     stopMonitor,
   } = useCarUpdatesContext();
   const {
@@ -78,21 +79,28 @@ const MainForm = () => {
   }, []);
 
   useEffect(() => {
-    (async () => {
-      try {
-        if (!sums_version || !token) return;
-        stopMonitor();
-        await getSUMSVersionRxSwins(
-          sums_version,
-          token
-        );
-      } catch (e) {
-        setMessage(e.message);
-        logger.warn(e.stack);
-      }
-    })();
+    loadSUMSVersionRxSwins();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sums_version, token]);
+  }, [sums_version, token, pageIndex, pageSize, orderBy, order]);
+
+  const loadSUMSVersionRxSwins = async () => {
+    try {
+      if (!sums_version || !token) return;
+      stopMonitor();
+      await getSUMSVersionRxSwins(
+        sums_version,
+        {
+          limit: pageSize,
+          offset: pageSize * pageIndex,
+          order: `${orderBy} ${order}`,
+        },
+        token
+      );
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
 
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
@@ -128,10 +136,14 @@ const MainForm = () => {
   const sendDelete = async () => {
     if (rowToDelete) {
       try {
-        await deleteSUMSVersionRxSwins(rowToDelete.version, rowToDelete.rxswin, token);
-        setMessage(`Sent delete for ${rowToDelete.rxswin}`);
+        const result = await deleteSUMSVersionRxSwins(rowToDelete.version, rowToDelete.rxswin, token);
+        if (!result || result.error) return;
+
+        setMessage(`Deleted ${rowToDelete.rxswin}`);
+        loadSUMSVersionRxSwins();
       } catch (e) {
         setMessage(e.message);
+        logger.warn(e.stack);
       }
     }
   };
@@ -166,7 +178,7 @@ const MainForm = () => {
                 <RoleWrap
                   groups={groups}
                   providers={providers}
-                  rolesPerProvider={Permissions.FiskerMagnaCreate}
+                  rolesPerProvider={Permissions.FiskerMagnaDelete}
                 >
                   <IconButton
                     onClick={() => onDeleteClick(row)}
@@ -188,8 +200,8 @@ const MainForm = () => {
             ) : (
               <TablePagination
                 rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={8}
-                count={versionRxSwins.length}
+                colSpan={3}
+                count={totalVersionRxSwins}
                 rowsPerPage={pageSize}
                 page={pageIndex}
                 SelectProps={{