From 85ddc867f8039f161efdb8578d4332a2cdc46a75 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Wed, 9 Nov 2022 13:48:16 +0530 Subject: [PATCH 1/3] feat: Made ReactQuery cache clear on upload reset --- apps/widget/src/components/widget/Widget.tsx | 8 +++++++- apps/widget/src/store/app.context.tsx | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/widget/src/components/widget/Widget.tsx b/apps/widget/src/components/widget/Widget.tsx index 81266b96a..17037a836 100644 --- 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.UPLOAD); const [showConfirmModal, setShowConfirmModal] = useState(false); const [promptContinueAction, setPromptContinueAction] = useState(); @@ -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); + else if (promptContinueAction === PromptModalTypesEnum.UPLOAD_AGAIN) resetProgress(); }; const onPromptCancel = () => { setPromptContinueAction(undefined); @@ -36,6 +38,10 @@ export function Widget() { const closeWidget = () => { ParentWindow.Close(); }; + const resetProgress = () => { + queryClient.clear(); + setPhase(PhasesEum.UPLOAD); + }; const PhaseView = { [PhasesEum.UPLOAD]: setPhase(PhasesEum.MAPPING)} />, diff --git a/apps/widget/src/store/app.context.tsx b/apps/widget/src/store/app.context.tsx index aec3a6ed4..849cccfcc 100644 --- a/apps/widget/src/store/app.context.tsx +++ b/apps/widget/src/store/app.context.tsx @@ -14,7 +14,7 @@ const AppContextProvider = ({ children }: AppContextProviderProps) => { 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; } From 6430adf2c73b81216cd7ff208ab0cbf9e7d6d1b0 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Wed, 9 Nov 2022 14:01:38 +0530 Subject: [PATCH 2/3] feat: Made app to reset progress on close and Upload Again --- apps/widget/src/components/widget/Widget.tsx | 8 +++----- apps/widget/src/hooks/Phase1/usePhase1.ts | 20 ++++++++------------ apps/widget/src/store/app.context.tsx | 6 +++++- apps/widget/src/types/component.types.ts | 11 +++++++++++ apps/widget/src/types/store.types.ts | 1 + 5 files changed, 28 insertions(+), 18 deletions(-) diff --git a/apps/widget/src/components/widget/Widget.tsx b/apps/widget/src/components/widget/Widget.tsx index 17037a836..66d0ad46a 100644 --- a/apps/widget/src/components/widget/Widget.tsx +++ b/apps/widget/src/components/widget/Widget.tsx @@ -26,7 +26,7 @@ export function Widget() { const onPromptConfirm = () => { setPromptContinueAction(undefined); if (promptContinueAction === PromptModalTypesEnum.CLOSE) closeWidget(); - else if (promptContinueAction === PromptModalTypesEnum.UPLOAD_AGAIN) resetProgress(); + resetProgress(); }; const onPromptCancel = () => { setPromptContinueAction(undefined); @@ -46,10 +46,8 @@ export function Widget() { const PhaseView = { [PhasesEum.UPLOAD]: setPhase(PhasesEum.MAPPING)} />, [PhasesEum.MAPPING]: setPhase(PhasesEum.REVIEW)} onPrevClick={onUploadResetClick} />, - [PhasesEum.REVIEW]: ( - setShowConfirmModal(true)} onPrevClick={() => setPhase(PhasesEum.MAPPING)} /> - ), - [PhasesEum.CONFIRMATION]: setPhase(PhasesEum.UPLOAD)} />, + [PhasesEum.REVIEW]: setShowConfirmModal(true)} onPrevClick={onUploadResetClick} />, + [PhasesEum.CONFIRMATION]: , }; return ( diff --git a/apps/widget/src/hooks/Phase1/usePhase1.ts b/apps/widget/src/hooks/Phase1/usePhase1.ts index 40e567e0b..8eed5fa17 100644 --- a/apps/widget/src/hooks/Phase1/usePhase1.ts +++ b/apps/widget/src/hooks/Phase1/usePhase1.ts @@ -1,4 +1,4 @@ -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'; @@ -6,16 +6,7 @@ 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; @@ -23,7 +14,7 @@ interface IUsePhase1Props { export function usePhase1({ goNext }: IUsePhase1Props) { const { api } = useAPIState(); - const { setUploadInfo } = useAppState(); + const { setUploadInfo, reset } = useAppState(); const [templates, setTemplates] = useState([]); const [isDownloadInProgress, setIsDownloadInProgress] = useState(false); const { projectId, template, authHeaderValue, extra } = useImplerState(); @@ -60,6 +51,11 @@ export function usePhase1({ goNext }: IUsePhase1Props) { formState: { errors }, } = useForm(); + // 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 index 849cccfcc..6d71440a6 100644 --- a/apps/widget/src/store/app.context.tsx +++ b/apps/widget/src/store/app.context.tsx @@ -9,7 +9,11 @@ const AppContext = createContext(null); const AppContextProvider = ({ children }: AppContextProviderProps) => { const [uploadInfo, setUploadInfo] = useState({} as IUpload); - return {children}; + const reset = () => { + setUploadInfo({} as IUpload); + }; + + return {children}; }; export function useAppState() { diff --git a/apps/widget/src/types/component.types.ts b/apps/widget/src/types/component.types.ts index 97de4b98e..1dcba3898 100644 --- 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 index 3585ca097..cf9d611d3 100644 --- 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; } From 422b11b5754ad842f3b454d1b36f49598917f559 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Wed, 9 Nov 2022 14:04:25 +0530 Subject: [PATCH 3/3] feat: Updated footer actions --- apps/widget/src/components/Common/Footer/Footer.tsx | 7 ++----- apps/widget/src/config/texts.config.ts | 1 - 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/apps/widget/src/components/Common/Footer/Footer.tsx b/apps/widget/src/components/Common/Footer/Footer.tsx index f2dfa0791..5617b0f0b 100644 --- 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]: ( <> ), diff --git a/apps/widget/src/config/texts.config.ts b/apps/widget/src/config/texts.config.ts index 8f7c6f077..5aa9cfbd2 100644 --- 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: {