From 4741067a0b8a771e7ae0012bc711d30c3c4accdf Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Thu, 12 Sep 2024 11:25:47 +0530 Subject: [PATCH] feat: Added Find & Replace confirmation with modified count --- .../widget/Phases/Phase3/Phase3.tsx | 6 +- .../modals/FindReplace/FindReplaceModal.tsx | 62 ++++++++++++++----- apps/widget/src/global.d.ts | 7 +++ apps/widget/src/hooks/Phase3/usePhase3.tsx | 16 +---- apps/widget/src/util/api/api.service.ts | 2 +- 5 files changed, 57 insertions(+), 36 deletions(-) diff --git a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx index f69b055a..76c6551b 100644 --- a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx +++ b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx @@ -37,7 +37,6 @@ export function Phase3(props: IPhase3Props) { totalPages, reviewData, allChecked, - replaceData, totalRecords, onTypeChange, reReviewData, @@ -50,9 +49,9 @@ export function Phase3(props: IPhase3Props) { invalidRecords, onConfirmReview, selectedRowsRef, + refetchReviewData, isDoReviewLoading, isReviewDataLoading, - isReplaceDataLoading, selectedRowsCountRef, showFindReplaceModal, showAllDataValidModal, @@ -241,11 +240,10 @@ export function Phase3(props: IPhase3Props) { setShowFindReplaceModal(false)} /> diff --git a/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx b/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx index 0f71b7d9..0da0cad2 100644 --- a/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx +++ b/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx @@ -1,11 +1,15 @@ -import { useEffect } from 'react'; -import { Controller, useForm } from 'react-hook-form'; +import { useState } from 'react'; import { WIDGET_TEXTS } from '@impler/client'; -import { IReplaceData } from '@impler/shared'; -import { Checkbox, Flex, FocusTrap, Modal as MantineModal, Stack, TextInput } from '@mantine/core'; +import { useMutation } from '@tanstack/react-query'; +import { Controller, useForm } from 'react-hook-form'; +import { IErrorObject, IReplaceData } from '@impler/shared'; +import { Alert, Checkbox, Flex, FocusTrap, Modal as MantineModal, Stack, TextInput } from '@mantine/core'; +import { CheckIcon } from '@icons'; import { Button } from '@ui/Button'; import { Select } from '@ui/Select'; +import { useAPIState } from '@store/api.context'; +import { useAppState } from '@store/app.context'; interface IFindReplaceModalProps { opened: boolean; @@ -13,25 +17,44 @@ interface IFindReplaceModalProps { cancelLabel: string; onClose: () => void; replaceLabel: string; - isReplaceLoading: boolean; texts: typeof WIDGET_TEXTS; - onReplace: (data: IReplaceData) => void; + refetchReviewData: () => void; } export function FindReplaceModal(props: IFindReplaceModalProps) { - const { opened, onClose, replaceLabel, onReplace, cancelLabel, columns, texts, isReplaceLoading } = props; + const { api } = useAPIState(); + const { uploadInfo } = useAppState(); + const [modifiedCount, setModifiedCount] = useState(); + const { opened, onClose, replaceLabel, refetchReviewData, cancelLabel, columns, texts } = props; const { register, handleSubmit, control, reset } = useForm({ defaultValues: { column: '', }, }); - useEffect(() => { - if (!opened) - reset({ - column: '', - }); - }, [opened]); + const { mutate: replaceData, isLoading: isReplaceDataLoading } = useMutation< + IReplaceResponse, + IErrorObject, + IReplaceData, + [string] + >(['replace'], (data) => api.replace(uploadInfo._id, data), { + onSuccess: (data) => { + refetchReviewData(); + setModifiedCount(data.modifiedCount); + }, + }); + + const onCloseModal = () => { + onClose(); + reset({ + column: '', + find: '', + caseSensitive: false, + matchEntireCell: false, + replace: '', + }); + setModifiedCount(undefined); + }; return ( -
+ replaceData(data))}> + {typeof modifiedCount === 'number' && ( + }> + {modifiedCount} cell values have been updated + + )} - - diff --git a/apps/widget/src/global.d.ts b/apps/widget/src/global.d.ts index ef5fa6b8..51830b24 100644 --- a/apps/widget/src/global.d.ts +++ b/apps/widget/src/global.d.ts @@ -15,3 +15,10 @@ interface IOption { label: string; value: string; } + +interface IReplaceResponse { + acknowledged: boolean; + modifiedCount: number; + upsertedCount: number; + matchedCount: number; +} diff --git a/apps/widget/src/hooks/Phase3/usePhase3.tsx b/apps/widget/src/hooks/Phase3/usePhase3.tsx index 9c60bc61..622abecc 100644 --- a/apps/widget/src/hooks/Phase3/usePhase3.tsx +++ b/apps/widget/src/hooks/Phase3/usePhase3.tsx @@ -16,7 +16,6 @@ import { ReviewDataTypesEnum, numberFormatter, ColumnDelimiterEnum, - IReplaceData, } from '@impler/shared'; import { IUpload } from '@impler/client'; import { SelectEditor } from './SelectEditor'; @@ -190,17 +189,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) { }, } ); - const { mutate: replaceData, isLoading: isReplaceDataLoading } = useMutation< - unknown, - IErrorObject, - IReplaceData, - [string] - >(['replace'], (data) => api.replace(uploadInfo._id, data), { - onSuccess: () => { - refetchReviewData([page, type]); - setShowFindReplaceModal(false); - }, - }); + const { refetch: reReviewData, isFetching: isDoReviewLoading } = useQuery< unknown, IErrorObject, @@ -306,7 +295,6 @@ export function usePhase3({ onNext }: IUsePhase3Props) { totalPages, columnDefs, allChecked, - replaceData, reReviewData, updateRecord, onPageChange, @@ -318,7 +306,6 @@ export function usePhase3({ onNext }: IUsePhase3Props) { selectedRowsRef, isDoReviewLoading, isReviewDataLoading, - isReplaceDataLoading, selectedRowsCountRef, showFindReplaceModal, showAllDataValidModal, @@ -332,5 +319,6 @@ export function usePhase3({ onNext }: IUsePhase3Props) { onConfirmReview: confirmReview, totalRecords: uploadInfo.totalRecords ?? undefined, invalidRecords: uploadInfo.invalidRecords ?? undefined, + refetchReviewData: () => refetchReviewData([page, type]), }; } diff --git a/apps/widget/src/util/api/api.service.ts b/apps/widget/src/util/api/api.service.ts index 776f6c46..83042d2a 100644 --- a/apps/widget/src/util/api/api.service.ts +++ b/apps/widget/src/util/api/api.service.ts @@ -172,7 +172,7 @@ export class ApiService { } async replace(uploadId: string, data: IReplaceData) { - return this.httpClient.put(`/review/${uploadId}/replace`, data); + return this.httpClient.put(`/review/${uploadId}/replace`, data) as Promise; } async getRssXmlMappingHeading(data: {