Merge pull request #271 from Rushikesh-Sonawane99/release-1.0.0

Issue #PS-API Integration to display cohort list and UI implementation as per figma
tekdi · Sep 18, 2024 · 8e78973 · 8e78973
2 parents d5d5c46 + 75d4ad9
commit 8e78973
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 11 deletions.
diff --git a/src/pages/attendance-history.tsx b/src/pages/attendance-history.tsx
@@ -22,6 +22,7 @@ import {
   AttendanceStatusListProps,
   ICohort,
   CohortMemberList,
+  user,
 } from '../utils/Interfaces';
 
 import AttendanceStatus from '@/components/AttendanceStatus';
@@ -54,14 +55,6 @@ import { attendanceStatusList } from '../services/AttendanceService';
 import { telemetryFactory } from '@/utils/telemetry';
 import NoDataFound from '@/components/common/NoDataFound';
 
-interface user {
-  memberStatus: string;
-  userId: string;
-  name: string;
-  attendance?: string;
-  key?: string;
-}
-
 const UserAttendanceHistory = () => {
   const theme = useTheme<any>();
   const { t } = useTranslation();

diff --git a/src/pages/board-enrollment/index.tsx b/src/pages/board-enrollment/index.tsx
@@ -26,18 +26,97 @@ import PieChartGraph from '@/components/PieChartGraph';
 import { boardEnrollment } from '@/services/BoardEnrollmentServics';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { useRouter } from 'next/router';
+import CohortSelectionSection from '@/components/CohortSelectionSection';
+import { ICohort, user } from '@/utils/Interfaces';
+import { toPascalCase } from '@/utils/Helper';
+import { showToastMessage } from '@/components/Toastify';
+import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
 
 const BoardEnrollment = () => {
   const theme = useTheme<any>();
   const { t } = useTranslation();
   const router = useRouter();
   const [boardEnrollmentList, setBoardEnrollmentList] = useState<any>([]);
   const [activeStep, setActiveStep] = React.useState<number>(0);
+  const [classId, setClassId] = React.useState('');
+  const [cohortsData, setCohortsData] = React.useState<Array<ICohort>>([]);
+  const [manipulatedCohortData, setManipulatedCohortData] =
+    React.useState<Array<ICohort>>(cohortsData);
+  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
+  const [userId, setUserId] = React.useState<string | null>(null);
+  const [blockName, setBlockName] = React.useState<string>('');
+  const [displayStudentList, setDisplayStudentList] = React.useState<
+  Array<user>
+>([]);
+  const [loading, setLoading] = React.useState(false);
+
   useEffect(() => {
     const res = boardEnrollment();
     setBoardEnrollmentList(res);
   }, []);
 
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      const token = localStorage.getItem('token');
+      setClassId(localStorage.getItem('classId') ?? '');
+      const classId = localStorage.getItem('classId') ?? '';
+      localStorage.setItem('cohortId', classId);
+      setLoading(false);
+      if (token) {
+        router.push('/board-enrollment');
+      } else {
+        router.push('/login', undefined, { locale: 'en' });
+      }
+    }
+  }, []);
+
+  useEffect(()=>{
+    const getCohortMemberList = async () => {
+      setLoading(true);
+      try {
+        if (classId) {
+          const limit = 300;
+          const page = 0;
+          const filters = { cohortId: classId };
+          const response = await getMyCohortMemberList({
+            limit,
+            page,
+            filters,
+          });
+          const resp = response?.result?.userDetails || [];
+
+          if (resp) {
+            const selectedDateStart = new Date();
+            selectedDateStart.setHours(0, 0, 0, 0);
+            const nameUserIdArray = resp
+              .filter((entry: any) => {
+                const createdAtDate = new Date(entry.createdAt);
+                createdAtDate.setHours(0, 0, 0, 0);
+                return createdAtDate <= selectedDateStart;
+              })
+              .map((entry: any) => ({
+                userId: entry.userId,
+                name: toPascalCase(entry.name),
+                memberStatus: entry.status,
+                createdAt: entry.createdAt,
+              }));
+              console.log(`nameUserIdArray`, nameUserIdArray)
+              setDisplayStudentList(nameUserIdArray)
+          } else {
+            setDisplayStudentList([]);
+          }
+        }
+      } catch (error) {
+        console.error('Error fetching cohort list:', error);
+        showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
+        setLoading(false);
+      } finally {
+        setLoading(false);
+      }
+    };
+    getCohortMemberList()
+  },[classId])
+
   return (
     <>
       <Header />
@@ -83,7 +162,7 @@ const BoardEnrollment = () => {
         <Grid container sx={{ mt: '20px' }}>
           <Grid item xs={8}>
             <Box>
-              <FormControl className="drawer-select" sx={{ width: '100%' }}>
+              {/* <FormControl className="drawer-select" sx={{ width: '100%' }}>
                 <Select
                   displayEmpty
                   style={{
@@ -94,10 +173,28 @@ const BoardEnrollment = () => {
                   }}
                 >
                   <MenuItem value="All Centers">
-                    All Centers {/*will come form API */}
+                    All Centers 
                   </MenuItem>
                 </Select>
-              </FormControl>
+              </FormControl> */}
+              <CohortSelectionSection
+                classId={classId}
+                setClassId={setClassId}
+                userId={userId}
+                setUserId={setUserId}
+                isAuthenticated={isAuthenticated}
+                setIsAuthenticated={setIsAuthenticated}
+                loading={loading}
+                setLoading={setLoading}
+                cohortsData={cohortsData}
+                setCohortsData={setCohortsData}
+                manipulatedCohortData={manipulatedCohortData}
+                setManipulatedCohortData={setManipulatedCohortData}
+                isManipulationRequired={false}
+                blockName={blockName}
+                setBlockName={setBlockName}
+                isCustomFieldRequired={true}
+              />
             </Box>
           </Grid>
           <Grid

diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts
@@ -47,6 +47,14 @@ export interface UserAttendanceObj {
   memberStatus?: string;
 }
 
+export interface user {
+  memberStatus: string;
+  userId: string;
+  name: string;
+  attendance?: string;
+  key?: string;
+}
+
 export interface BulkAttendanceParams {
   attendanceDate: string;
   contextId: string;