Merge pull request #59 from Aar-if/reassignAPI

Issue #PS-1456 feat: API integration for re-assign Learners

src/components/LearnersListItem.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/utils/Interfaces';
 import React, { useEffect } from 'react';
 import { Status, names, Role } from '@/utils/app.constant';
-
+import { BulkCreateCohortMembersRequest } from '@/utils/Interfaces';
 import ApartmentIcon from '@mui/icons-material/Apartment';
 import BottomDrawer from './BottomDrawer';
 import ConfirmationModal from './ConfirmationModal';
@@ -33,6 +33,8 @@ import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import manageUserStore from '../store/manageUserStore';
 import useStore from '@/store/store';
+import reassignLearnerStore from '@/store/reassignLearnerStore';
+import { bulkCreateCohortMembers } from '@/services/CohortServices';
 
 type Anchor = 'bottom';
 
@@ -79,8 +81,10 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
   const [openCentersModal, setOpenCentersModal] = React.useState(false);
   const [openDeleteUserModal, setOpenDeleteUserModal] = React.useState(false);
   const [centers, setCenters] = React.useState();
+  const [centersName, setCentersName] = React.useState();
   const store = manageUserStore();
-
+  const reassignStore = reassignLearnerStore()
+  const setReassignId = reassignLearnerStore((state) => state.setReassignId);
   const CustomLink = styled(Link)(({ theme }) => ({
     textDecoration: 'underline',
     textDecorationColor: theme?.palette?.secondary.main,
@@ -96,15 +100,22 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
       // window.location.reload();
     }
     const cohorts = userStore.cohorts;
-    const centerList = cohorts.map((cohort: { name: string }) => cohort.name);
-    setCenters(centerList);
+    const centers = cohorts.map((cohort: { name: string, cohortId: string }) => ({
+      name: cohort.name,
+      cohortId: cohort.cohortId,
+    }));
+    const centersName = centers?.map((center: { name: any; }) => center?.name);
+
+    setCenters(centers);
+    setCentersName(centersName);
+
   }, [reloadState, setReloadState]);
 
   const toggleDrawer =
     (anchor: Anchor, open: boolean) =>
     (event: React.KeyboardEvent | React.MouseEvent) => {
       setCohortLearnerDeleteId(cohortMembershipId);
-      console.log(cohortMembershipId);
+      setReassignId(userId)
 
       if (
         event.type === 'keydown' &&
@@ -312,12 +323,32 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
     setConfirmationModalReassignCentersOpen(true);
   };
 
-  const handleReassignCenterRequest = () => {
-    showToastMessage(
-      t('MANAGE_USERS.CENTERS_REQUESTED_SUCCESSFULLY'),
-      'success'
-    );
+  const handleReassignCenterRequest = async () => {
+
+    const payload: BulkCreateCohortMembersRequest = {
+      userId: [reassignStore.reassignId], 
+      cohortId: [reassignStore.cohortId],   
+      removeCohortId: [reassignStore.removeCohortId]
+    };
+
+    try {
+
+      const response = await bulkCreateCohortMembers(payload);
+      console.log('Cohort members created successfully', response);
+
+      showToastMessage(
+        t('MANAGE_USERS.CENTERS_REQUESTED_SUCCESSFULLY'),
+        'success'
+      );
+    } catch (error) {
+      console.error('Error creating cohort members', error);
+      showToastMessage(
+        t('MANAGE_USERS.CENTERS_REQUEST_FAILED'),
+        'error'
+      );
+    }
   };
+
 
   const renderCustomContent = () => {
     if (isDropout) {
@@ -646,14 +677,15 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
         modalOpen={confirmationModalOpen}
       />
 
-      <ManageCentersModal
-        open={openCentersModal}
-        onClose={handleCloseCentersModal}
-        centersName={centers}
-        centers={centers}
-        onAssign={handleAssignCenters}
-        isForLearner={true}
-      />
+<ManageCentersModal
+  open={openCentersModal}
+  onClose={handleCloseCentersModal}
+  centersName={centersName}
+  centers={centers}
+  onAssign={handleAssignCenters}
+  isForLearner={true}
+/>
+
 
       <DeleteUserModal
         type={Role.STUDENT}

src/components/ManageCentersModal.tsx

@@ -14,19 +14,20 @@ import SearchIcon from '@mui/icons-material/Search';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
+import reassignLearnerStore from '@/store/reassignLearnerStore';
 
 interface ManageUsersModalProps {
   open: boolean;
   onClose: () => void;
   centersName?: string[];
-  centers?: string[];
+  centers?: { name: string, cohortId: string }[];
   onAssign?: (selectedCenters: string[]) => void;
   isForLearner?: boolean;
 }
 
 const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
-  centersName,
-  centers,
+  centersName = [],
+  centers = [],
   open,
   onAssign,
   onClose,
@@ -37,6 +38,7 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
   const [checkedCenters, setCheckedCenters] = React.useState<string[]>([]);
   const [selectedValue, setSelectedValue] = React.useState('');
   const [searchQuery, setSearchQuery] = React.useState('');
+  const setCohortId = reassignLearnerStore((state) => state.setCohortId);
 
   const style = {
     position: 'absolute',
@@ -55,7 +57,7 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
 
   React.useEffect(() => {
     if (centers) {
-      setCheckedCenters(centers as never[]);
+      setCheckedCenters(centers?.map(center => center?.name));
     }
   }, [centers]);
 
@@ -75,8 +77,9 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
     });
   };
 
-  const handleRadioChange = (name: string) => {
+  const handleRadioChange = (name: string, cohortId: string) => {
     setSelectedValue(name);
+    setCohortId(cohortId);
   };
 
   const handleAssign = () => {
@@ -89,8 +92,8 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
     setSearchQuery(event.target.value);
   };
 
-  const filteredCenters = centersName?.filter((name) =>
-    name.toLowerCase().includes(searchQuery.toLowerCase())
+  const filteredCenters = centers.filter(center =>
+    center?.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
   return (
@@ -152,7 +155,7 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
           </Box>
           <Box mx={'20px'}>
             <Box sx={{ height: '37vh', mt: '10px', overflowY: 'auto' }}>
-              {filteredCenters?.map((name, index) => (
+              {filteredCenters?.map((center, index) => (
                 <React.Fragment key={index}>
                   <Box
                     borderBottom={theme.palette.warning['A100']}
@@ -169,22 +172,22 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
                         pb: '20px',
                       }}
                     >
-                      {name}
+                      {center?.name}
                     </Box>
                     <Box>
                       {isForLearner ? (
                         <Radio
                           sx={{ pb: '20px' }}
-                          checked={selectedValue.includes(name)}
-                          onChange={() => handleRadioChange(name)}
+                          checked={selectedValue === center?.name}
+                          onChange={() => handleRadioChange(center?.name, center?.cohortId)}
                           value={selectedValue}
                         />
                       ) : (
                         <Checkbox
                           sx={{ pb: '20px' }}
                           className="checkBox_svg"
-                          checked={checkedCenters.includes(name)}
-                          onChange={() => handleToggle(name)}
+                          checked={checkedCenters.includes(center?.name)}
+                          onChange={() => handleToggle(center?.name)}
                         />
                       )}
                     </Box>

src/pages/centers/[cohortId].tsx

@@ -43,6 +43,7 @@ import { useRouter } from 'next/router';
 import ReactGA from 'react-ga4';
 import { Session } from '../../utils/Interfaces';
 import Schedule from './../../components/Schedule';
+import reassignLearnerStore from '@/store/reassignLearnerStore';
 
 const TeachingCenterDetails = () => {
   const [value, setValue] = React.useState(1);
@@ -115,6 +116,8 @@ const TeachingCenterDetails = () => {
     setOpenSchedule(false);
     setDeleteModal(false);
   };
+  const setRemoveCohortId = reassignLearnerStore((state) => state.setRemoveCohortId);
+
 
   useEffect(() => {
     const getCohortData = async () => {
@@ -125,7 +128,8 @@ const TeachingCenterDetails = () => {
 
       if (response?.cohortData?.length) {
         cohortData = response?.cohortData[0];
-
+        setRemoveCohortId(cohortData?.cohortId)
+
         if (cohortData?.customField?.length) {
           const district = cohortData.customField.find(
             (item: CustomField) => item.label === 'District'

src/services/CohortServices.ts

@@ -1,5 +1,6 @@
 import { CohortListParam } from '@/utils/Interfaces';
 import { get, post } from './RestClient';
+import { BulkCreateCohortMembersRequest } from '@/utils/Interfaces';
 
 export const cohortList = async ({
   limit,
@@ -44,3 +45,16 @@ export const getCohortList = async (
     // throw error;
   }
 };
+
+export const bulkCreateCohortMembers = async (
+  payload: BulkCreateCohortMembersRequest
+): Promise<any> => {
+  const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/cohortmember/bulkCreate`;
+  try {
+    const response = await post(apiUrl, payload);
+    return response.data;
+  } catch (error) {
+    console.error('Error in bulk creating cohort members', error);
+    throw error;
+  }
+};

src/store/reassignLearnerStore.js

@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+const reassignLearnerStore = create(
+  persist(
+    (set) => ({
+      reassignId: '',
+      cohortId: '',
+      removeCohortId: '',
+      setReassignId: (newReassignId) => set((state) => ({ reassignId: newReassignId })),
+      setCohortId: (newCohortId) => set((state) => ({ cohortId: newCohortId })),
+      setRemoveCohortId: (newRemoveCohortId) => set((state) => ({ removeCohortId: newRemoveCohortId })),
+    }),
+    {
+      name: 'teacherApp',
+      getStorage: () => localStorage,
+    }
+  )
+);
+
+export default reassignLearnerStore;

src/utils/Interfaces.ts

@@ -403,3 +403,8 @@ export interface CreateUserParam {
   tenantCohortRoleMapping: TenantCohortRoleMapping[];
   customFields: CustomField[];
 }
+export interface BulkCreateCohortMembersRequest {
+  userId: string[];
+  cohortId: string[];
+  removeCohortId?: string[];
+}