Add a toast message on unsuccessful submit

Author: masiulis

README.md

@@ -55,7 +55,7 @@ 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. You can return a promise that will be awaited.
+  // Called after user completes the flow. Provides data array, where data keys matches your field keys. 
   onSubmit: (data, file) => void | Promise<any>
 ```
 

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,6 +22,7 @@ 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)
 
@@ -103,8 +104,17 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
       ?.then(() => {
         onClose()
       })
-      ?.catch(() => {})
-      ?.finally(() => {
+      .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)
       })
   }

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

@@ -79,35 +79,37 @@ describe("Validation step tests", () => {
   })
 
   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()
-      return Promise.reject()
+      throw new Error(ERROR_MESSAGE)
     })
     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",
-      })
+    render(
+      <Providers theme={defaultTheme} rsiValues={{ ...mockValues, onSubmit, onClose }}>
+        <ModalWrapper isOpen={true} onClose={() => {}}>
+          <ValidationStep initialData={[]} file={file} />
+        </ModalWrapper>
+      </Providers>,
+    )
 
-      await userEvent.click(finishButton)
+    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()
+      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 () => {

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?",