Add async onSubmit

Author: masiulis

src/steps/ValidationStep/ValidationStep.tsx

@@ -28,6 +28,7 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
   const [selectedRows, setSelectedRows] = useState<ReadonlySet<number | string>>(new Set())
   const [filterByErrors, setFilterByErrors] = useState(false)
   const [showSubmitAlert, setShowSubmitAlert] = useState(false)
+  const [isSubmitting, setSubmitting] = useState(false)
 
   const updateData = useCallback(
     async (rows: typeof data, indexes?: number[]) => {
@@ -96,9 +97,16 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
       },
       { validData: [] as Data<T>[], invalidData: [] as Data<T>[], all: data },
     )
-    onSubmit(calculatedData, file)
     setShowSubmitAlert(false)
-    onClose()
+    setSubmitting(true)
+    onSubmit(calculatedData, file)
+      ?.then(() => {
+        onClose()
+      })
+      ?.catch(() => {})
+      ?.finally(() => {
+        setSubmitting(false)
+      })
   }
   const onContinue = () => {
     const invalidData = data.find((value) => {
@@ -153,6 +161,7 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
         />
       </ModalBody>
       <ContinueButton
+        isLoading={isSubmitting}
         onContinue={onContinue}
         onBack={onBack}
         title={translations.validationStep.nextButtonTitle}

src/steps/ValidationStep/tests/ValidationStep.test.tsx

@@ -48,6 +48,68 @@ describe("Validation step tests", () => {
     })
   })
 
+  test("Submit data with a successful async return", async () => {
+    const onSuccess = jest.fn()
+    const onSubmit = jest.fn(async (): Promise<void> => {
+      onSuccess()
+      return Promise.resolve()
+    })
+    const onClose = jest.fn()
+    render(
+      <Providers theme={defaultTheme} rsiValues={{ ...mockValues, onSubmit, onClose }}>
+        <ModalWrapper isOpen={true} onClose={() => {}}>
+          <ValidationStep initialData={[]} file={file} />
+        </ModalWrapper>
+      </Providers>,
+    )
+
+    const finishButton = screen.getByRole("button", {
+      name: "Confirm",
+    })
+
+    await userEvent.click(finishButton)
+
+    await waitFor(() => {
+      expect(onSubmit).toBeCalledWith({ all: [], invalidData: [], validData: [] }, file)
+    })
+    await waitFor(() => {
+      expect(onSuccess).toBeCalled()
+      expect(onClose).toBeCalled()
+    })
+  })
+
+  test("Submit data with a unsuccessful async return", async () => {
+    const onReject = jest.fn()
+    const onSubmit = jest.fn(async (): Promise<void> => {
+      onReject()
+      return Promise.reject()
+    })
+    const onClose = jest.fn()
+    try {
+      render(
+        <Providers theme={defaultTheme} rsiValues={{ ...mockValues, onSubmit, onClose }}>
+          <ModalWrapper isOpen={true} onClose={() => {}}>
+            <ValidationStep initialData={[]} file={file} />
+          </ModalWrapper>
+        </Providers>,
+      )
+
+      const finishButton = screen.getByRole("button", {
+        name: "Confirm",
+      })
+
+      await userEvent.click(finishButton)
+
+      await waitFor(() => {
+        expect(onSubmit).toBeCalledWith({ all: [], invalidData: [], validData: [] }, file)
+      })
+    } catch (e) {}
+    await waitFor(() => {
+      expect(onReject).toBeCalled()
+      expect(onClose).not.toBeCalled()
+    })
+  })
+
   test("Filters rows with required errors", async () => {
     const UNIQUE_NAME = "very unique name"
     const fields = [

src/types.ts

@@ -21,8 +21,8 @@ export type RsiProps<T extends string> = {
   rowHook?: RowHook<T>
   // Runs after column matching and on entry change
   tableHook?: TableHook<T>
-  // Function called after user finishes the flow
-  onSubmit: (data: Result<T>, file: File) => void
+  // Function called after user finishes the flow. You can return a promise that will be awaited.
+  onSubmit: (data: Result<T>, file: File) => void | Promise<any>
   // Allows submitting with errors. Default: true
   allowInvalidSubmit?: boolean
   // Enable navigation in stepper component and show back button. Default: false