From b1faee54bfa253bb7348199f8c99c0e2876e648b Mon Sep 17 00:00:00 2001
From: rhahao <26148770+rhahao@users.noreply.github.com>
Date: Tue, 10 Sep 2024 06:08:34 +0300
Subject: [PATCH] fix(Field service groups): update appearance of edit and
 delete modals

---
 .../group_delete/index.tsx                    |  5 +--
 .../group_delete/index.types.ts               |  1 -
 .../field_service_groups/group_edit/index.tsx |  5 +--
 .../group_edit/index.types.ts                 |  1 -
 .../group_item/edit_delete_dialog/index.tsx   | 38 +++++++++++++++++++
 .../edit_delete_dialog/index.types.ts         | 10 +++++
 .../group_item/header/index.tsx               | 28 +++++---------
 .../group_item/header/useHeader.tsx           | 23 ++++++-----
 8 files changed, 72 insertions(+), 39 deletions(-)
 create mode 100644 src/features/congregation/field_service_groups/group_item/edit_delete_dialog/index.tsx
 create mode 100644 src/features/congregation/field_service_groups/group_item/edit_delete_dialog/index.types.ts

diff --git a/src/features/congregation/field_service_groups/group_delete/index.tsx b/src/features/congregation/field_service_groups/group_delete/index.tsx
index 7f8d233308..00eb2a577c 100644
--- a/src/features/congregation/field_service_groups/group_delete/index.tsx
+++ b/src/features/congregation/field_service_groups/group_delete/index.tsx
@@ -3,7 +3,6 @@ import { useAppTranslation } from '@hooks/index';
 import { GroupDeleteProps } from './index.types';
 import useGroupDelete from './useGroupDelete';
 import Button from '@components/button';
