Make each step have a unique url. This allows us to refresh the page …

…on any step and not have to go back to the beginning.
CruGlobal · Jun 26, 2024 · a03bf48 · a03bf48
1 parent 2a7f542
commit a03bf48
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 27 deletions.
diff --git a/pages/accountLists/[accountListId]/tools/csv.page.tsx b/pages/accountLists/[accountListId]/tools/csv.page.tsx
@@ -1,5 +1,6 @@
 import Head from 'next/head';
-import React, { useState } from 'react';
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
 import { Box, Divider, Grid, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -60,7 +61,34 @@ const CsvHome: React.FC = () => {
   const { t } = useTranslation();
   const accountListId = useAccountListId();
   const { classes } = useStyles();
-  const [currentTab, setCurrentTab] = useState(CsvImportViewStepEnum.Upload);
+  const { query, replace, pathname, isReady } = useRouter();
+  const urlTab = query?.tab as string;
+  const urlCsvFileId = query?.id as string;
+  const [currentTab, setCurrentTab] = useState(
+    urlTab || CsvImportViewStepEnum.Upload,
+  );
+  const defaultPageHeader = t('Tools - Import - CSV');
+  const [pageTitle, setPageTitle] = useState(defaultPageHeader);
+  const [csvFileId, setCsvFileId] = useState(urlCsvFileId ?? '');
+
+  useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    replace({
+      pathname,
+      query: {
+        accountListId,
+        tab: currentTab,
+        ...(csvFileId ? { id: csvFileId } : undefined),
+      },
+    });
+  }, [currentTab, csvFileId, isReady]);
+
+  useEffect(() => {
+    setPageTitle(getPageTitle());
+  }, [currentTab, pageTitle]);
 
   const renderTab = (accountListId: string) => {
     switch (currentTab) {
@@ -69,6 +97,7 @@ const CsvHome: React.FC = () => {
           <CsvUpload
             accountListId={accountListId}
             setCurrentTab={setCurrentTab}
+            setCsvFileId={setCsvFileId}
           />
         );
       case CsvImportViewStepEnum.Headers:
@@ -97,11 +126,26 @@ const CsvHome: React.FC = () => {
     }
   };
 
+  const getPageTitle = (): string => {
+    switch (currentTab) {
+      case CsvImportViewStepEnum.Upload:
+        return 'Tools - Import - CSV - Upload';
+      case CsvImportViewStepEnum.Headers:
+        return 'Tools - Import - CSV - Headers';
+      case CsvImportViewStepEnum.Values:
+        return 'Tools - Import - CSV - Values';
+      case CsvImportViewStepEnum.Preview:
+        return 'Tools - Import - CSV - Preview';
+      default:
+        return 'Tools - Import - CSV';
+    }
+  };
+
   return (
-    <CsvImportProvider>
+    <CsvImportProvider csvFileId={csvFileId}>
       <Head>
         <title>
-          {appName} | {t('Tools - Import - CSV - Upload')}
+          {appName} | {t(pageTitle)}
         </title>
       </Head>
       {accountListId ? (

diff --git a/src/components/Tool/Import/Csv/CsvHeaders.test.tsx b/src/components/Tool/Import/Csv/CsvHeaders.test.tsx
@@ -37,7 +37,13 @@ const CsvHeadersMockComponent: React.FC<CsvHeadersProps> = ({
   <TestWrapper>
     <ThemeProvider theme={theme}>
       <CsvImportContext.Provider
-        value={{ uploadData, setUploadData, initialData, setInitialData }}
+        value={{
+          uploadData,
+          setUploadData,
+          initialData,
+          setInitialData,
+          csvFileId: 'csvFileId',
+        }}
       >
         <CsvHeaders
           accountListId={accountListId}
@@ -59,6 +65,7 @@ beforeEach(() => {
 describe('CsvHeaders', () => {
   beforeEach(() => {
     uploadData = {
+      id: 'csvFileId',
       fileHeadersMappings: {},
     } as CsvImportType;
     initialData = {} as CsvImportType;

diff --git a/src/components/Tool/Import/Csv/CsvHeaders.tsx b/src/components/Tool/Import/Csv/CsvHeaders.tsx
@@ -12,6 +12,7 @@ import {
   TableRow,
   Typography,
 } from '@mui/material';
+import { cloneDeep } from 'lodash/fp';
 import { useTranslation } from 'react-i18next';
 import { useApiConstants } from 'src/components/Constants/UseApiConstants';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
@@ -68,9 +69,8 @@ const CsvHeaders: React.FC<CsvHeadersProps> = ({
   accountListId,
   setCurrentTab,
 }) => {
-  const { uploadData, setUploadData, initialData, setInitialData } = useContext(
-    CsvImportContext,
-  ) as CsvImportValue;
+  const { uploadData, setUploadData, initialData, setInitialData, csvFileId } =
+    useContext(CsvImportContext) as CsvImportValue;
 
   const importHeaders = uploadData?.fileHeaders ?? {};
   const supportedHeaders = useSupportedHeaders();
@@ -100,7 +100,7 @@ const CsvHeaders: React.FC<CsvHeadersProps> = ({
   };
 
   useEffect(() => {
-    if (uploadData) {
+    if (uploadData?.id) {
       if (!initialData?.id) {
         get(accountListId, uploadData.id, initialData).then((data) => {
           setInitialData(data);
@@ -144,8 +144,13 @@ const CsvHeaders: React.FC<CsvHeadersProps> = ({
         setUnmappedHeadersChecked(true);
         updateHeaders(uploadData);
       }
+    } else if (csvFileId) {
+      get(accountListId, csvFileId, initialData).then((data) => {
+        setInitialData(data);
+        setUploadData(cloneDeep(data));
+      });
     }
-  }, [uploadData]);
+  }, [uploadData, csvFileId]);
 
   const handleUpdateHeaders = (event, importHeader) => {
     fileHeadersMappings[importHeader] = event.target.value;
@@ -186,7 +191,7 @@ const CsvHeaders: React.FC<CsvHeadersProps> = ({
     });
   };
 
-  if (!accountListId || !uploadData || !unmappedHeadersChecked) {
+  if (!accountListId || !uploadData?.id || !unmappedHeadersChecked) {
     return null;
   }
 

diff --git a/src/components/Tool/Import/Csv/CsvImportContext.tsx b/src/components/Tool/Import/Csv/CsvImportContext.tsx
@@ -50,6 +50,7 @@ export interface CsvImportValue {
   setUploadData: React.Dispatch<React.SetStateAction<CsvImportType | null>>;
   initialData: CsvImportType | null;
   setInitialData: React.Dispatch<React.SetStateAction<CsvImportType | null>>;
+  csvFileId: string | null;
 }
 
 export const CsvImportContext = React.createContext<CsvImportValue | null>(
@@ -58,10 +59,12 @@ export const CsvImportContext = React.createContext<CsvImportValue | null>(
 
 interface CsvImportProviderProps {
   children: React.ReactNode;
+  csvFileId: string;
 }
 
 export const CsvImportProvider: React.FC<CsvImportProviderProps> = ({
   children,
+  csvFileId,
 }) => {
   const [uploadData, setUploadData] = useState<CsvImportType | null>(
     {} as CsvImportType,
@@ -73,7 +76,13 @@ export const CsvImportProvider: React.FC<CsvImportProviderProps> = ({
 
   return (
     <CsvImportContext.Provider
-      value={{ uploadData, setUploadData, initialData, setInitialData }}
+      value={{
+        uploadData,
+        setUploadData,
+        initialData,
+        setInitialData,
+        csvFileId,
+      }}
     >
       {children}
     </CsvImportContext.Provider>

diff --git a/src/components/Tool/Import/Csv/CsvPreview.test.tsx b/src/components/Tool/Import/Csv/CsvPreview.test.tsx
@@ -55,6 +55,7 @@ const constants = {
 
 const initializeData = () => {
   uploadData = {
+    id: 'csvFileId',
     fileConstants: {
       weird: 'Odd Value',
       foo: 'bar',
@@ -117,7 +118,13 @@ const CsvPreviewMockComponent: React.FC<CsvPreviewProps> = ({
   <TestWrapper>
     <ThemeProvider theme={theme}>
       <CsvImportContext.Provider
-        value={{ uploadData, setUploadData, initialData, setInitialData }}
+        value={{
+          uploadData,
+          setUploadData,
+          initialData,
+          setInitialData,
+          csvFileId: uploadData?.csvFileId,
+        }}
       >
         <CsvPreview
           accountListId={accountListId}

diff --git a/src/components/Tool/Import/Csv/CsvPreview.tsx b/src/components/Tool/Import/Csv/CsvPreview.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useContext, useState } from 'react';
+import React, { ReactElement, useContext, useEffect, useState } from 'react';
 import {
   Autocomplete,
   Box,
@@ -11,6 +11,7 @@ import {
   Typography,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import { cloneDeep } from 'lodash/fp';
 import { useTranslation } from 'react-i18next';
 import { useApiConstants } from 'src/components/Constants/UseApiConstants';
 import { useGetContactTagListQuery } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.generated';
@@ -24,7 +25,7 @@ import {
 } from './CsvImportContext';
 import { CsvImportSuccessModal } from './CsvImportSuccessModal';
 import { HeaderBox } from './HeaderBox';
-import { save } from './csvImportService';
+import { get, save } from './csvImportService';
 import { useSupportedHeaders } from './uploadCsvFile';
 
 const StripedTableBody = styled(TableBody)(() => ({
@@ -51,9 +52,8 @@ const CsvPreview: React.FC<CsvPreviewProps> = ({
   accountListId,
   setCurrentTab,
 }) => {
-  const { uploadData, setUploadData, initialData, setInitialData } = useContext(
-    CsvImportContext,
-  ) as CsvImportValue;
+  const { uploadData, setUploadData, initialData, setInitialData, csvFileId } =
+    useContext(CsvImportContext) as CsvImportValue;
 
   const { t } = useTranslation();
   const { appName } = useGetAppSettings();
@@ -69,6 +69,15 @@ const CsvPreview: React.FC<CsvPreviewProps> = ({
   const [accept, setAccept] = useState(false);
   const [showSuccessModal, setShowSuccessModal] = useState(false);
 
+  useEffect(() => {
+    if (!uploadData?.id && csvFileId) {
+      get(accountListId, csvFileId, initialData).then((data) => {
+        setInitialData(data);
+        setUploadData(cloneDeep(data));
+      });
+    }
+  }, [csvFileId, uploadData]);
+
   const handleBack = () => {
     setCurrentTab(
       Object.keys(uploadData?.valuesToConstantsMappings ?? {}).length === 0
@@ -97,7 +106,7 @@ const CsvPreview: React.FC<CsvPreviewProps> = ({
     });
   };
 
-  if (!uploadData) {
+  if (!uploadData?.id) {
     return null;
   }
 

diff --git a/src/components/Tool/Import/Csv/CsvUpload.test.tsx b/src/components/Tool/Import/Csv/CsvUpload.test.tsx
@@ -49,13 +49,15 @@ beforeEach(() => {
 
 describe('CsvUpload', () => {
   const setCurrentTab = jest.fn();
+  const setCsvFileId = jest.fn();
 
   it('should show the max file size', () => {
     const { getByTestId } = render(
       <TestWrapper>
         <CsvUpload
           accountListId="wee"
           setCurrentTab={setCurrentTab}
+          setCsvFileId={setCsvFileId}
         ></CsvUpload>
       </TestWrapper>,
     );
@@ -71,6 +73,7 @@ describe('CsvUpload', () => {
         <CsvUpload
           accountListId="wee"
           setCurrentTab={setCurrentTab}
+          setCsvFileId={setCsvFileId}
         ></CsvUpload>
       </TestWrapper>,
     );
@@ -111,11 +114,18 @@ describe('CsvUpload', () => {
     const { getByTestId } = render(
       <TestWrapper>
         <CsvImportContext.Provider
-          value={{ uploadData, setUploadData, initialData, setInitialData }}
+          value={{
+            uploadData,
+            setUploadData,
+            initialData,
+            setInitialData,
+            csvFileId: '',
+          }}
         >
           <CsvUpload
             accountListId="wee"
             setCurrentTab={setCurrentTab}
+            setCsvFileId={setCsvFileId}
           ></CsvUpload>
         </CsvImportContext.Provider>
       </TestWrapper>,

diff --git a/src/components/Tool/Import/Csv/CsvUpload.tsx b/src/components/Tool/Import/Csv/CsvUpload.tsx
@@ -14,11 +14,13 @@ import { getMaxFileSize, uploadFile } from './uploadCsvFile';
 interface CsvUploadProps {
   accountListId: string;
   setCurrentTab: (currentTab: CsvImportViewStepEnum) => void;
+  setCsvFileId: (csvFileId: string) => void;
 }
 
 const CsvUpload: React.FC<CsvUploadProps> = ({
   accountListId,
   setCurrentTab,
+  setCsvFileId,
 }) => {
   const { t } = useTranslation();
   const fileRef = useRef<HTMLInputElement>(null);
@@ -62,6 +64,7 @@ const CsvUpload: React.FC<CsvUploadProps> = ({
             if (setUploadData) {
               setUploadData(transformedData);
             }
+            setCsvFileId(transformedData.id);
           }
         });
         setCurrentTab(CsvImportViewStepEnum.Headers);

diff --git a/src/components/Tool/Import/Csv/CsvValues.test.tsx b/src/components/Tool/Import/Csv/CsvValues.test.tsx
@@ -58,6 +58,7 @@ const constants = {
 
 const initializeData = () => {
   uploadData = {
+    id: 'csvFileId',
     fileConstants: {
       weird: 'Odd Value',
       foo: 'bar',
@@ -111,7 +112,13 @@ const CsvValuesMockComponent: React.FC<CsvValuesProps> = ({
   <TestWrapper>
     <ThemeProvider theme={theme}>
       <CsvImportContext.Provider
-        value={{ uploadData, setUploadData, initialData, setInitialData }}
+        value={{
+          uploadData,
+          setUploadData,
+          initialData,
+          setInitialData,
+          csvFileId: uploadData?.csvFileId,
+        }}
       >
         <CsvValues
           accountListId={accountListId}