From 6ae54651cd36906a9fe1f2787023f51754ac8e38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Sorja?= <ping@mirosorja.com>
Date: Tue, 8 Oct 2024 10:10:29 +0200
Subject: [PATCH] 3988 -  Data Table: CSV export file name (#4008)

* 3988 - util/dates: getCurrentDateISOString

* 3988 - update csv export file names

* fix typo

* fix import

* 3988 - remove getCurrentISOString, use Dates.format
---
 .../ButtonTableExport/ButtonTableExport.tsx     |  8 +++++---
 .../ButtonTableExport/hooks/useFilename.ts      | 13 +++++++++++++
 .../DataExport/ResultsTable/ResultsTable.tsx    |  6 +-----
 .../ExtentOfForest/ExtentOfForest.tsx           | 17 +++++++----------
 .../ForestCharacteristics.tsx                   | 13 +++++--------
 .../pages/Section/DataTable/Table/Table.tsx     |  4 +++-
 src/utils/dates.ts                              |  4 ++--
 7 files changed, 36 insertions(+), 29 deletions(-)
 create mode 100644 src/client/components/ButtonTableExport/hooks/useFilename.ts

diff --git a/src/client/components/ButtonTableExport/ButtonTableExport.tsx b/src/client/components/ButtonTableExport/ButtonTableExport.tsx
index 54e7c31e61..8625f5b8ff 100644
--- a/src/client/components/ButtonTableExport/ButtonTableExport.tsx
+++ b/src/client/components/ButtonTableExport/ButtonTableExport.tsx
@@ -6,6 +6,7 @@ import { useIsPrintRoute } from 'client/hooks/useIsRoute'
 import { useButtonClassName } from 'client/components/Buttons/Button'
 import Icon from 'client/components/Icon'
 
+import { useFilename } from './hooks/useFilename'
 import * as Utils from './utils'
 
 type Props = {
@@ -14,14 +15,15 @@ type Props = {
   tableRef: MutableRefObject<HTMLTableElement>
 }
 
-const ButtonTableExport: React.FC<Props> = (props) => {
-  const { disabled, filename, tableRef } = props
+const ButtonTableExport: React.FC<Props> = (props: Props) => {
+  const { disabled, filename: filenameProp, tableRef } = props
 
   const [data, setData] = useState<Array<object>>([])
   const { print } = useIsPrintRoute()
   const isLocked = useIsDataLocked()
 
   const className = useButtonClassName({ disabled: !isLocked && disabled, iconName: 'hit-down', label: 'CSV' })
+  const filename = useFilename(filenameProp)
 
   if (print) return null
 
@@ -30,7 +32,7 @@ const ButtonTableExport: React.FC<Props> = (props) => {
       asyncOnClick
       className={className}
       data={data}
-      filename={`${filename}.csv`}
+      filename={filename}
       onClick={(_, done) => {
         setData(Utils.getData(tableRef.current))
         done()
diff --git a/src/client/components/ButtonTableExport/hooks/useFilename.ts b/src/client/components/ButtonTableExport/hooks/useFilename.ts
new file mode 100644
index 0000000000..7866e6620e
--- /dev/null
+++ b/src/client/components/ButtonTableExport/hooks/useFilename.ts
@@ -0,0 +1,13 @@
+import { useMemo } from 'react'
+
+import { Dates } from 'utils/dates'
+
+import { useCycleRouteParams } from 'client/hooks/useRouteParams'
+
+export const useFilename = (filename: string): string => {
+  const { assessmentName, cycleName } = useCycleRouteParams()
+  return useMemo(() => {
+    const date = Dates.format(new Date(), 'yyyy-MM-dd')
+    return `${assessmentName}-${cycleName}-${filename}-${date}.csv`
+  }, [assessmentName, cycleName, filename])
+}
diff --git a/src/client/pages/DataExport/ResultsTable/ResultsTable.tsx b/src/client/pages/DataExport/ResultsTable/ResultsTable.tsx
index 45b7089fe7..1f25679947 100644
--- a/src/client/pages/DataExport/ResultsTable/ResultsTable.tsx
+++ b/src/client/pages/DataExport/ResultsTable/ResultsTable.tsx
@@ -79,11 +79,7 @@ const ResultsTable: React.FC<{ tableName: string }> = ({ tableName }) => {
   return (
     <div className="fra-table__container results-table">
       <div className="fra-table__scroll-wrapper">
-        <ButtonTableExport
-          disabled={exportDisabled}
-          filename={`${assessmentName}-${sectionName}`}
-          tableRef={tableRef}
-        />
+        <ButtonTableExport disabled={exportDisabled} filename={`dataExport-${sectionName}`} tableRef={tableRef} />
 
         <table ref={tableRef} className="fra-table data-table">
           <thead>
diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx
index baeb74bb4d..9880f95a22 100644
--- a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx
@@ -36,27 +36,24 @@ const ExtentOfForest: React.FC<Props> = (props) => {
 
   const tableRef = useRef(null)
 
+  const fileName = `odp-${t(`nationalDataPoint.forestCategoriesLabel${cycleName === '2025' ? '2025' : ''}`)} ${
+    year ?? ''
+  }`
   return (
     <div className="odp__section">
       {!print && (
         <div className="odp__section-header">
-          <ButtonTableExport
-            tableRef={tableRef}
-            filename={`FRA${cycleName} - ${t(
-              `nationalDataPoint.forestCategoriesLabel${cycleName === '2025' ? '2025' : ''}`
-            )} ${year ?? ''}`}
-            disabled={year === -1 || year === undefined}
-          />
+          <ButtonTableExport disabled={year === -1 || year === undefined} filename={fileName} tableRef={tableRef} />
           <h3 className="subhead">
             {t(`nationalDataPoint.forestCategoriesLabel${cycleName === '2025' ? '2025' : ''}`)}
           </h3>
           <DefinitionLink
+            anchor="1a"
             assessmentName={assessmentName}
             cycleName={cycleName}
             document="tad"
-            anchor="1a"
-            title={t('definition.definitionLabel')}
             lang={language}
+            title={t('definition.definitionLabel')}
           />
         </div>
       )}
@@ -91,11 +88,11 @@ const ExtentOfForest: React.FC<Props> = (props) => {
 
               {nationalClasses.map((nationalClass, index) => (
                 <ExtentOfForestRow
-                  originalDataPoint={originalDataPoint}
                   key={nationalClass.name}
                   canEditData={canEditData}
                   index={index}
                   nationalClassValidation={nationalClassValidations[index]}
+                  originalDataPoint={originalDataPoint}
                 />
               ))}
 
diff --git a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
index 4d540184e1..10ce08dbbc 100644
--- a/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
+++ b/src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
@@ -51,25 +51,22 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
 
   const tableRef = useRef(null)
 
+  const fileName = `odp-${t('nationalDataPoint.forestCharacteristics')} ${year ?? ''}`
   return (
     <div className="odp__section">
       {!print && (
         <div className="odp__section-header">
-          <ButtonTableExport
-            tableRef={tableRef}
-            filename={`FRA${cycleName} - ${t('nationalDataPoint.forestCharacteristics')} ${year ?? ''}`}
-            disabled={year === -1 || year === undefined}
-          />
+          <ButtonTableExport disabled={year === -1 || year === undefined} filename={fileName} tableRef={tableRef} />
 
           <h3 className="subhead">{t('nationalDataPoint.forestCharacteristics')}</h3>
 
           <DefinitionLink
+            anchor="1b"
             assessmentName={assessmentName}
             cycleName={cycleName}
             document="tad"
-            anchor="1b"
-            title={t('definition.definitionLabel')}
             lang={language}
+            title={t('definition.definitionLabel')}
           />
         </div>
       )}
@@ -104,10 +101,10 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
 
               {nationalClasses.map((nationalClass, index) => (
                 <ForestCharacteristicsRow
-                  originalDataPoint={originalDataPoint}
                   key={nationalClass.name}
                   canEditData={canEditData}
                   index={index}
+                  originalDataPoint={originalDataPoint}
                 />
               ))}
 
diff --git a/src/client/pages/Section/DataTable/Table/Table.tsx b/src/client/pages/Section/DataTable/Table/Table.tsx
index a2ad97c27d..3e58aa3da5 100644
--- a/src/client/pages/Section/DataTable/Table/Table.tsx
+++ b/src/client/pages/Section/DataTable/Table/Table.tsx
@@ -48,11 +48,13 @@ const Table: React.FC<Props> = (props) => {
   const isDataLocked = useIsDataLocked()
   const canClearData = !print && !isDataLocked && !table.props.readonly
 
+  const fileName = `${sectionAnchor ? `${sectionAnchor} ` : ''}${name}`
+
   return (
     <div className={classNames('fra-table__container', { 'fra-secondary-table__wrapper': secondary })}>
       <div className="fra-table__scroll-wrapper">
         <div className="fra-table__editor">
-          {!print && <ButtonTableExport filename={`${sectionAnchor} ${name}`} tableRef={tableRef} />}
+          {!print && <ButtonTableExport filename={fileName} tableRef={tableRef} />}
           <ButtonCopyValues table={table} tableRef={tableRef} />
           {canClearData && <ButtonTableClear disabled={disabled} sectionName={sectionName} table={table} />}
         </div>
diff --git a/src/utils/dates.ts b/src/utils/dates.ts
index a1ff03c83e..9dea6474eb 100644
--- a/src/utils/dates.ts
+++ b/src/utils/dates.ts
@@ -29,9 +29,9 @@ export const Dates = {
   addDays,
   addMonths,
   differenceInDays,
-  isAfter,
-  isBefore,
   format,
   getRelativeDate,
+  isAfter,
+  isBefore,
   parseISO,
 }