Analytics Modal + CSV Bug Fix

.github/workflows/ci-check.yml

@@ -30,4 +30,4 @@ jobs:
       - name: Run Linter
         run: npm run lint
       - name: Run Type Check
-        run: npm run type-check
+        run: npm run type-check

frontend/src/components/AnalyticsTable/AnalyticsTable.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import cn from 'classnames';
 import { SRLabel } from '../FormElements/FormElements';
 import { ObjectType, TableData } from '../../types';
@@ -86,7 +86,6 @@ const Table = ({ type, data, refreshTable }: TableProps) => {
   const [rideTableData, setRideTableData] = useState<Cell[][]>();
   const [driverTableData, setDriverTableData] = useState<Cell[][]>();
   const [editData, setEditData] = useState<ObjectType>({ dates: {} });
-  const [driverNames, setDriverNames] = useState<string[]>([]);
   const { drivers } = useEmployees();
 
   const sharedCols = ['Date', 'Daily Total'];
@@ -100,11 +99,10 @@ const Table = ({ type, data, refreshTable }: TableProps) => {
     'Night Cancels',
   ]);
 
-  useEffect(() => {
-    if (drivers && !driverNames.length) {
-      setDriverNames(drivers.map((d) => `${d.firstName} ${d.lastName}`));
-    }
-  }, [driverNames, drivers]);
+  const driverNames = useMemo(
+    () => (drivers ? drivers.map((d) => `${d.firstName} ${d.lastName}`) : []),
+    [drivers]
+  );
 
   const driverTableHeader = sharedCols.concat(
     driverNames.map((name) => {
@@ -172,32 +170,32 @@ const Table = ({ type, data, refreshTable }: TableProps) => {
     if (drivers && data) {
       const rideData: Cell[][] = [];
       const driverData: Cell[][] = [];
-      data
+      const sortedData = [...data]
         .sort((a, b) => (a.year + a.monthDay < b.year + b.monthDay ? 1 : -1))
-        .forEach((d) => {
-          const month = d.monthDay.substring(0, 2);
-          const day = d.monthDay.substring(2);
-          const date = `${month}/${day}/${d.year}`;
-          const dailyTotal = d.dayCount + d.nightCount;
-          if (type === 'ride') {
-            rideData.push([
-              date,
-              dailyTotal,
-              d.dayCount,
-              d.dayNoShow,
-              d.dayCancel,
-              d.nightCount,
-              d.nightNoShow,
-              d.nightCancel,
-            ]);
-          } else {
-            const driverRow = [date, dailyTotal];
-            driverNames.forEach((driver) => {
-              driverRow.push(d.drivers[driver] || 0);
-            });
-            driverData.push(driverRow);
-          }
-        });
+      sortedData.forEach((d) => {
+        const month = d.monthDay.substring(0, 2);
+        const day = d.monthDay.substring(2);
+        const date = `${month}/${day}/${d.year}`;
+        const dailyTotal = d.dayCount + d.nightCount;
+        if (type === 'ride') {
+          rideData.push([
+            date,
+            dailyTotal,
+            d.dayCount,
+            d.dayNoShow,
+            d.dayCancel,
+            d.nightCount,
+            d.nightNoShow,
+            d.nightCancel,
+          ]);
+        } else {
+          const driverRow = [date, dailyTotal];
+          driverNames.forEach((driver) => {
+            driverRow.push(d.drivers[driver] || 0);
+          });
+          driverData.push(driverRow);
+        }
+      });
       setRideTableData(rideData);
       setDriverTableData(driverData);
     }

frontend/src/components/ExportButton/ExportButton.tsx

@@ -1,5 +1,3 @@
-import React, { useState, useRef } from 'react';
-import { CSVLink } from 'react-csv';
 import { download } from '../../icons/other';
 import { Button } from '../FormElements/FormElements';
 import styles from './exportButton.module.css';
@@ -19,30 +17,34 @@ const ExportButton = ({
   csvCols,
   filename,
 }: clickHandler) => {
-  const [downloadData, setDownloadData] = useState<string>('');
   const { showToast } = useToast();
-  const csvLink = useRef<
-    CSVLink & HTMLAnchorElement & { link: HTMLAnchorElement }
-  >(null);
 
-  const downloadCSV = () => {
-    axios
-      .get(endpoint, {
+  const downloadCSV = async () => {
+    try {
+      // fetch csv string from stats table in backend
+      const res = await axios.get(endpoint, {
         responseType: 'text',
         transformResponse: [(data) => data],
-      })
-      .then((res) => res.data)
-      .then((data) => {
-        if (data === '') {
-          setDownloadData(csvCols);
-        } else {
-          setDownloadData(data);
-        }
-        if (csvLink.current) {
-          csvLink.current.link.click();
-        }
-      })
-      .then(() => showToast(toastMsg, ToastStatus.SUCCESS));
+      });
+      const data = res.data || csvCols;
+
+      // generate a download link and initiate the download
+      const blob = new Blob([data], { type: 'text/csv' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename || 'download.csv';
+      document.body.appendChild(link);
+      link.click();
+
+      //cleanup
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+
+      showToast(toastMsg, ToastStatus.SUCCESS);
+    } catch (error) {
+      showToast('Failed to download CSV', ToastStatus.ERROR);
+    }
   };
 
   return (
@@ -54,13 +56,6 @@ const ExportButton = ({
       >
         <img src={download} alt="capacity icon" /> Export
       </Button>
-      <CSVLink
-        data={downloadData}
-        filename={filename}
-        className={styles.hidden}
-        ref={csvLink}
-        target="_blank"
-      />
     </>
   );
 };