Merge pull request #309 from Rushikesh-Sonawane99/shiksha-2.0

Issue #PS-793 feat: API Integration for mark, unmark as dropout and remove learner
tekdi · Jun 20, 2024 · 3749ed5 · 3749ed5
2 parents 4aa08f0 + 0b87118
commit 3749ed5
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 54 deletions.
diff --git a/src/components/CohortLearnerList.tsx b/src/components/CohortLearnerList.tsx
@@ -10,6 +10,7 @@ import { limit } from '@/utils/app.constant';
 import { showToastMessage } from './Toastify';
 import { useTranslation } from 'next-i18next';
 import { Box, Typography } from '@mui/material';
+import Loader from './Loader';
 
 interface UserDataProps {
   name: string;
@@ -66,29 +67,36 @@ const CohortLearnerList = (cohortId: any) => {
 
   return (
     <div>
-      {userData?.map((data: any) => {
-        return (
-          <LearnersList
-            key={data.userId}
-            learnerName={data.name}
-            enrollmentId={data.enrollmentNumber}
-            isDropout={data.memberStatus === 'dropout'}
-          />
-        );
-      })}
-      {!userData?.length && (
-        <Box
-          sx={{
-            m: '1.125rem',
-            display: 'flex',
-            justifyContent: 'left',
-            alignItems: 'center',
-          }}
-        >
-          <Typography style={{ fontWeight: 'bold' }}>
-            {t('COMMON.NO_DATA_FOUND')}
-          </Typography>
-        </Box>
+      {loading ? (
+        <Loader showBackdrop={true} loadingText={t('COMMON.LOADING')} />
+      ) : (
+        <>
+          {userData?.map((data: any) => {
+            return (
+              <LearnersList
+                key={data.userId}
+                learnerName={data.name}
+                enrollmentId={data.enrollmentNumber}
+                cohortMembershipId= {data.cohortMembershipId}
+                isDropout={data.memberStatus === 'dropout'}
+              />
+            );
+          })}
+          {!userData?.length && (
+            <Box
+              sx={{
+                m: '1.125rem',
+                display: 'flex',
+                justifyContent: 'left',
+                alignItems: 'center',
+              }}
+            >
+              <Typography style={{ fontWeight: 'bold' }}>
+                {t('COMMON.NO_DATA_FOUND')}
+              </Typography>
+            </Box>
+          )}
+        </>
       )}
     </div>
   );

diff --git a/src/components/DropOutModal.tsx b/src/components/DropOutModal.tsx
@@ -18,17 +18,23 @@ import { useTheme } from '@mui/material/styles';
 import CloseIcon from '@mui/icons-material/Close';
 import { useTranslation } from 'next-i18next';
 import { dropoutReasons } from '../../app.config';
+import { updateCohortMemberStatus } from '@/services/MyClassDetailsService';
+import ReactGA from 'react-ga4';
 
 interface DropOutModalProps {
   open: boolean;
   onClose: (confirmed: boolean, reason?: string) => void;
+  cohortMembershipId: string | number;
 }
 
-function DropOutModal({ open, onClose }: DropOutModalProps) {
+function DropOutModal({
+  open,
+  onClose,
+  cohortMembershipId,
+}: DropOutModalProps) {
   const [selectedReason, setSelectedReason] = React.useState<string>('');
   const [isButtonDisabled, setIsButtonDisabled] = React.useState<boolean>(true);
 
-
   const { t } = useTranslation();
   const theme = useTheme<any>();
 
@@ -48,18 +54,34 @@ function DropOutModal({ open, onClose }: DropOutModalProps) {
 
   const handleSelection = (event: SelectChangeEvent) => {
     setSelectedReason(event.target.value);
-    setIsButtonDisabled(false)
+    setIsButtonDisabled(false);
   };
 
   const handleMarkDropout = () => {
     onClose(true, selectedReason);
-    console.log('Dropout api called')
-    setIsButtonDisabled(true)
-    // console.log('!!!!!!!!!!!!!!!!!!!!!!!!', selectedReason)
-    // call dropout api here
+    console.log('Dropout api called');
+    if (selectedReason && cohortMembershipId) {
+      let memberStatus = 'dropout';
+      let statusReason = selectedReason;
+      let membershipId = cohortMembershipId;
+      const response = updateCohortMemberStatus({
+        memberStatus,
+        statusReason,
+        membershipId,
+      });
+      // console.log('!!!!!!!!!!!!!!!!!!!!!', response);
+      ReactGA.event('dropout-student-successful', {
+        cohortMembershipId: membershipId,
+      });
+      // if (response.responseCode !== 201 || response.params.err) {
+      //   ReactGA.event('dropout-student-error', { cohortMembershipId: membershipId });
+      throw new Error();
+      //   //   response.params.errmsg ||
+      //   //     'An error occurred while updating the user.'
+    }
+    setIsButtonDisabled(true);
   };
 
-
   return (
     <React.Fragment>
       <Modal

diff --git a/src/components/LearnersList.tsx b/src/components/LearnersList.tsx
@@ -12,13 +12,16 @@ import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import { LearnerListProps } from '@/utils/Interfaces';
 import ConfirmationModal from './ConfirmationModal';
+import { updateCohortMemberStatus } from '@/services/MyClassDetailsService';
+import ReactGA from 'react-ga4';
 
 type Anchor = 'bottom';
 
 const LearnersList: React.FC<LearnerListProps> = ({
   learnerName,
   isDropout,
   enrollmentId,
+  cohortMembershipId
 }) => {
   const [state, setState] = React.useState({
     bottom: false,
@@ -51,20 +54,49 @@ const LearnersList: React.FC<LearnerListProps> = ({
     if (name === 'mark-drop-out') {
       setShowModal(true);
     } else if (name === 'unmark-drop-out') {
-      // call api to unmark as dropout
+      if (cohortMembershipId) {
+        let memberStatus = 'active';
+        let membershipId = cohortMembershipId;
+        const response = updateCohortMemberStatus({
+          memberStatus,
+          membershipId,
+        });
+        // console.log('!!!!!!!!!!!!!!!!!!!!!', response);
+        ReactGA.event('unmark-dropout-student-successful', {
+          cohortMembershipId: membershipId,
+        });
+        // if (response.responseCode !== 201 || response.params.err) {
+        //   ReactGA.event('unmark-dropout-student-error', { cohortMembershipId: membershipId });
+        throw new Error();
+        //   //   response.params.errmsg ||
+        //   //     'An error occurred while updating the user.'
+      }
     } 
     else {
       setConfirmationModalOpen(true);
     }
   };
 
   const handleAction = () => {
-    // handleRemoveLearnerFromCohort();
     //Close all modals
     //add toast messages on success and failure
-    console.log(
-      'handleRemoveLearnerFromCohort api call'
-    );
+    if ( cohortMembershipId) {
+      let memberStatus = 'archived';
+      let membershipId = cohortMembershipId;
+      const response = updateCohortMemberStatus({
+        memberStatus,
+        membershipId,
+      });
+      // console.log('!!!!!!!!!!!!!!!!!!!!!', response);
+      ReactGA.event('remove-student-successful', {
+        cohortMembershipId: membershipId,
+      });
+      // if (response.responseCode !== 201 || response.params.err) {
+      //   ReactGA.event('remove-student-error', { cohortMembershipId: membershipId });
+      throw new Error();
+      //   //   response.params.errmsg ||
+      //   //     'An error occurred while updating the user.'
+    }
     setConfirmationModalOpen(false);
     handleCloseBottomDrawer()
   };
@@ -229,7 +261,7 @@ const LearnersList: React.FC<LearnerListProps> = ({
         renderCustomContent={renderCustomContent}
       />
 
-      <DropOutModal open={showModal} onClose={() => setShowModal(false)} />
+      <DropOutModal open={showModal} onClose={() => setShowModal(false)} cohortMembershipId={cohortMembershipId}/>
       <ConfirmationModal
         message={t('COMMON.SURE_REMOVE')}
         handleAction={handleAction}

diff --git a/src/services/MyClassDetailsService.ts b/src/services/MyClassDetailsService.ts
@@ -25,20 +25,21 @@ export const getMyCohortMemberList = async ({
   }
 };
 
-// export const updateCohortMemberStatus = async ({
-//   memberStatus,
-//   statusReason
-// }: updateCohortMemberStatusParams): Promise<any> => {
-//   const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/cohortmember/update/${membershipId}`;
-//   try {
-//     const response = await put(apiUrl, {
-//       memberStatus,
-//       statusReason
-//     });
-//     console.log('data', response?.data);
-//     return response?.data;
-//   } catch (error) {
-//     console.error('error in attendance report api ', error);
-//     // throw error;
-//   }
-// };
+export const updateCohortMemberStatus = async ({
+  memberStatus,
+  statusReason,
+  membershipId
+}: updateCohortMemberStatusParams): Promise<any> => {
+  const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/cohortmember/update/${membershipId}`;
+  try {
+    const response = await put(apiUrl, {
+      memberStatus,
+      statusReason
+    });
+    console.log('data', response?.data);
+    return response?.data;
+  } catch (error) {
+    console.error('error in attendance report api ', error);
+    // throw error;
+  }
+};
diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts
@@ -228,11 +228,13 @@ export interface allCenterAttendancePercentParam {
 export interface updateCohortMemberStatusParams {
   memberStatus: string;
   statusReason?: string;
+  membershipId: string | number;
 }
 
 export interface LearnerListProps {
   isDropout: boolean;
   enrollmentId?: string | number;
+  cohortMembershipId: string | number;
   learnerName: string;
 }
 export interface FacilitatorListParam {