Fix in Upload Again and Reset

* feat: Made ReactQuery cache clear on upload reset * feat: Made app to reset progress on close and Upload Again * feat: Updated footer actions
implerhq · Nov 9, 2022 · 7267efc · 7267efc
1 parent bfeb308
commit 7267efc
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 25 deletions.
diff --git a/apps/widget/src/components/Common/Footer/Footer.tsx b/apps/widget/src/components/Common/Footer/Footer.tsx
@@ -33,7 +33,7 @@ export function Footer(props: IFooterProps) {
     [PhasesEum.REVIEW]: (
       <>
         <Button loading={secondaryButtonLoading} onClick={onPrevClick} variant="outline">
-          {TEXTS.PHASE3.BACK_TO_MAPPING}
+          {TEXTS.PHASE2.UPLOAD_AGAIN}
         </Button>
         <Button loading={primaryButtonLoading} onClick={onNextClick}>
           {TEXTS.PHASE3.CONFIRM_UPLOAD}
@@ -42,11 +42,8 @@ export function Footer(props: IFooterProps) {
     ),
     [PhasesEum.CONFIRMATION]: (
       <>
-        <Button loading={secondaryButtonLoading} onClick={onPrevClick} variant="outline">
-          {TEXTS.PHASE3.BACK_TO_MAPPING}
-        </Button>
         <Button loading={primaryButtonLoading} onClick={onNextClick}>
-          {TEXTS.PHASE3.CONFIRM_UPLOAD}
+          {TEXTS.PHASE2.UPLOAD_AGAIN}
         </Button>
       </>
     ),

diff --git a/apps/widget/src/components/widget/Widget.tsx b/apps/widget/src/components/widget/Widget.tsx
@@ -8,8 +8,10 @@ import { PromptModal } from './Phases/PromptModal';
 import { Phase4 } from './Phases/Phase4';
 import { ParentWindow } from '@util';
 import { PhasesEum, PromptModalTypesEnum } from '@types';
+import { useQueryClient } from '@tanstack/react-query';
 
 export function Widget() {
+  const queryClient = useQueryClient();
   const [phase, setPhase] = useState<PhasesEum>(PhasesEum.UPLOAD);
   const [showConfirmModal, setShowConfirmModal] = useState(false);
   const [promptContinueAction, setPromptContinueAction] = useState<PromptModalTypesEnum>();
@@ -24,7 +26,7 @@ export function Widget() {
   const onPromptConfirm = () => {
     setPromptContinueAction(undefined);
     if (promptContinueAction === PromptModalTypesEnum.CLOSE) closeWidget();
-    else if (promptContinueAction === PromptModalTypesEnum.UPLOAD_AGAIN) setPhase(PhasesEum.UPLOAD);
+    resetProgress();
   };
   const onPromptCancel = () => {
     setPromptContinueAction(undefined);
@@ -36,14 +38,16 @@ export function Widget() {
   const closeWidget = () => {
     ParentWindow.Close();
   };
+  const resetProgress = () => {
+    queryClient.clear();
+    setPhase(PhasesEum.UPLOAD);
+  };
 
   const PhaseView = {
     [PhasesEum.UPLOAD]: <Phase1 onNextClick={() => setPhase(PhasesEum.MAPPING)} />,
     [PhasesEum.MAPPING]: <Phase2 onNextClick={() => setPhase(PhasesEum.REVIEW)} onPrevClick={onUploadResetClick} />,
-    [PhasesEum.REVIEW]: (
-      <Phase3 onNextClick={() => setShowConfirmModal(true)} onPrevClick={() => setPhase(PhasesEum.MAPPING)} />
-    ),
-    [PhasesEum.CONFIRMATION]: <Phase4 rowsCount={1000000} onUploadAgainClick={() => setPhase(PhasesEum.UPLOAD)} />,
+    [PhasesEum.REVIEW]: <Phase3 onNextClick={() => setShowConfirmModal(true)} onPrevClick={onUploadResetClick} />,
+    [PhasesEum.CONFIRMATION]: <Phase4 rowsCount={1000000} onUploadAgainClick={onUploadResetClick} />,
   };
 
   return (

diff --git a/apps/widget/src/config/texts.config.ts b/apps/widget/src/config/texts.config.ts
@@ -34,7 +34,6 @@ export const TEXTS = {
   PHASE3: {
     INVALID_DATA_INFO: 'Sheet contains invalid data, hover over columns to see error',
     EXPORT_DATA: 'Export Data',
-    BACK_TO_MAPPING: 'Back to mapping',
     CONFIRM_UPLOAD: 'Complete Upload',
   },
   CONFIRM_MODAL: {

diff --git a/apps/widget/src/hooks/Phase1/usePhase1.ts b/apps/widget/src/hooks/Phase1/usePhase1.ts
@@ -1,29 +1,20 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useImplerState } from '@store/impler.context';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useAPIState } from '@store/api.context';
 import { IErrorObject, IOption, ITemplate, IUpload } from '@impler/shared';
 import { useAppState } from '@store/app.context';
 import { downloadFileFromURL, notifier } from '@util';
-
-interface IFormvalues {
-  template: string;
-  file: File;
-}
-
-interface IUploadValues extends IFormvalues {
-  authHeaderValue?: string;
-  extra?: string;
-}
+import { IFormvalues, IUploadValues } from '@types';
 
 interface IUsePhase1Props {
   goNext: () => void;
 }
 
 export function usePhase1({ goNext }: IUsePhase1Props) {
   const { api } = useAPIState();
-  const { setUploadInfo } = useAppState();
+  const { setUploadInfo, reset } = useAppState();
   const [templates, setTemplates] = useState<IOption[]>([]);
   const [isDownloadInProgress, setIsDownloadInProgress] = useState<boolean>(false);
   const { projectId, template, authHeaderValue, extra } = useImplerState();
@@ -60,6 +51,11 @@ export function usePhase1({ goNext }: IUsePhase1Props) {
     formState: { errors },
   } = useForm<IFormvalues>();
 
+  // reset App State on initial load
+  useEffect(() => {
+    reset();
+  }, []);
+
   const onDownload = async () => {
     setIsDownloadInProgress(true);
     const isTemplateValid = await trigger('template');

diff --git a/apps/widget/src/store/app.context.tsx b/apps/widget/src/store/app.context.tsx
@@ -9,12 +9,16 @@ const AppContext = createContext<IAppStore | null>(null);
 const AppContextProvider = ({ children }: AppContextProviderProps) => {
   const [uploadInfo, setUploadInfo] = useState<IUpload>({} as IUpload);
 
-  return <AppContext.Provider value={{ uploadInfo, setUploadInfo }}>{children}</AppContext.Provider>;
+  const reset = () => {
+    setUploadInfo({} as IUpload);
+  };
+
+  return <AppContext.Provider value={{ uploadInfo, setUploadInfo, reset }}>{children}</AppContext.Provider>;
 };
 
 export function useAppState() {
   const context = useContext(AppContext);
-  if (!context) throw new Error('API Context must be used within APIContextProvider');
+  if (!context) throw new Error('App Context must be used within AppContextProvider');
 
   return context;
 }

diff --git a/apps/widget/src/types/component.types.ts b/apps/widget/src/types/component.types.ts
@@ -10,6 +10,7 @@ export type MessageHandlerDataType =
       type: EventTypesEnum.SHOW_WIDGET;
       value: IShowPayload;
     };
+
 export enum PromptModalTypesEnum {
   'CLOSE' = 'CLOSE',
   'UPLOAD_AGAIN' = 'UPLOAD_AGAIN',
@@ -21,3 +22,13 @@ export enum PhasesEum {
   REVIEW,
   CONFIRMATION,
 }
+
+export interface IFormvalues {
+  template: string;
+  file: File;
+}
+
+export interface IUploadValues extends IFormvalues {
+  authHeaderValue?: string;
+  extra?: string;
+}
diff --git a/apps/widget/src/types/store.types.ts b/apps/widget/src/types/store.types.ts
@@ -15,5 +15,6 @@ export interface IApiStore {
 
 export interface IAppStore {
   uploadInfo: IUpload;
+  reset: () => void;
   setUploadInfo: (uploadInfo: IUpload) => void;
 }