Dont wait for whole CSV file to get parsed

[rajkumarwaghmare]

Why this change is needed?

• In case of very large files, waiting time for parsing to finish is considerably long.
• Instead, just complete the CSV headers to key mapping and return the mapping. This will fasten the process and reduce the waiting time
• Also, Import Successful message is displayed too early and this wording will confuse user in thinking that the actual CSV file has been mapped, parsed and uploaded/imported. So we need some mechanism where we display Import Successful message only after the data is really "imported" and not just parsed.

Proposed changes

• Addition of onCSVHeadersMapped?: (data: any) => Promise<void>; to CSVImporterProps
• Addition of below logic in case StepEnum.MapColumns: success callback

      case StepEnum.MapColumns:
        return (
          <MapColumns
            template={parsedTemplate}
            data={data}
            columnMapping={columnMapping}
            skipHeaderRowSelection={skipHeader}
            selectedHeaderRow={selectedHeaderRow}
            onSuccess={(columnMapping) => {
              setIsSubmitting(true);
              setColumnMapping(columnMapping);
              if (onCSVHeadersMapped) {
                onCSVHeadersMapped(columnMapping).then(() => {
                  setIsSubmitting(false);
                  goNext();
                });
                return;
              }

[rajkumarwaghmare]

@rajkumarwaghmare I found one more issue. It looks like if you don't include onHeadersMapped, the new condition is still being run and the onComplete doesn't fire. When logging onHeadersMapped, it doesn't come through as undefined but shows:

ƒ () { return fn.apply(this, arguments); }

Can you test by not including onHeadersMapped and see what updates need to be made to have the onComplete still work in that case?

I cant reproduce this issue. Could you please attach the video, that would be helpful.

[ciminelli]

@rajkumarwaghmare I found one more issue. It looks like if you don't include onHeadersMapped, the new condition is still being run and the onComplete doesn't fire. When logging onHeadersMapped, it doesn't come through as undefined but shows:

ƒ () { return fn.apply(this, arguments); }

Can you test by not including onHeadersMapped and see what updates need to be made to have the onComplete still work in that case?

I cant reproduce this issue. Could you please attach the video, that would be helpful.

I added some log statements to show the issue in the onSuccess handler:

              console.log(onHeadersMapped);
              if (onHeadersMapped) {
                console.log("not running oncomplete");
                Promise.resolve(onHeadersMapped(selectedHeaderRow, columnMapping, originalFile))
                  .then(() => {
                    setIsSubmitting(false);
                    goNext();
                  })
                  .catch((error) => {
                    console.error("onHeadersMapped error", error);
                    setDataError("An error occurred while processing the data");
                  });
                return;
              }
              console.log("running oncomplete");

Here is what happens (with onHeadersMapped not being passed in):

https://github.com/tableflowhq/csv-import/assets/11033848/50420a3f-c73e-4553-bf1f-611253092a40