Issue #PS-000 feat: Fixed event on dashboard

src/components/CohortSelectionSection.tsx

@@ -17,6 +17,7 @@ import { CustomField } from '@/utils/Interfaces';
 import {
   CenterType,
   cohortHierarchy,
+  QueryKeys,
   Status,
   Telemetry,
 } from '@/utils/app.constant';
@@ -29,6 +30,7 @@ import manageUserStore from '@/store/manageUserStore';
 import { ArrowDropDownIcon } from '@mui/x-date-pickers/icons';
 import { telemetryFactory } from '@/utils/telemetry';
 import { toPascalCase } from '@/utils/Helper';
+import { useQueryClient } from '@tanstack/react-query';
 
 interface CohortSelectionSectionProps {
   classId: string;
@@ -93,6 +95,8 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
 }) => {
   const router = useRouter();
   const theme = useTheme<any>();
+  const queryClient = useQueryClient();
+
   const pathname = usePathname(); // Get the current pathname
   const { t } = useTranslation();
   const setCohorts = useStore((state) => state.setCohorts);
@@ -138,9 +142,15 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
       setLoading(true);
       const fetchCohorts = async () => {
         try {
-          const response = await getCohortList(userId, {
-            customField: 'true',
+          // const response = await getCohortList(userId, {
+          //   customField: 'true',
+          // });
+
+          const response = await queryClient.fetchQuery({
+            queryKey: [QueryKeys.MY_COHORTS, userId],
+            queryFn: () => getCohortList(userId as string, { filter: 'true' }),
           });
+
           // response = response.filter((block: any) => {
           //   if (
           //     block?.cohortMemberStatus === Status.ACTIVE &&

src/components/SessionCard.tsx

@@ -14,6 +14,7 @@ import ConfirmationModal from './ConfirmationModal';
 
 const SessionsCard: React.FC<SessionsCardProps> = ({
   data,
+  showCenterName=false,
   children,
   isEventDeleted,
   isEventUpdated,
@@ -159,7 +160,7 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
             {startTime} - {endTime}
           </Typography>
           <Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
-            {data?.metadata?.framework?.teacherName}
+            {showCenterName ? data?.location : data?.metadata?.framework?.teacherName}
           </Typography>
         </Box>
         {showEdit && (

src/pages/dashboard.tsx

@@ -56,17 +56,21 @@ import calendar from '../assets/images/calendar.svg';
 import Header from '../components/Header';
 import Loader from '../components/Loader';
 import useDeterminePathColor from '../hooks/useDeterminePathColor';
-import { Role, Telemetry } from '@/utils/app.constant';
+import { QueryKeys, Role, Telemetry } from '@/utils/app.constant';
 import { telemetryFactory } from '@/utils/telemetry';
 import { getEventList } from '@/services/EventService';
 import SessionCard from '@/components/SessionCard';
 import SessionCardFooter from '@/components/SessionCardFooter';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import { useQueryClient } from '@tanstack/react-query';
+import { getCohortList } from '@/services/CohortServices';
 
 interface DashboardProps {}
 
 const Dashboard: React.FC<DashboardProps> = () => {
   const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
   const [open, setOpen] = React.useState(false);
   const [cohortsData, setCohortsData] = React.useState<Array<ICohort>>([]);
   const [manipulatedCohortData, setManipulatedCohortData] =
@@ -106,6 +110,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
   const [openDrawer, setOpenDrawer] = React.useState<boolean>(false);
   const [sessions, setSessions] = React.useState<Session[]>();
   const [extraSessions, setExtraSessions] = React.useState<Session[]>();
+  const [myCohortList, setMyCohortList] = React.useState<any>();
 
   const toggleDrawer = (newOpen: boolean) => () => {
     setOpenDrawer(newOpen);
@@ -157,6 +162,20 @@ const Dashboard: React.FC<DashboardProps> = () => {
     }
   }, []);
 
+  useEffect(() => {
+    const getMyCohortList = async () => {
+      const myCohortList = await queryClient.fetchQuery({
+        queryKey: [QueryKeys.MY_COHORTS, userId],
+        queryFn: () => getCohortList(userId as string, { filter: 'true' }),
+      });
+
+      setMyCohortList(myCohortList);
+    };
+    if (userId) {
+      getMyCohortList();
+    }
+  }, [userId]);
+
   //API for getting student list
   useEffect(() => {
     const getCohortMemberList = async () => {
@@ -505,6 +524,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
     }
   }
 
+
   useEffect(() => {
     const getSessionsData = async () => {
       try {
@@ -517,14 +537,27 @@ const Dashboard: React.FC<DashboardProps> = () => {
             after: afterDate,
             before: beforeDate,
           },
-          cohortId: classId,
+          // cohortId: classId,
+          createdBy: userId,
           status: ['live'],
         };
         const response = await getEventList({ limit, offset, filters });
-        let sessionArray: any[] = [];
+
+        // check if cohort's membership is active
+
+        // const myCohortList = await queryClient.fetchQuery({
+        //   queryKey: [QueryKeys.MY_COHORTS, userId],
+        //   queryFn: () => getCohortList(userId as string, { filter: 'true' }),
+        // });
+
+        const sessionArray: any[] = [];
         if (response?.events.length > 0) {
           response?.events.forEach((event: any) => {
-            if (event.isRecurring) {
+            console.log('myCohortList', myCohortList);
+            const cohort = myCohortList?.[0]?.childData?.find(
+              (cohort: any) => cohort?.cohortId === event?.metadata?.cohortId
+            );
+            if (cohort && event.isRecurring) {
               sessionArray.push(event);
             }
           });
@@ -535,8 +568,10 @@ const Dashboard: React.FC<DashboardProps> = () => {
       }
     };
 
-    getSessionsData();
-  }, [timeTableDate, classId]);
+    if (userId && myCohortList) {
+      getSessionsData();
+    }
+  }, [timeTableDate, userId, myCohortList]);
 
   useEffect(() => {
     const getExtraSessionsData = async () => {
@@ -547,8 +582,8 @@ const Dashboard: React.FC<DashboardProps> = () => {
           date.setDate(date.getDate() + modifyAttendanceLimit)
         );
         const endDate = shortDateFormat(lastDate);
-        const afterDate = getAfterDate(startDate);
-        const beforeDate = getBeforeDate(endDate);
+        const afterDate = getAfterDate(timeTableDate);
+        const beforeDate = getBeforeDate(timeTableDate);
         const limit = 0;
         const offset = 0;
         const filters = {
@@ -558,14 +593,28 @@ const Dashboard: React.FC<DashboardProps> = () => {
           endDate: {
             before: beforeDate,
           },
-          cohortId: classId,
+          // cohortId: classId,
+          createdBy: userId,
           status: ['live'],
         };
         const response = await getEventList({ limit, offset, filters });
-        let extraSessionArray: any[] = [];
+
+        // check if cohort's membership is active
+
+        // const myCohortList = await queryClient.fetchQuery({
+        //   queryKey: [QueryKeys.MY_COHORTS, userId],
+        //   queryFn: () => getCohortList(userId as string, { filter: 'true' }),
+        // });
+
+        const extraSessionArray: any[] = [];
         if (response?.events.length > 0) {
           response?.events.forEach((event: any) => {
-            if (!event.isRecurring) {
+            console.log('myCohortList', myCohortList);
+            const cohort = myCohortList?.[0]?.childData?.find(
+              (cohort: any) => cohort?.cohortId === event?.metadata?.cohortId
+            );
+
+            if (cohort && !event.isRecurring) {
               extraSessionArray.push(event);
             }
           });
@@ -576,8 +625,11 @@ const Dashboard: React.FC<DashboardProps> = () => {
       }
     };
 
-    getExtraSessionsData();
-  }, [classId]);
+    if (userId && myCohortList) {
+      getExtraSessionsData();
+    }
+  }, [timeTableDate, userId, myCohortList]);
+
 
   return (
     <>
@@ -1082,15 +1134,18 @@ const Dashboard: React.FC<DashboardProps> = () => {
                   <Grid container spacing={2}>
                     {sessions?.map((item) => (
                       <Grid xs={12} sm={6} md={6} key={item.id} item>
-                        <SessionCard data={item}>
+                        <SessionCard data={item} showCenterName={true}>
                           <SessionCardFooter item={item} />
                         </SessionCard>
                       </Grid>
                     ))}
                     {sessions && sessions?.length === 0 && (
                       <Box
                         className="fs-12 fw-400 italic"
-                        sx={{ color: theme.palette.warning['300'], paddingLeft: '18px' }}
+                        sx={{
+                          color: theme.palette.warning['300'],
+                          paddingLeft: '18px',
+                        }}
                       >
                         {t('COMMON.NO_SESSIONS_SCHEDULED')}
                       </Box>
@@ -1103,15 +1158,15 @@ const Dashboard: React.FC<DashboardProps> = () => {
                     className="fs-14 fw-500"
                     sx={{ color: theme.palette.warning['300'] }}
                   >
-                    {t('COMMON.UPCOMING_EXTRA_SESSION', {
+                    {t('CENTER_SESSION.EXTRA_SESSION', {
                       days: eventDaysLimit,
                     })}
                   </Box>
                   <Box mt={3} px="18px">
                     <Grid container spacing={1}>
                       {extraSessions?.map((item) => (
                         <Grid xs={12} sm={6} md={6} key={item.id} item>
-                          <SessionCard data={item} >
+                          <SessionCard data={item} showCenterName={true}>
                             <SessionCardFooter item={item} />
                           </SessionCard>
                         </Grid>

src/utils/Interfaces.ts

@@ -128,6 +128,7 @@ export interface ExtraSessionsCardProps {
 
 export interface SessionsCardProps {
   data: any;
+  showCenterName?: boolean;
   children?: React.ReactNode;
   isEventDeleted?: () => void;
   isEventUpdated?: () => void;