feat: add start and end date as suffix for the csv download

gwynndp · Feb 18, 2022 · 4adde97 · 4adde97
1 parent e775f8b
commit 4adde97
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 21 deletions.
diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js
@@ -7,7 +7,6 @@ import {
 } from 'utilities';
 import CustomTableFilter from 'components/common/CustomTableFilter/CustomTableFilter';
 import CustomTableItemDetails from 'components/common/CustomTableItemDetails/CustomTableItemDetails';
-
 /**
  * @constant
  * @name earningTableMetaData
@@ -68,6 +67,8 @@ const prepareRows = (rows) =>
   rows.map((row) => {
     return {
       ...row,
+      csv_start_date: row.consolidation_period_start,
+      csv_end_date: row.consolidation_period_end,
       consolidation_period_start: covertDateStringToHumanReadableFormat(
         row.consolidation_period_start,
         'mmm d, yyyy'
@@ -94,7 +95,7 @@ const prepareRows = (rows) =>
 function EarningsTable() {
   // state for earnings table
   const [earnings, setEarnings] = useState([]);
-  const [activeDateRageString, setActiveDateRageString] = useState('');
+  const [activeDateRangeString, setActiveDateRangeString] = useState('');
   const [filter, setFilter] = useState({});
   const [page, setPage] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
@@ -136,9 +137,9 @@ function EarningsTable() {
         filter?.start_date,
         filter?.end_date
       );
-      setActiveDateRageString(dateRangeString);
+      setActiveDateRangeString(dateRangeString);
     } else {
-      setActiveDateRageString('');
+      setActiveDateRangeString('');
     }
 
     getEarnings();
@@ -151,7 +152,7 @@ function EarningsTable() {
       sortBy={sortBy}
       rows={earnings}
       isLoading={isLoading}
-      activeDateRage={activeDateRageString}
+      activeDateRange={activeDateRangeString}
       setRowsPerPage={setEarningsPerPage}
       rowsPerPage={earningsPerPage}
       setSortBy={setSortBy}
@@ -181,12 +182,13 @@ function EarningsTable() {
           setIsMainFilterOpen={setIsDateFilterOpen}
         />
       }
-      rowDetails={selectedEarning ? (
-        <CustomTableItemDetails
-          selectedItem={selectedEarning}
-          closeDetails={() => setSelectedEarning(null)}
-          refreshData={getEarnings}
-        />
+      rowDetails={
+        selectedEarning ? (
+          <CustomTableItemDetails
+            selectedItem={selectedEarning}
+            closeDetails={() => setSelectedEarning(null)}
+            refreshData={getEarnings}
+          />
         ) : null
       }
       actionButtonType="export"

diff --git a/src/components/common/CustomTable/CustomTable.js b/src/components/common/CustomTable/CustomTable.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Table from '@material-ui/core/Table';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
@@ -20,6 +20,7 @@ import Avatar from '@material-ui/core/Avatar';
 import TablePagination from '@material-ui/core/TablePagination';
 import Typography from '@material-ui/core/Typography';
 import useStyles from './CustomTable.styles';
+import dateFormat from 'dateformat';
 
 /**
  * @function
@@ -78,7 +79,7 @@ ImportAction.defaultProps = {
  * @param {function} props.openMainFilter - opens main filter when called
  * @param {function} props.onSelectFile - callback function to be called when file is selected
  * @param {string} props.headerTitle - title of the table
- * @param {string} props.activeDateRage - string representing the active date range (i.e. 'Oct 1 - Oct 5') in the date filter button
+ * @param {string} props.activeDateRange - string representing the active date range (i.e. 'Oct 1 - Oct 5') in the date filter button
  * @param {Array} props.data - data to be exported
  *
  * @returns {React.Component}
@@ -90,10 +91,32 @@ function CustomTableHeader(props) {
     data,
     openDateFilter,
     openMainFilter,
-    activeDateRage,
+    activeDateRange,
     onSelectFile,
   } = props;
   const classes = useStyles();
+  const [csvFileNameSuffix, setCsvFileNameSuffix] = useState('');
+
+  useEffect(() => {
+    if (!data || data.length == 0) return;
+    const consolidationPeriodStarts = data.map(
+      (row) => new Date(row.csv_start_date)
+    );
+    const consolidationPeriodEnds = data.map(
+      (row) => new Date(row.csv_end_date)
+    );
+    const minPeriodStart = consolidationPeriodStarts.reduce(
+      (pStart1, pStart2) => {
+        return pStart1 > pStart2 ? pStart2 : pStart1;
+      }
+    );
+    const maxPeriodEnd = consolidationPeriodEnds.reduce((pEnd1, pEnd2) => {
+      return pEnd1 > pEnd2 ? pEnd1 : pEnd2;
+    });
+    const minCsvStartDate = dateFormat(new Date(minPeriodStart), 'yyyy-mm-dd');
+    const maxCsvEndDate = dateFormat(new Date(maxPeriodEnd), 'yyyy-mm-dd');
+    setCsvFileNameSuffix(`${minCsvStartDate}_to_${maxCsvEndDate}`);
+  }, [data]);
 
   const dataToExport = data.map(
     ({
@@ -135,7 +158,7 @@ function CustomTableHeader(props) {
                 <Button color="primary" variant="text">
                   <CSVLink
                     data={dataToExport}
-                    filename={`${headerTitle.toLowerCase()}_${new Date().toLocaleDateString()}.csv`}
+                    filename={`${headerTitle.toLowerCase()}_${csvFileNameSuffix}.csv`}
                     className={classes.csvLink}
                     target="_blank"
                   >
@@ -163,9 +186,9 @@ function CustomTableHeader(props) {
                     <Typography className={classes.dateFiterButonSmallText}>
                       Date Range
                     </Typography>
-                    {activeDateRage ? (
+                    {activeDateRange ? (
                       <Typography className={classes.dateFiterButonMediumText}>
-                        {activeDateRage}
+                        {activeDateRange}
                       </Typography>
                     ) : (
                       <Typography className={classes.dateFiterButonSmallText}>
@@ -211,7 +234,7 @@ CustomTableHeader.propTypes = {
   onSelectFile: PropTypes.func,
   data: PropTypes.array.isRequired,
   headerTitle: PropTypes.string.isRequired,
-  activeDateRage: PropTypes.string.isRequired,
+  activeDateRange: PropTypes.string.isRequired,
   actionButtonType: PropTypes.string.isRequired,
 };
 
@@ -272,7 +295,7 @@ function CustomTable(props) {
     rowsPerPage,
     setSortBy,
     isLoading,
-    activeDateRage,
+    activeDateRange,
     onSelectFile,
     page,
   } = props;
@@ -331,7 +354,7 @@ function CustomTable(props) {
         openMainFilter={openMainFilter}
         data={rows}
         headerTitle={headerTitle}
-        activeDateRage={activeDateRage}
+        activeDateRange={activeDateRange}
         actionButtonType={actionButtonType}
         onSelectFile={onSelectFile}
       />
@@ -461,7 +484,7 @@ CustomTable.propTypes = {
   dateFilterComponent: PropTypes.element.isRequired,
   mainFilterComponent: PropTypes.element.isRequired,
   headerTitle: PropTypes.string.isRequired,
-  activeDateRage: PropTypes.string.isRequired,
+  activeDateRange: PropTypes.string.isRequired,
   rowDetails: PropTypes.element,
   actionButtonType: PropTypes.string.isRequired,
   rows: PropTypes.arrayOf(PropTypes.object).isRequired,