download data changed to make a request to the API

Vizzuality · Dec 19, 2023 · 63a2418 · 63a2418
1 parent 0e923f1
commit 63a2418
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 34 deletions.
diff --git a/client/src/containers/analysis-visualization/analysis-table/component.tsx b/client/src/containers/analysis-visualization/analysis-table/component.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DownloadIcon, InformationCircleIcon } from '@heroicons/react/outline';
 import { uniq, omit } from 'lodash-es';
+import toast from 'react-hot-toast';
 import { ArrowLeftIcon } from '@heroicons/react/solid';
 
 import ComparisonCell from './comparison-cell/component';
@@ -10,14 +11,15 @@ import { useAppSelector } from 'store/hooks';
 import { filtersForTabularAPI } from 'store/features/analysis/selector';
 import { scenarios } from 'store/features/analysis/scenarios';
 import { useIndicators } from 'hooks/indicators';
-import { useImpactData } from 'hooks/impact';
+import { useImpactData, useDownloadImpactData } from 'hooks/impact';
 import { useImpactComparison, useImpactScenarioComparison } from 'hooks/impact/comparison';
 import AnalysisDynamicMetadata from 'containers/analysis-visualization/analysis-dynamic-metadata';
-import { Anchor, Button } from 'components/button';
+import { Button } from 'components/button';
 import Table from 'components/table/component';
 import { NUMBER_FORMAT } from 'utils/number-format';
 import { DEFAULT_PAGE_SIZES } from 'components/table/pagination/constants';
 import { useIndicatorParam } from 'utils/indicator-param';
+import { handleResponseError } from 'services/api';
 
 import type {
   ExpandedState,
@@ -32,8 +34,6 @@ import type { ColumnDefinition } from 'components/table/column';
 import type { ChartData } from './chart-cell/types';
 import type { ComparisonMode, ImpactRowType, ImpactTableValueItem } from './types';
 
-type AnalysisTableProps<Mode extends ComparisonMode> = TableProps<ImpactRowType<Mode>>;
-
 const NUMBER_FORMATTER = NUMBER_FORMAT;
 
 const isParentRow = <Mode extends ComparisonMode>(
@@ -42,29 +42,6 @@ const isParentRow = <Mode extends ComparisonMode>(
   return 'metadata' in row;
 };
 
-const dataToCsv = <Mode extends ComparisonMode>(tableData: AnalysisTableProps<Mode>): string => {
-  const LINE_SEPARATOR = '\r\n';
-
-  if (!tableData) return null;
-  let str = 'data:text/csv;charset=utf-8,';
-  str +=
-    tableData.columns
-      // .filter(({ dataType }) => ['number', 'string'].includes(dataType))
-      .map((column) => column.header || column.id)
-      .join(';') + LINE_SEPARATOR;
-
-  tableData.data?.forEach(({ name, values }) => {
-    const rowData: (string | number)[] = [name];
-    (values as unknown[] as ImpactRowType<false>['values'])?.forEach(({ value }) => {
-      rowData.push(value);
-    });
-
-    str += rowData.join(';') + LINE_SEPARATOR;
-  });
-
-  return str;
-};
-
 const AnalysisTable = () => {
   const [paginationState, setPaginationState] = useState<PaginationState>({
     pageIndex: 1,
@@ -87,6 +64,12 @@ const AnalysisTable = () => {
     { 'filter[status]': 'active' },
     { select: (data) => data.data },
   );
+  const downloadImpactData = useDownloadImpactData({
+    onSuccess: () => {
+      toast.success('Data was downloaded successfully');
+    },
+    onError: handleResponseError,
+  });
 
   const filters = useAppSelector(filtersForTabularAPI);
 
@@ -190,6 +173,18 @@ const AnalysisTable = () => {
     return impactTable[0]?.rows[0]?.values.find((value) => value.isProjected)?.year;
   }, [impactTable]);
 
+  const handleDownloadData = useCallback(() => {
+    const csv = downloadImpactData.mutate();
+    // if (csv) {
+    //   const link = document.createElement('a');
+    //   link.setAttribute('href', csv);
+    //   link.setAttribute('download', 'data.csv');
+    //   document.body.appendChild(link);
+    //   link.click();
+    //   document.body.removeChild(link);
+    // }
+  }, [downloadImpactData]);
+
   const handleExpandedChange = useCallback(
     <Mode extends ComparisonMode>(table: TableType<ImpactRowType<Mode>>) => {
       if (!!expandedState) {
@@ -467,25 +462,22 @@ const AnalysisTable = () => {
     ],
   );
 
-  const csv = useMemo<string | null>(() => encodeURI(dataToCsv(tableProps)), [tableProps]);
-
   return (
     <div className="flex flex-col flex-1">
       <div className="flex justify-between px-6">
         <div className="flex items-end justify-between w-full">
           <AnalysisDynamicMetadata />
           <div>
-            <Anchor
-              href={csv}
+            <Button
               variant="secondary"
               size="base"
               className="flex-shrink-0"
               disabled={isLoading}
-              download="report.csv"
               icon={<DownloadIcon />}
+              onClick={handleDownloadData}
             >
               Download Data
-            </Anchor>
+            </Button>
           </div>
         </div>
       </div>

diff --git a/client/src/hooks/impact/index.ts b/client/src/hooks/impact/index.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { apiRawService } from 'services/api';
 
@@ -64,3 +64,13 @@ export const useImpactData = <T = ImpactDataApiResponse<false>>(
 
   return query;
 };
+
+export const useDownloadImpactData = (options) => {
+  const requestDownload = () =>
+    apiRawService.get('/impact/table/report').then((response) => response.data);
+  const mutation = useMutation(requestDownload, {
+    mutationKey: ['download-impact-data'],
+    ...options,
+  });
+  return mutation;
+};