feat/navigation

- fix test
- fix backward compatibility

Author: audi2014

src/components/ContinueButton.tsx

@@ -2,17 +2,19 @@ import { Button, ModalFooter } from "@chakra-ui/react"
 
 type ContinueButtonProps = {
   onContinue: (val: any) => void
-  onBack: () => void
+  onBack?: () => void
   title: string
-  backTitle: string
+  backTitle?: string
   isLoading?: boolean
 }
 
 export const ContinueButton = ({ onContinue, onBack, title, backTitle, isLoading }: ContinueButtonProps) => (
-  <ModalFooter justifyContent="space-between">
-    <Button size="lg" w="21rem" onClick={onBack} isLoading={isLoading}>
-      {backTitle}
-    </Button>
+  <ModalFooter justifyContent={onBack && "space-between"}>
+    {onBack && (
+      <Button size="lg" w="21rem" onClick={onBack} isLoading={isLoading}>
+        {backTitle}
+      </Button>
+    )}
     <Button size="lg" w="21rem" onClick={onContinue} isLoading={isLoading}>
       {title}
     </Button>

src/steps/MatchColumnsStep/MatchColumnsStep.tsx

@@ -17,7 +17,7 @@ export type MatchColumnsProps<T extends string> = {
   data: RawData[]
   headerValues: RawData
   onContinue: (data: any[], rawData: RawData[], columns: Columns<T>) => void
-  onBack: () => void
+  onBack?: () => void
 }
 
 export enum ColumnType {

src/steps/MatchColumnsStep/components/ColumnGrid.tsx

@@ -11,7 +11,7 @@ type ColumnGridProps<T extends string> = {
   userColumn: (column: Column<T>) => React.ReactNode
   templateColumn: (column: Column<T>) => React.ReactNode
   onContinue: (val: Record<string, string>[]) => void
-  onBack: () => void
+  onBack?: () => void
   isLoading: boolean
 }
 

src/steps/SelectHeaderStep/SelectHeaderStep.tsx

@@ -9,7 +9,7 @@ import type { RawData } from "../../types"
 type SelectHeaderProps = {
   data: RawData[]
   onContinue: (headerValues: RawData, data: RawData[]) => Promise<void>
-  onBack: () => void
+  onBack?: () => void
 }
 
 export const SelectHeaderStep = ({ data, onContinue, onBack }: SelectHeaderProps) => {

src/steps/SelectSheetStep/SelectSheetStep.tsx

@@ -7,7 +7,7 @@ import type { themeOverrides } from "../../theme"
 type SelectSheetProps = {
   sheetNames: string[]
   onContinue: (sheetName: string) => Promise<void>
-  onBack: () => void
+  onBack?: () => void
 }
 
 export const SelectSheetStep = ({ sheetNames, onContinue, onBack }: SelectSheetProps) => {

src/steps/UploadFlow.tsx

@@ -43,7 +43,7 @@ export type StepState =
 interface Props {
   state: StepState
   onNext: (v: StepState) => void
-  onBack: () => void
+  onBack?: () => void
 }
 
 export const UploadFlow = ({ state, onNext, onBack }: Props) => {

src/steps/ValidationStep/ValidationStep.tsx

@@ -14,7 +14,7 @@ import type { RowsChangeData } from "react-data-grid"
 type Props<T extends string> = {
   initialData: Data<T>[]
   file: File
-  onBack: () => void
+  onBack?: () => void
 }
 
 export const ValidationStep = <T extends string>({ initialData, file, onBack }: Props<T>) => {
@@ -51,15 +51,12 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
 
   const updateRow = useCallback(
     (rows: typeof data, changedData?: RowsChangeData<(typeof data)[number]>) => {
-      const changes = changedData?.indexes.reduce(
-        (acc, index) => {
-          // when data is filtered val !== actual index in data
-          const realIndex = data.findIndex((value) => value.__index === rows[index].__index)
-          acc[realIndex] = rows[index]
-          return acc
-        },
-        {} as Record<number, (typeof data)[number]>,
-      )
+      const changes = changedData?.indexes.reduce((acc, index) => {
+        // when data is filtered val !== actual index in data
+        const realIndex = data.findIndex((value) => value.__index === rows[index].__index)
+        acc[realIndex] = rows[index]
+        return acc
+      }, {} as Record<number, (typeof data)[number]>)
       const newData = Object.assign([], data, changes)
       updateData(newData)
     },