prevent data loss after go from step 3 to step 2

twentyhq · Aug 22, 2024 · d16235a · d16235a
1 parent f88e5e5
commit d16235a
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 19 deletions.
diff --git a/...ty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx b/...ty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
 
+import { matchColumnsState } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState';
 import { SpreadsheetImport } from './SpreadsheetImport';
 
 type SpreadsheetImportProviderProps = React.PropsWithChildren;
@@ -14,11 +15,15 @@ export const SpreadsheetImportProvider = (
     spreadsheetImportDialogState,
   );
 
+  const setMatchColumnsState = useSetRecoilState(matchColumnsState);
+
   const handleClose = () => {
     setSpreadsheetImportDialog({
       isOpen: false,
       options: null,
     });
+
+    setMatchColumnsState([]);
   };
 
   return (

diff --git a/...ont/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx b/...ont/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
@@ -22,8 +22,10 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 
 import { UnmatchColumn } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn';
+import { initialComputedColumnsState } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState';
 import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep';
 import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
+import { useRecoilState } from 'recoil';
 import { ColumnGrid } from './components/ColumnGrid';
 import { TemplateColumn } from './components/TemplateColumn';
 import { UserTableColumn } from './components/UserTableColumn';
@@ -142,13 +144,8 @@ export const MatchColumnsStep = <T extends string>({
   const { fields, autoMapHeaders, autoMapDistance } =
     useSpreadsheetImportInternal<T>();
   const [isLoading, setIsLoading] = useState(false);
-  const [columns, setColumns] = useState<Columns<T>>(
-    // Do not remove spread, it indexes empty array elements, otherwise map() skips over them
-    ([...headerValues] as string[]).map((value, index) => ({
-      type: ColumnType.empty,
-      index,
-      header: value ?? '',
-    })),
+  const [columns, setColumns] = useRecoilState(
+    initialComputedColumnsState(headerValues),
   );
 
   const { matchColumnsStepHook } = useSpreadsheetImportInternal();
@@ -157,7 +154,7 @@ export const MatchColumnsStep = <T extends string>({
     (columnIndex: number) => {
       setColumns(
         columns.map((column, index) =>
-          columnIndex === index ? setIgnoreColumn<T>(column) : column,
+          columnIndex === index ? setIgnoreColumn<string>(column) : column,
         ),
       );
     },
@@ -191,7 +188,7 @@ export const MatchColumnsStep = <T extends string>({
           (column) => 'value' in column && column.value === field.key,
         );
         setColumns(
-          columns.map<Column<T>>((column, index) => {
+          columns.map<Column<string>>((column, index) => {
             if (columnIndex === index) {
               return setColumn(column, field, data);
             } else if (index === existingFieldIndex) {
@@ -207,7 +204,15 @@ export const MatchColumnsStep = <T extends string>({
         );
       }
     },
-    [columns, onRevertIgnore, onIgnore, fields, data, enqueueSnackBar],
+    [
+      columns,
+      onRevertIgnore,
+      onIgnore,
+      fields,
+      setColumns,
+      data,
+      enqueueSnackBar,
+    ],
   );
 
   const onContinue = useCallback(
@@ -306,7 +311,10 @@ export const MatchColumnsStep = <T extends string>({
   ]);
 
   useEffect(() => {
-    if (autoMapHeaders) {
+    const isInitialColumnsState = columns.every(
+      (column) => column.type === ColumnType.empty,
+    );
+    if (autoMapHeaders && isInitialColumnsState) {
       setColumns(getMatchedColumns(columns, fields, data, autoMapDistance));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -349,7 +357,10 @@ export const MatchColumnsStep = <T extends string>({
         onClick={handleOnContinue}
         isLoading={isLoading}
         title="Next Step"
-        onBack={onBack}
+        onBack={() => {
+          onBack?.();
+          setColumns([]);
+        }}
       />
     </>
   );

diff --git a/...les/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx b/...les/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx
@@ -37,7 +37,6 @@ const StyledControlContainer = styled.div<{ cursor: string }>`
   justify-content: space-between;
   padding: 0 ${({ theme }) => theme.spacing(2)};
   width: 100%;
-  position: relative;
 `;
 
 const StyledLabel = styled.span`

diff --git a/...odules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx b/...odules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx
@@ -14,7 +14,7 @@ const StyledContainer = styled.div`
 `;
 
 type TemplateColumnProps<T extends string> = {
-  columns: Columns<T>;
+  columns: Columns<string>;
   columnIndex: number;
   onChange: (val: T, index: number) => void;
 };
@@ -34,14 +34,13 @@ export const TemplateColumn = <T extends string>({
         if ('value' in column) {
           return column.value === key;
         }
-
         return false;
       }) !== -1;
 
     return {
-      icon,
+      icon: icon,
       value: key,
-      label,
+      label: label,
       disabled: isSelected,
     } as const;
   });

diff --git a/...import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState.ts b/...import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState.ts
@@ -0,0 +1,41 @@
+import {
+  Columns,
+  ColumnType,
+} from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
+import { ImportedRow } from '@/spreadsheet-import/types';
+import { atom, selectorFamily } from 'recoil';
+
+export const matchColumnsState = atom({
+  key: 'MatchColumnsState',
+  default: [] as Columns<string>,
+});
+
+export const initialComputedColumnsState = selectorFamily<
+  Columns<string>,
+  ImportedRow
+>({
+  key: 'InitialComputedColumnsState',
+  get:
+    (headerValues: ImportedRow) =>
+    ({ get }) => {
+      const currentState = get(matchColumnsState) as Columns<string>;
+      if (currentState.length === 0) {
+        // Do not remove spread, it indexes empty array elements, otherwise map() skips over them
+        const initialState = ([...headerValues] as string[]).map(
+          (value, index) => ({
+            type: ColumnType.empty,
+            index,
+            header: value ?? '',
+          }),
+        );
+        return initialState as Columns<string>;
+      } else {
+        return currentState;
+      }
+    },
+  set:
+    () =>
+    ({ set }, newValue) => {
+      set(matchColumnsState, newValue as Columns<string>);
+    },
+});
diff --git a/...twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx b/...twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx
@@ -45,6 +45,7 @@ export const SpreadsheetImportStepper = ({
     );
 
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+
   const { enqueueSnackBar } = useSnackBar();
 
   const errorToast = useCallback(
@@ -106,7 +107,9 @@ export const SpreadsheetImportStepper = ({
           setPreviousStepState={setPreviousStepState}
           currentStepState={currentStepState}
           nextStep={nextStep}
-          onBack={onBack}
+          onBack={() => {
+            onBack();
+          }}
           errorToast={errorToast}
         />
       );