bug fixes and added progress on snackbar

src/components/Table/Mock/mockValue/file.ts

@@ -2,10 +2,19 @@ export const fileValueConverter = (value: any) => {
   if (!value) return [];
   if (Array.isArray(value)) return value;
   if (typeof value === "string") {
-    return value.split(",").map((url) => ({
-      downloadURL: url.trim(),
-      name: +new Date() + "-" + Math.round(Math.random() * 1000),
-    }));
+    return value
+      .split(",")
+      .map((url) => {
+        url = url.trim();
+        if (url !== "") {
+          return {
+            downloadURL: url,
+            name: +new Date() + "-" + Math.round(Math.random() * 1000),
+          };
+        }
+        return null;
+      })
+      .filter((mockValue) => mockValue !== null);
   }
   return [];
 };

src/components/TableModals/ImportCsvWizard/ImportCsvWizard.tsx

@@ -71,8 +71,6 @@ export default function ImportCsvWizard({ onClose }: ITableModalProps) {
   const theme = useTheme();
   const isXs = useMediaQuery(theme.breakpoints.down("sm"));
   const snackbarProgressRef = useRef<ISnackbarProgressRef>();
-
-  const snackbarUploadProgressRef = useRef<ISnackbarProgressRef>();
   const { addTask, runBatchUpload, askPermission } = useUploadFileFromURL();
   const { needsConverter, getConverter } = useConverter();
 
@@ -148,7 +146,7 @@ export default function ImportCsvWizard({ onClose }: ITableModalProps) {
     columns.forEach((column, index) => {
       if (needsConverter(column.type)) {
         requiredConverts[index] = getConverter(column.type);
-        console.log({ needsUploadTypes }, column.type);
+        // console.log({ needsUploadTypes }, column.type);
         if (needsUploadTypes.includes(column.type)) {
           requiredUploads[column.fieldName + ""] = true;
         }
@@ -268,24 +266,8 @@ export default function ImportCsvWizard({ onClose }: ITableModalProps) {
         `Imported ${Number(validRows.length).toLocaleString()} rows`,
         { variant: "success" }
       );
-      if (await askPermission()) {
-        const uploadingSnackbar = enqueueSnackbar(
-          `Importing ${Number(
-            validRows.length
-          ).toLocaleString()} rows. This might take a while.`,
-          {
-            persist: true,
-            action: (
-              <SnackbarProgress
-                stateRef={snackbarUploadProgressRef}
-                target={Math.ceil(validRows.length / 500)}
-                label=" batches"
-              />
-            ),
-          }
-        );
-        await runBatchUpload(snackbarUploadProgressRef.current?.setProgress);
-        closeSnackbar(uploadingSnackbar);
+      if (Object.keys(requiredUploads).length && (await askPermission())) {
+        await runBatchUpload();
       }
     } catch (e) {
       enqueueSnackbar((e as Error).message, { variant: "error" });

src/components/TableModals/ImportCsvWizard/useConverter.ts

@@ -17,15 +17,26 @@ export default function useConverter() {
   };
 
   const imageOrFileConverter = (urls: string): RowyFile[] => {
-    return urls.split(",").map((url) => {
-      url = url.trim();
-      return {
-        downloadURL: url,
-        name: url.split("/").pop() || "",
-        lastModifiedTS: +new Date(),
-        type: "",
-      };
-    });
+    if (!urls) return [];
+    if (typeof urls === "string") {
+      return urls
+        .split(",")
+        .map((url) => {
+          url = url.trim();
+          if (url !== "") {
+            return {
+              downloadURL: url,
+              name: url.split("/").pop() || "",
+              lastModifiedTS: +new Date(),
+              type: "",
+            };
+          }
+
+          return null;
+        })
+        .filter((val) => val !== null) as RowyFile[];
+    }
+    return [];
   };
 
   const getConverter = (type: FieldType) => {

src/components/TableModals/ImportCsvWizard/useUploadFileFromURL.tsx

@@ -1,13 +1,14 @@
 import { useCallback, useRef } from "react";
 import { useSetAtom } from "jotai";
-import { useSnackbar } from "notistack";
+import { SnackbarKey, useSnackbar } from "notistack";
 import Button from "@mui/material/Button";
 
 import useUploader from "@src/hooks/useFirebaseStorageUploader";
 import { tableScope, updateFieldAtom } from "@src/atoms/tableScope";
 import { TableRowRef } from "@src/types/table";
+import SnackbarProgress from "@src/components/SnackbarProgress";
 
-const MAX_PARALLEL_TASKS = 30;
+const MAX_CONCURRENT_TASKS = 10;
 
 type UploadParamTypes = {
   docRef: TableRowRef;
@@ -75,7 +76,7 @@ export default function useUploadFileFromURL() {
         if (failures.length > 0) {
           return false;
         }
-        updateField({
+        await updateField({
           path: docRef.path,
           fieldName,
           value: uploads,
@@ -91,35 +92,67 @@ export default function useUploadFileFromURL() {
 
   const batchUpload = useCallback(
     async (batch: UploadParamTypes[]) => {
-      await Promise.all(batch.map((job) => handleUpload(job)));
+      await Promise.all(
+        batch.map((job) =>
+          handleUpload(job).then(() => {
+            snackbarProgressRef.current?.setProgress((p: number) => p + 1);
+          })
+        )
+      );
     },
     [handleUpload]
   );
 
-  const runBatchUpload = useCallback(
-    async (setProgress?: any) => {
-      let currentJobs: UploadParamTypes[] = [];
-
-      while (
-        currentJobs.length < MAX_PARALLEL_TASKS &&
-        jobs.current.length > 0
-      ) {
-        const job = jobs.current.shift();
-        if (job) {
-          currentJobs.push(job);
+  const snackbarProgressRef = useRef<any>(null);
+  const snackbarProgressId = useRef<SnackbarKey | null>(null);
+  const showProgress = useCallback(
+    (totalJobs: number) => {
+      snackbarProgressId.current = enqueueSnackbar(
+        `Uploading ${Number(
+          totalJobs
+        ).toLocaleString()} files/images. This might take a while.`,
+        {
+          persist: true,
+          action: (
+            <SnackbarProgress
+              stateRef={snackbarProgressRef}
+              target={totalJobs}
+              label=" uploaded"
+            />
+          ),
         }
-      }
-
-      if (setProgress) setProgress((p: number) => p + currentJobs.length);
-      await batchUpload(currentJobs);
-
-      if (jobs.current.length > 0) {
-        runBatchUpload();
-      }
+      );
     },
-    [batchUpload]
+    [enqueueSnackbar]
   );
 
+  const runBatchUpload = useCallback(async () => {
+    if (!snackbarProgressId.current) {
+      showProgress(jobs.current.length);
+    }
+    let currentJobs: UploadParamTypes[] = [];
+
+    while (
+      currentJobs.length < MAX_CONCURRENT_TASKS &&
+      jobs.current.length > 0
+    ) {
+      const job = jobs.current.shift();
+      if (job) {
+        currentJobs.push(job);
+      }
+    }
+
+    await batchUpload(currentJobs);
+
+    if (jobs.current.length > 0) {
+      await runBatchUpload();
+    }
+
+    if (snackbarProgressId.current) {
+      closeSnackbar(snackbarProgressId.current);
+    }
+  }, [batchUpload, closeSnackbar, showProgress, snackbarProgressId]);
+
   const addTask = useCallback((job: UploadParamTypes) => {
     jobs.current.push(job);
   }, []);

src/components/TableToolbar/ImportData/ImportFromCsv.tsx

@@ -162,7 +162,7 @@ export default function ImportFromFile() {
                 {}
               )
             );
-            console.log(mappedRows);
+            // console.log(mappedRows);
             setImportCsv({
               importType: importTypeRef.current,
               csvData: { columns, rows: mappedRows },