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;
              }

[ciminelli]

Looking good! Thanks for the PR. Just one small request on the Promise handling, then let's get this merged.

[ciminelli]

Can you update this to 1.0.12? Or I can just increment the version after this is merged.

[rajkumarwaghmare]

@ciminelli
Addition of onHeadersMapped is a big update for the library, thats why i incremented the version to 1.1.1 from 1.0.11
And then i fixed a type error that why incremented the version to 1.1.2

[ciminelli]

I'm getting this error in testing when onHeadersMapped isn't set: Uncaught TypeError: Cannot read properties of undefined (reading 'then')

Maybe update to use Promise.resolve?

Suggested change

	if (onHeadersMapped) {
	onHeadersMapped(selectedHeaderRow, columnMapping, originalFile)
	.then(() => {
	setIsSubmitting(false);
	goNext();
	})
	.catch((error) => {
	console.error("onHeadersMapped error", error);
	setDataError("An error occurred while processing the data");
	});
	return;
	}
	if (onHeadersMapped) {
	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;
	}

[rajkumarwaghmare]

@ciminelli
This code block is executed only when onHeadersMapped is defined

if (onHeadersMapped) {
...
}

If you could upload video of how/where you are getting this error, it 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?

[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):

Screen.Recording.2024-06-25.at.13.50.46.mov