sorting fields for downloading csv

Author: David Inga

client/src/containers/admin/download-materials-data-button/component.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DownloadIcon } from '@heroicons/react/solid';
 
 import Button from 'components/button';
@@ -9,6 +9,8 @@ import {
 } from 'hooks/sourcing-locations';
 import { csvDownload } from 'utils/csv-download';
 
+const yearExp = new RegExp(/^[0-9]{4}$/);
+
 const DownloadMaterialsDataButton: React.FC = () => {
   const [isDownloading, setIsDownloading] = useState<boolean>(false);
 
@@ -45,6 +47,21 @@ const DownloadMaterialsDataButton: React.FC = () => {
   );
 
   const { data } = useSourcingLocationsMaterialsTabularData(sourcingData);
+  const parsedData = useMemo(
+    () =>
+      data.map((row) => {
+        // Adding _tons to the end of the year keys
+        Object.keys(row)
+          // Sorting years at the end
+          .sort((a, b) => yearExp.test(a) && yearExp.test(b) && parseInt(a, 10) - parseInt(b, 10))
+          .forEach((key) => {
+            const newKey = yearExp.test(key) && `${key}_tons`;
+            if (newKey) delete Object.assign(row, { [newKey]: row[key] })[key];
+          });
+        return row;
+      }),
+    [data],
+  );
   const { updatedAt } = sourcingLocations?.data?.[0];
 
   const handleDownload = useCallback(() => {
@@ -56,12 +73,12 @@ const DownloadMaterialsDataButton: React.FC = () => {
   useEffect(() => {
     if (isFetched && isSuccess && isDownloading) {
       csvDownload({
-        data,
+        data: parsedData,
         filename: `data_procurement_${updatedAt || ''}.csv`,
       });
       setIsDownloading(false);
     }
-  }, [isFetched, isSuccess, data, updatedAt, isDownloading]);
+  }, [isFetched, isSuccess, parsedData, updatedAt, isDownloading]);
 
   return (
     <Button