feat: Added Find & Replace confirmation with modified count

implerhq · Sep 12, 2024 · 4741067 · 4741067
1 parent f7fb034
commit 4741067
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 36 deletions.
diff --git 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) {
       <FindReplaceModal
         texts={texts}
         columns={columns}
-        onReplace={replaceData}
         opened={!!showFindReplaceModal}
         cancelLabel={texts.COMMON.CANCEL}
         replaceLabel={texts.PHASE3.REPLACE}
-        isReplaceLoading={isReplaceDataLoading}
+        refetchReviewData={refetchReviewData}
         onClose={() => setShowFindReplaceModal(false)}
       />
     </>

diff --git a/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx b/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx
@@ -1,50 +1,73 @@
-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;
   columns: IOption[];
   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<number | undefined>();
+  const { opened, onClose, replaceLabel, refetchReviewData, cancelLabel, columns, texts } = props;
   const { register, handleSubmit, control, reset } = useForm<IReplaceData>({
     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 (
     <MantineModal
       centered
       size="lg"
       padding="xl"
       opened={opened}
-      onClose={onClose}
       keepMounted={false}
+      onClose={onCloseModal}
       title={texts.PHASE3.FIND_REPLACE}
     >
       <FocusTrap active>
-        <form onSubmit={handleSubmit(onReplace)}>
+        <form onSubmit={handleSubmit((data) => replaceData(data))}>
           <Stack spacing="xs">
             <TextInput
               data-autofocus
@@ -70,11 +93,16 @@ export function FindReplaceModal(props: IFindReplaceModalProps) {
             />
             <Checkbox label={texts.PHASE3.CASE_SENSITIVE_LABEL} {...register('caseSensitive')} />
             <Checkbox label={texts.PHASE3.MATCH_ENTIRE_LABEL} {...register('matchEntireCell')} />
+            {typeof modifiedCount === 'number' && (
+              <Alert color="green" icon={<CheckIcon />}>
+                {modifiedCount} cell values have been updated
+              </Alert>
+            )}
             <Flex direction="row" gap="xs" justify="flex-end">
-              <Button onClick={onClose} color="gray" variant="outline">
+              <Button onClick={onCloseModal} color="gray" variant="outline">
                 {cancelLabel}
               </Button>
-              <Button loading={isReplaceLoading} type="submit">
+              <Button loading={isReplaceDataLoading} type="submit">
                 {replaceLabel}
               </Button>
             </Flex>

diff --git 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
@@ -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
@@ -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<IReplaceResponse>;
   }
 
   async getRssXmlMappingHeading(data: {