From 0896654fc0f7cfd86d28132a7cb7332af0b1d6f5 Mon Sep 17 00:00:00 2001
From: Arif <arifmajeed007.as@gmail.com>
Date: Wed, 17 Jul 2024 17:18:54 +0530
Subject: [PATCH] Issue #PS-1282 feat: Implement the delete center

---
 src/components/ManageUser.tsx             |  37 +++---
 src/components/RemoveFacilitatorAlert.tsx |  91 --------------
 src/components/SimpleModal.tsx            | 140 ++++++++++++++++++++++
 3 files changed, 163 insertions(+), 105 deletions(-)
 delete mode 100644 src/components/RemoveFacilitatorAlert.tsx
 create mode 100644 src/components/SimpleModal.tsx

diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx
index 39cddafe..d7717291 100644
--- a/src/components/ManageUser.tsx
+++ b/src/components/ManageUser.tsx
@@ -43,7 +43,8 @@ import { getMyUserList } from '@/services/MyClassDetailsService';
 import DeleteUserModal from './DeleteUserModal';
 import Image from 'next/image';
 import profileALT from '../assets/images/Profile.png';
-import RemoveFacilitatorAlert from './RemoveFacilitatorAlert';
+import RemoveFacilitatorAlert from './SimpleModal';
+import SimpleModal from './SimpleModal';
 interface Cohort {
   cohortId: string;
   parentId: string;
@@ -252,7 +253,6 @@ const manageUsers: React.FC<ManageUsersProps> = ({
 
   const handleCloseRemoveModal = () => {
     setOpenRemoveUserModal(false);
-  
   };
 
   const toggleDrawer =
@@ -279,21 +279,22 @@ const manageUsers: React.FC<ManageUsersProps> = ({
     if (name === 'delete-User') {
       const userId = store.deleteId;
       console.log(userId);
-  
+
       const cohortList = await getCohortList(userId);
       console.log('Cohort List:', cohortList);
-  
+
       if (cohortList && cohortList.length > 0) {
         const cohortNames = cohortList
           .map((cohort: { cohortName: any }) => cohort.cohortName)
           .join(', ');
         setOpenRemoveUserModal(true);
-        setRemoveCohortNames(cohortNames)
+        setRemoveCohortNames(cohortNames);
       } else {
-        console.log('User does not belong to any cohorts, proceed with deletion');
+        console.log(
+          'User does not belong to any cohorts, proceed with deletion'
+        );
         setOpenDeleteUserModal(true);
       }
-      
 
       // const name = selectedUser?.name || '';
       // const userId = selectedUser?.userId || '';
@@ -733,13 +734,21 @@ const manageUsers: React.FC<ManageUsersProps> = ({
               open={openDeleteUserModal}
               onClose={handleCloseModal}
             />
-            <RemoveFacilitatorAlert
-            removeCohortNames={removeCohortNames}
-            open={openRemoveUserModal}
-            onClose={handleCloseRemoveModal}
-            />
-
-           
+            <SimpleModal
+              primaryText="Ok"
+              primaryActionHandler={handleCloseRemoveModal}
+              open={openRemoveUserModal}
+              onClose={handleCloseRemoveModal}
+            >
+              {' '}
+              <Box mt={1.5}>
+                <Typography>
+                  {t('CENTERS.THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT')}{' '}
+                  {removeCohortNames}.{' '}
+                  {t('CENTERS.PLEASE_REMOVE_THE_USER_FROM_COHORT')}
+                </Typography>
+              </Box>
+            </SimpleModal>
           </>
         )}
 
diff --git a/src/components/RemoveFacilitatorAlert.tsx b/src/components/RemoveFacilitatorAlert.tsx
deleted file mode 100644
index 518d2388..00000000
--- a/src/components/RemoveFacilitatorAlert.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import {
-    Box,
-    Button,
-    Divider,
-    FormControl,
-    FormControlLabel,
-    InputLabel,
-    Modal,
-    Radio,
-    RadioGroup,
-    TextField,
-    Typography,
-  } from '@mui/material';
-  import React, { useState } from 'react';
-  import { useTheme } from '@mui/material/styles';
-  import { useTranslation } from 'next-i18next';
-  import CloseIcon from '@mui/icons-material/Close';
-  import { showToastMessage } from './Toastify';
-  import manageUserStore from '@/store/manageUserStore';
-  import { getCohortList } from '@/services/CohortServices';
-  
-  interface RemoveFacilitatorAlertProps {
-    removeCohortNames : string;
-    open: boolean;
-    onClose: () => void;
-  }
-  const RemoveFacilitatorAlert: React.FC<RemoveFacilitatorAlertProps> = ({removeCohortNames, open, onClose }) => {
-    const { t } = useTranslation();
-    const store = manageUserStore();
-    const theme = useTheme<any>();
-    const style = {
-      padding : "20px",
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      width: '85%',
-      boxShadow: 24,
-      bgcolor: '#fff',
-      borderRadius: '16px',
-      '@media (min-width: 600px)': {
-        width: '450px',
-      },
-    };
-  
-    return (
-      <Modal
-        open={open}
-        aria-labelledby="child-modal-title"
-        aria-describedby="child-modal-description"
-      >
-        <Box sx={{ ...style }}>
-          <Box
-            display={'flex'}
-            justifyContent={'space-between'}
-            sx={{ padding: '18px 16px' }}
-          >
-            <Box marginBottom={'0px'}>
-              <Typography
-                variant="h2"
-                sx={{
-                  color: theme.palette.warning['A200'],
-                  fontSize: '14px',
-                }}
-                component="h2"
-              >
-                {t('COMMON.DELETE_USER')}
-              </Typography>
-            </Box>
-            <CloseIcon
-              sx={{
-                cursor: 'pointer',
-                color: theme.palette.warning['A200'],
-              }}
-              onClick={onClose}
-            />
-          </Box>
-          <Divider />
-            <Box mt={1.5}>
-              <Typography>
-              {t('CENTERS.THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT')} {removeCohortNames}. {t('CENTERS.PLEASE_REMOVE_THE_USER_FROM_COHORT')}
-              </Typography>
-
-            </Box>
-        </Box>
-      </Modal>
-    );
-  };
-  
-  export default RemoveFacilitatorAlert;
-  
\ No newline at end of file
diff --git a/src/components/SimpleModal.tsx b/src/components/SimpleModal.tsx
new file mode 100644
index 00000000..e2575ae8
--- /dev/null
+++ b/src/components/SimpleModal.tsx
@@ -0,0 +1,140 @@
+import {
+  Box,
+  Button,
+  Divider,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  Modal,
+  Radio,
+  RadioGroup,
+  TextField,
+  Typography,
+} from '@mui/material';
+import React, { ReactNode, useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
+import CloseIcon from '@mui/icons-material/Close';
+import { showToastMessage } from './Toastify';
+import manageUserStore from '@/store/manageUserStore';
+import { getCohortList } from '@/services/CohortServices';
+
+interface SimpleModalProps {
+  secondaryActionHandler?: () => void;
+  primaryActionHandler: () => void;
+  secondaryText?: string;
+  primaryText: string;
+  children: ReactNode;
+  open: boolean;
+  onClose: () => void;
+}
+const SimpleModal: React.FC<SimpleModalProps> = ({
+  open,
+  onClose,
+  primaryText,
+  secondaryText,
+  primaryActionHandler,
+  secondaryActionHandler,
+  children,
+}) => {
+  const { t } = useTranslation();
+  const store = manageUserStore();
+  const theme = useTheme<any>();
+  const style = {
+    padding: '20px',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '85%',
+    boxShadow: 24,
+    bgcolor: '#fff',
+    borderRadius: '16px',
+    '@media (min-width: 600px)': {
+      width: '450px',
+    },
+  };
+
+  return (
+    <Modal
+      open={open}
+      aria-labelledby="child-modal-title"
+      aria-describedby="child-modal-description"
+    >
+      <Box sx={{ ...style }}>
+        <Box
+          display={'flex'}
+          justifyContent={'space-between'}
+          sx={{ padding: '18px 16px' }}
+        >
+          <Box marginBottom={'0px'}>
+            <Typography
+              variant="h2"
+              sx={{
+                color: theme.palette.warning['A200'],
+                fontSize: '14px',
+              }}
+              component="h2"
+            >
+              {t('COMMON.DELETE_USER')}
+            </Typography>
+          </Box>
+          <CloseIcon
+            sx={{
+              cursor: 'pointer',
+              color: theme.palette.warning['A200'],
+            }}
+            onClick={onClose}
+          />
+        </Box>
+        <Divider />
+        {children}
+        <Divider />
+
+        <Box sx={{ padding: '20px 16px' }}>
+          {primaryText && (
+            <Button
+              variant="contained"
+              color="primary"
+              sx={{
+                '&.Mui-disabled': {
+                  backgroundColor: theme?.palette?.primary?.main,
+                },
+                minWidth: '84px',
+                height: '2.5rem',
+                padding: theme.spacing(1),
+                fontWeight: '500',
+                width: '100%',
+              }}
+              onClick={primaryActionHandler}
+            >
+              {primaryText}
+            </Button>
+          )}
+
+          {secondaryText && (
+            <Button
+              variant="contained"
+              color="primary"
+              sx={{
+                '&.Mui-disabled': {
+                  backgroundColor: theme?.palette?.primary?.main,
+                },
+                minWidth: '84px',
+                height: '2.5rem',
+                padding: theme.spacing(1),
+                fontWeight: '500',
+                width: '100%',
+              }}
+              onClick={secondaryActionHandler}
+            >
+              {secondaryText}
+            </Button>
+          )}
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default SimpleModal;