fix(Field service groups): update appearance of edit and delete modals

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>
+    </>
   );
 };
 

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;

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>
+    </>
   );
 };
 

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;

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;

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;
+};

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}
         />
       )}
 

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,29 +43,28 @@ 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,
     group_index,
     group_name,
     my_group,
     handleOpenEdit,
-    handleCloseEdit,
-    edit,
-    isDelete,
+    dlgOpen,
+    handleCloseDialog,
     handleOpenDelete,
-    handleCloseDelete,
+    type,
   };
 };