-import Dialog from '@components/dialog';
 import Typography from '@components/typography';
 
 const GroupDelete = (props: GroupDeleteProps) => {
@@ -12,7 +11,7 @@ const GroupDelete = (props: GroupDeleteProps) => {
   const { handleDeleteGroup } = useGroupDelete(props);
 
   return (
-    <Dialog onClose={props.onClose} open={props.open} sx={{ padding: '24px' }}>
+    <>
       <Stack spacing="16px">
         <Typography className="h2">
           {t('tr_deleteServiceGroupTitle', { GroupNumber: props.index })}
@@ -31,7 +30,7 @@ const GroupDelete = (props: GroupDeleteProps) => {
           {t('tr_cancel')}
         </Button>
       </Stack>
-    </Dialog>
+    </>
   );
 };
 
diff --git a/src/features/congregation/field_service_groups/group_delete/index.types.ts b/src/features/congregation/field_service_groups/group_delete/index.types.ts
index 4300c08a63..d6ec20454e 100644
--- a/src/features/congregation/field_service_groups/group_delete/index.types.ts
+++ b/src/features/congregation/field_service_groups/group_delete/index.types.ts
@@ -1,5 +1,4 @@
 export type GroupDeleteProps = {
-  open: boolean;
   onClose: VoidFunction;
   index: number;
   group_id: string;
diff --git a/src/features/congregation/field_service_groups/group_edit/index.tsx b/src/features/congregation/field_service_groups/group_edit/index.tsx
index 2f41f947b0..c254866f61 100644
--- a/src/features/congregation/field_service_groups/group_edit/index.tsx
+++ b/src/features/congregation/field_service_groups/group_edit/index.tsx
@@ -4,7 +4,6 @@ import { useAppTranslation } from '@hooks/index';
 import { GroupEditProps } from './index.types';
 import useGroupEdit from './useGroupEdit';
 import Button from '@components/button';
-import Dialog from '@components/dialog';
 import GroupMembers from '../group_members';
 import TextField from '@components/textfield';
 import Typography from '@components/typography';
@@ -21,7 +20,7 @@ const GroupEdit = (props: GroupEditProps) => {
   } = useGroupEdit(props);
 
   return (
-    <Dialog onClose={props.onClose} open={props.open} sx={{ padding: '24px' }}>
+    <>
       <Box
         sx={{
           width: '100%',
@@ -63,7 +62,7 @@ const GroupEdit = (props: GroupEditProps) => {
           {t('tr_cancel')}
         </Button>
       </Stack>
-    </Dialog>
+    </>
   );
 };
 
diff --git a/src/features/congregation/field_service_groups/group_edit/index.types.ts b/src/features/congregation/field_service_groups/group_edit/index.types.ts
index 8928dd527c..07dc070dc6 100644
--- a/src/features/congregation/field_service_groups/group_edit/index.types.ts
+++ b/src/features/congregation/field_service_groups/group_edit/index.types.ts
@@ -1,7 +1,6 @@
 import { FieldServiceGroupType } from '@definition/field_service_groups';
 
 export type GroupEditProps = {
-  open: boolean;
   onClose: VoidFunction;
   onDelete: VoidFunction;
   group: FieldServiceGroupType;
diff --git a/src/features/congregation/field_service_groups/group_item/edit_delete_dialog/index.tsx b/src/features/congregation/field_service_groups/group_item/edit_delete_dialog/index.tsx
new file mode 100644
index 0000000000..44ea1f34e6
--- /dev/null
+++ b/src/features/congregation/field_service_groups/group_item/edit_delete_dialog/index.tsx
@@ -0,0 +1,38 @@
+import { useAppTranslation } from '@hooks/index';
+import { EditDeleteDialogProps } from './index.types';
+import Dialog from '@components/dialog';
+import GroupEdit from '../../group_edit';
+import GroupDelete from '../../group_delete';
+
+const EditDeleteDialog = ({
+  group,
+  index,
+  onClose,
+  onDelete,
+  open,
+  type,
+}: EditDeleteDialogProps) => {
+  const { t } = useAppTranslation();
+
+  return (
+    <Dialog onClose={onClose} open={open} sx={{ padding: '24px' }}>
+      {type === 'edit' && (
+        <GroupEdit
+          group={group}
+          index={index}
+          onClose={onClose}
+          onDelete={onDelete}
+        />
+      )}
+      {type === 'delete' && (
+        <GroupDelete
+          group_id={group.group_id}
+          index={index}
+          onClose={onClose}
+        />
+      )}
+    </Dialog>
+  );
+};
+
+export default EditDeleteDialog;
diff --git a/src/features/congregation/field_service_groups/group_item/edit_delete_dialog/index.types.ts b/src/features/congregation/field_service_groups/group_item/edit_delete_dialog/index.types.ts
new file mode 100644
index 0000000000..d7b0e289f0
--- /dev/null
+++ b/src/features/congregation/field_service_groups/group_item/edit_delete_dialog/index.types.ts
@@ -0,0 +1,10 @@
+import { FieldServiceGroupType } from '@definition/field_service_groups';
+
+export type EditDeleteDialogProps = {
+  open: boolean;
+  onClose: VoidFunction;
+  type: 'edit' | 'delete';
+  onDelete: VoidFunction;
+  group: FieldServiceGroupType;
+  index: number;
+};
diff --git a/src/features/congregation/field_service_groups/group_item/header/index.tsx b/src/features/congregation/field_service_groups/group_item/header/index.tsx
index 2867575b7d..ce81870d78 100644
--- a/src/features/congregation/field_service_groups/group_item/header/index.tsx
+++ b/src/features/congregation/field_service_groups/group_item/header/index.tsx
@@ -4,10 +4,9 @@ import { useAppTranslation } from '@hooks/index';
 import { GroupHeaderProps } from './index.types';
 import useHeader from './useHeader';
 import GroupBadge from '../badge';
-import GroupDelete from '../../group_delete';
-import GroupEdit from '../../group_edit';
 import IconButton from '@components/icon_button';
 import Typography from '@components/typography';
+import EditDeleteDialog from '../edit_delete_dialog';
 
 const GroupHeader = (props: GroupHeaderProps) => {
   const { t } = useAppTranslation();
@@ -18,12 +17,11 @@ const GroupHeader = (props: GroupHeaderProps) => {
     group_index,
     group_name,
     my_group,
-    edit,
-    handleCloseEdit,
     handleOpenEdit,
-    isDelete,
-    handleCloseDelete,
     handleOpenDelete,
+    dlgOpen,
+    handleCloseDialog,
+    type,
   } = useHeader(props);
 
   return (
@@ -37,22 +35,14 @@ const GroupHeader = (props: GroupHeaderProps) => {
         alignItems: 'center',
       }}
     >
-      {edit && (
-        <GroupEdit
-          onClose={handleCloseEdit}
+      {dlgOpen && (
+        <EditDeleteDialog
+          type={type}
+          onClose={handleCloseDialog}
           onDelete={handleOpenDelete}
           index={props.index}
           group={props.group}
-          open={edit}
-        />
-      )}
-
-      {isDelete && (
-        <GroupDelete
-          onClose={handleCloseDelete}
-          index={props.index}
-          group_id={props.group.group_id}
-          open={isDelete}
+          open={dlgOpen}
         />
       )}
 
diff --git a/src/features/congregation/field_service_groups/group_item/header/useHeader.tsx b/src/features/congregation/field_service_groups/group_item/header/useHeader.tsx
index 488a6f1b5d..75862f8551 100644
--- a/src/features/congregation/field_service_groups/group_item/header/useHeader.tsx
+++ b/src/features/congregation/field_service_groups/group_item/header/useHeader.tsx
@@ -9,8 +9,8 @@ const useHeader = ({ group, index }: GroupHeaderProps) => {
 
   const userUID = useRecoilValue(userLocalUIDState);
 
-  const [edit, setEdit] = useState(false);
-  const [isDelete, setIsDelete] = useState(false);
+  const [dlgOpen, setDlgOpen] = useState(false);
+  const [type, setType] = useState<'edit' | 'delete'>('edit');
 
   const bg_color = useMemo(() => {
     const css = `--group-${index}-base`;
@@ -43,17 +43,17 @@ const useHeader = ({ group, index }: GroupHeaderProps) => {
     return isMyGroup;
   }, [group, userUID]);
 
-  const handleOpenEdit = () => setEdit(true);
+  const handleOpenEdit = () => {
+    setType('edit');
+    setDlgOpen(true);
+  };
 
-  const handleCloseEdit = () => setEdit(false);
+  const handleCloseDialog = () => setDlgOpen(false);
 
   const handleOpenDelete = () => {
-    setIsDelete(true);
-    setEdit(false);
+    setType('delete');
   };
 
-  const handleCloseDelete = () => setIsDelete(false);
-
   return {
     bg_color,
     color,
@@ -61,11 +61,10 @@ const useHeader = ({ group, index }: GroupHeaderProps) => {
     group_name,
     my_group,
     handleOpenEdit,
-    handleCloseEdit,
-    edit,
-    isDelete,
+    dlgOpen,
+    handleCloseDialog,
     handleOpenDelete,
-    handleCloseDelete,
+    type,
   };
 };