3988 - Data Table: CSV export file name

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()

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])
+}

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>

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}
                 />
               ))}
 

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}
                 />
               ))}
 

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>

src/utils/dates.ts

@@ -29,9 +29,9 @@ export const Dates = {
   addDays,
   addMonths,
   differenceInDays,
-  isAfter,
-  isBefore,
   format,
   getRelativeDate,
+  isAfter,
+  isBefore,
   parseISO,
 }