Merge pull request #233 from UgnisSoftware/UGN-416

Add async onSubmit

Author: masiulis

README.md

@@ -55,8 +55,8 @@ import { ReactSpreadsheetImport } from "react-spreadsheet-import";
   isOpen: Boolean
   // Called when flow is closed without reaching submit.
   onClose: () => void
-  // Called after user completes the flow. Provides data array, where data keys matches your field keys.
-  onSubmit: (data, file) => void
+  // Called after user completes the flow. Provides data array, where data keys matches your field keys. 
+  onSubmit: (data, file) => void | Promise<any>
 ```
 
 ### Fields

src/steps/ValidationStep/ValidationStep.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from "react"
-import { Box, Button, Heading, ModalBody, Switch, useStyleConfig } from "@chakra-ui/react"
+import { Box, Button, Heading, ModalBody, Switch, useStyleConfig, useToast } from "@chakra-ui/react"
 import { ContinueButton } from "../../components/ContinueButton"
 import { useRsi } from "../../hooks/useRsi"
 import type { Meta } from "./types"
@@ -22,12 +22,14 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
   const styles = useStyleConfig(
     "ValidationStep",
   ) as (typeof themeOverrides)["components"]["ValidationStep"]["baseStyle"]
+  const toast = useToast()
 
   const [data, setData] = useState<(Data<T> & Meta)[]>(initialData)
 
   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 +98,25 @@ 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((err: Error) => {
+        toast({
+          status: "error",
+          variant: "left-accent",
+          position: "bottom-left",
+          title: `${translations.alerts.submitError.title}`,
+          description: err?.message || `${translations.alerts.submitError.defaultMessage}`,
+          isClosable: true,
+        })
+      })
+      .finally(() => {
+        setSubmitting(false)
+      })
   }
   const onContinue = () => {
     const invalidData = data.find((value) => {
@@ -153,6 +171,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,70 @@ 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 ERROR_MESSAGE = "ERROR has occurred"
+    const onReject = jest.fn()
+    const onSubmit = jest.fn(async (): Promise<void> => {
+      onReject()
+      throw new Error(ERROR_MESSAGE)
+    })
+    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)
+    })
+
+    const errorToast = await screen.findAllByText(ERROR_MESSAGE, undefined, { timeout: 5000 })
+
+    expect(onReject).toBeCalled()
+    expect(errorToast?.[0]).toBeInTheDocument()
+    expect(onClose).not.toBeCalled()
+  })
+
   test("Filters rows with required errors", async () => {
     const UNIQUE_NAME = "very unique name"
     const fields = [

src/translationsRSIProps.ts

@@ -61,6 +61,10 @@ export const translations = {
       cancelButtonTitle: "Cancel",
       finishButtonTitle: "Submit",
     },
+    submitError: {
+      title: "Error",
+      defaultMessage: "An error occurred while submitting data",
+    },
     unmatchedRequiredFields: {
       headerTitle: "Not all columns matched",
       bodyText: "There are required columns that are not matched or ignored. Do you want to continue?",

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