Wrap display export into a function

twentyhq · May 22, 2024 · 2f8bf4c · 2f8bf4c
1 parent 9518161
commit 2f8bf4c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 27 deletions.
diff --git a/...ges/twenty-front/src/modules/object-record/record-action-bar/hooks/useRecordActionBar.tsx b/...ges/twenty-front/src/modules/object-record/record-action-bar/hooks/useRecordActionBar.tsx
@@ -15,7 +15,10 @@ import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
 import { useExecuteQuickActionOnOneRecord } from '@/object-record/hooks/useExecuteQuickActionOnOneRecord';
-import { useExportTableData } from '@/object-record/record-index/options/hooks/useExportTableData';
+import {
+  displayedExportProgress,
+  useExportTableData,
+} from '@/object-record/record-index/options/hooks/useExportTableData';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
@@ -111,13 +114,7 @@ export const useRecordActionBar = ({
   const baseActions: ContextMenuEntry[] = useMemo(
     () => [
       {
-        label: `${
-          progress?.count === undefined
-            ? `Export`
-            : `Export (${progress.count}${
-                progress.type === 'percentage' ? '%' : ''
-              })`
-        }`,
+        label: displayedExportProgress(progress),
         Icon: IconFileExport,
         accent: 'default',
         onClick: () => download(),

diff --git a/...dules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/...dules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
@@ -9,7 +9,10 @@ import {
 } from 'twenty-ui';
 
 import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId';
-import { useExportTableData } from '@/object-record/record-index/options/hooks/useExportTableData';
+import {
+  displayedExportProgress,
+  useExportTableData,
+} from '@/object-record/record-index/options/hooks/useExportTableData';
 import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard';
 import { useRecordIndexOptionsForTable } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForTable';
 import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
@@ -123,13 +126,7 @@ export const RecordIndexOptionsDropdownContent = ({
           <MenuItem
             onClick={download}
             LeftIcon={IconFileExport}
-            text={
-              progress?.count === undefined
-                ? `Export`
-                : `Export (${progress.count}${
-                    progress.type === 'percentage' ? '%' : ''
-                  })`
-            }
+            text={displayedExportProgress(progress)}
           />
         </DropdownMenuItemsContainer>
       )}

diff --git a/...s/twenty-front/src/modules/object-record/record-index/options/hooks/useExportTableData.ts b/...s/twenty-front/src/modules/object-record/record-index/options/hooks/useExportTableData.ts
@@ -7,6 +7,7 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { isDefined } from '~/utils/isDefined';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 import { useFindManyParams } from '../../hooks/useLoadRecordIndexTable';
 
@@ -31,8 +32,9 @@ type GenerateExportOptions = {
 type GenerateExport = (data: GenerateExportOptions) => string;
 
 type ExportProgress = {
-  count?: number;
-  type: 'percentage' | 'number';
+  exportedRecordCount?: number;
+  totalRecordCount?: number;
+  displayType: 'percentage' | 'number';
 };
 
 export const generateCsv: GenerateExport = ({
@@ -82,10 +84,28 @@ export const generateCsv: GenerateExport = ({
   });
 };
 
-export const percentage = (part: number, whole: number): number => {
+const percentage = (part: number, whole: number): number => {
   return Math.round((part / whole) * 100);
 };
 
+export const displayedExportProgress = (progress?: ExportProgress): string => {
+  if (isUndefinedOrNull(progress?.exportedRecordCount)) {
+    return 'Export';
+  }
+
+  if (
+    progress.displayType === 'percentage' &&
+    isDefined(progress?.totalRecordCount)
+  ) {
+    return `Export (${percentage(
+      progress.exportedRecordCount,
+      progress.totalRecordCount,
+    )}%)`;
+  }
+
+  return `Export (${progress.exportedRecordCount})`;
+};
+
 const downloader = (mimeType: string, generator: GenerateExport) => {
   return (filename: string, data: GenerateExportOptions) => {
     const blob = new Blob([generator(data)], { type: mimeType });
@@ -116,8 +136,7 @@ export const useExportTableData = ({
   const [inflight, setInflight] = useState(false);
   const [pageCount, setPageCount] = useState(0);
   const [progress, setProgress] = useState<ExportProgress>({
-    count: undefined,
-    type: 'number',
+    displayType: 'number',
   });
   const [previousRecordCount, setPreviousRecordCount] = useState(0);
 
@@ -163,8 +182,7 @@ export const useExportTableData = ({
       csvDownloader(filename, { rows, columns });
       setIsDownloading(false);
       setProgress({
-        count: undefined,
-        type: 'number',
+        displayType: 'number',
       });
     };
 
@@ -174,10 +192,9 @@ export const useExportTableData = ({
       await fetchMoreRecords();
       setPageCount((state) => state + 1);
       setProgress({
-        count: totalCount
-          ? percentage(pageCount, MAXIMUM_REQUESTS)
-          : records.length,
-        type: totalCount ? 'percentage' : 'number',
+        exportedRecordCount: records.length,
+        totalRecordCount: totalCount,
+        displayType: totalCount ? 'percentage' : 'number',
       });
       await sleep(delayMs);
       setInflight(false);