Merge pull request #550 from suvarnakale/release-1.1.0

Isuue #PS-2909 & PS-2907   : Show subtopics for topics which has same name in the course-planner and multi-select options for topic

src/components/PlannedSession.tsx

@@ -12,6 +12,7 @@ import {
   Status,
   Telemetry,
   sessionMode,
+  sessionType,
 } from '@/utils/app.constant';
 import AddIcon from '@mui/icons-material/Add';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -931,7 +932,10 @@ const PlannedSession: React.FC<PlannedModalProps> = ({
             cohortId: cohortId || '',
             cycleId: '',
             tenantId: '',
-            type: clickedBox === 'PLANNED_SESSION' ? 'planned' : 'extra',
+            type:
+              clickedBox === 'PLANNED_SESSION'
+                ? sessionType.PLANNED
+                : sessionType.EXTRA,
           },
         };
 
@@ -994,18 +998,21 @@ const PlannedSession: React.FC<PlannedModalProps> = ({
                     });
 
                     if (response?.result?.userDetails) {
-                      const deviceId = response?.result?.userDetails?.flatMap((device: { deviceId?: string | null }) => device.deviceId || []).filter(Boolean)
+                      const deviceId = response?.result?.userDetails
+                        .map((device: any) => device?.deviceId)
+                        .filter((id: any) => id !== null);
                       if (deviceId?.length > 0) {
-                        getNotification(deviceId, "LEARNER_NEW_SESSION_ALERT");
+                        getNotification(deviceId, 'LEARNER_NEW_SESSION_ALERT');
                       } else {
-                        console.warn("No valid device IDs found. Skipping notification API call.");
+                        console.warn(
+                          'No valid device IDs found. Skipping notification API call.'
+                        );
                       }
                     }
                   } catch (error) {
-                    console.error("Error fetching cohort member list:", error);
+                    console.error('Error fetching cohort member list:', error);
                   }
-                }   
-
+                }
 
                 const windowUrl = window.location.pathname;
                 const cleanedUrl = windowUrl.replace(/^\//, '');

src/components/SelectTopic.tsx

@@ -24,22 +24,32 @@ const SelectTopic: React.FC<TopicSubtopicProps> = ({
   const { t } = useTranslation();
   const theme = useTheme<any>();
 
-  const [selectedTopic, setSelectedTopic] = useState<string>('');
+  const [selectedTopic, setSelectedTopic] = useState<string[]>([]);
   const [subtopics, setSubtopics] = useState<string[]>([]);
   const [selectedSubValues, setSelectedSubValues] = useState<string[]>([]);
 
   useEffect(() => {
-    if (selectedTopics !== undefined) {
-      setSelectedTopic(selectedTopics);
-      setSelectedSubValues(selectedSubTopics);
-      setSubtopics(subTopicsList[selectedTopics]);
-    }
+    setSelectedTopic(Array.isArray(selectedTopics) ? selectedTopics : []);
+    setSelectedSubValues(
+      Array.isArray(selectedSubTopics) ? selectedSubTopics : []
+    );
+
+    const aggregatedSubtopics = (
+      Array.isArray(selectedTopics) ? selectedTopics : []
+    ).flatMap((topic) => subTopicsList[topic] || []);
+    setSubtopics(aggregatedSubtopics);
   }, []);
 
-  const handleTopicChange = (event: SelectChangeEvent<string>) => {
-    const topic = event.target.value;
+  const handleTopicChange = (event: SelectChangeEvent<string[]>) => {
+    const { value } = event.target;
+    const topic = typeof value === 'string' ? value.split(',') : value;
     setSelectedTopic(topic);
-    setSubtopics(subTopicsList[topic] || []);
+    const aggregatedSubtopics = topic.flatMap((t) =>
+      subTopicsList
+        .filter((item: any) => item[t])
+        .flatMap((item: any) => item[t] || [])
+    );
+    setSubtopics(aggregatedSubtopics);
     setSelectedSubValues([]);
     onTopicSelected(topic);
   };
@@ -68,13 +78,23 @@ const SelectTopic: React.FC<TopicSubtopicProps> = ({
           <Select
             labelId="topic-select-label"
             id="topic-select"
+            multiple
             value={selectedTopic}
             onChange={handleTopicChange}
+            renderValue={(selected) => selected.join(', ')}
             style={{ borderRadius: '4px' }}
             className="topic-select"
           >
             {topics?.map((topic) => (
               <MenuItem key={topic} value={topic}>
+                <Checkbox
+                  checked={selectedTopic.indexOf(topic) > -1}
+                  sx={{
+                    '&.Mui-checked': {
+                      color: theme?.palette?.warning['300'],
+                    },
+                  }}
+                />
                 <ListItemText primary={topic} />
               </MenuItem>
             ))}

src/components/SessionCardFooter.tsx

@@ -97,10 +97,18 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({
             const tasks = res?.result?.tasks;
             const topics = tasks?.map((task: any) => task?.name);
             setTopicList(topics);
-            const subTopics = tasks?.reduce((acc: any, task: any) => {
-              acc[task?.name] = task?.children.map((child: any) => child?.name);
+            // const subTopics = tasks?.reduce((acc: any, task: any) => {
+            //   acc[task?.name] = task?.children.map((child: any) => child?.name);
+            //   return acc;
+            // }, {});
+            const subTopics = tasks?.reduce((acc: any[], task: any) => {
+              const topicName = task?.name;
+              const subtopicNames = task?.children.map(
+                (child: any) => child?.name
+              );
+              acc.push({ [topicName]: subtopicNames });
               return acc;
-            }, {});
+            }, []);
             setTransformedTasks(subTopics);
             const learningResources = tasks?.reduce((acc: any, task: any) => {
               acc[task.name] = task?.children.reduce(
@@ -386,7 +394,7 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({
                   sx={{ color: theme.palette.secondary.main, fontSize: '18px' }}
                 />
                 <Typography color={theme.palette.secondary.main} variant="h5">
-                  {item?.erMetaData?.topic}
+                  {item?.erMetaData?.topic?.join(', ')}
                 </Typography>
               </Box>
               <Box

src/components/TopicDetails.tsx

@@ -20,7 +20,7 @@ import RequisitesAccordion from './RequisitesAccordion';
 import { showToastMessage } from './Toastify';
 import { useEffect, useState } from 'react';
 interface TopicDetailsProps {
-  topic: string;
+  topic: [];
   subTopic: [];
   learningResources: any;
   handleOpen: any;
@@ -40,18 +40,18 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
   const theme = useTheme<any>();
   const [contentData, setContentData] = useState([]);
 
-  useEffect(()=>{
+  useEffect(() => {
     const content = learningResources.filter((resource: any) => {
       return (
         resource.topic === topic &&
         subTopic.some((sub) => sub === resource.subtopic)
       );
     });
-    if(content){
+    if (content) {
       setContentData(content);
       // console.log(`content`,content);
     }
-  },[learningResources]) 
+  }, [learningResources]);
 
   const openTopicModal = () => {
     handleOpen();
@@ -63,18 +63,25 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
   };
 
   const filterByIdentifier = (contentData: any[], identifier: string) => {
-    return contentData.filter(item => item.identifier === identifier);
+    return contentData.filter((item) => item.identifier === identifier);
   };
 
   const handlePlayers = (identifier: string) => {
     sessionStorage.setItem('previousPage', window.location.href);
     if (identifier !== undefined && identifier !== '') {
       const filteredData = filterByIdentifier(contentData, identifier);
       if (filteredData && filteredData.length > 0) {
-        if (filteredData[0].resourceType === 'Course') {
-          router.push(`/course-hierarchy/${filteredData[0].identifier}`);
-        } else {
-          router.push(`/play/content/${filteredData?.[0]?.identifier?.toLowerCase()}`);
+        if (
+          filteredData[0]?.identifier !== undefined ||
+          filteredData[0]?.identifier !== ''
+        ) {
+          if (filteredData[0].resourceType === 'Course') {
+            router.push(`/course-hierarchy/${filteredData[0].identifier}`);
+          } else {
+            router.push(
+              `/play/content/${filteredData?.[0].identifier.toLowerCase()}`
+            );
+          }
         }
       } else {
         showToastMessage(t('CENTER_SESSION.IDENTIFIER_NOT_FOUND'), 'error');
@@ -104,7 +111,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
               <Box
                 sx={{ fontSize: '16px', fontWeight: '400', color: '#4D4639' }}
               >
-                {topic}
+                {topic?.join(', ')}
               </Box>
             </Box>
             {eventStatus === EventStatus.UPCOMING && (

src/pages/centers/[cohortId]/events/[date]/index.tsx

@@ -33,6 +33,7 @@ import {
 } from '../../../../../utils/Interfaces';
 import { getCohortDetails } from '@/services/CohortServices';
 import useEventDates from '@/hooks/useEventDates';
+import { sessionType } from '@/utils/app.constant';
 
 const EventMonthView: React.FC<any> = () => {
   const theme = useTheme<any>();
@@ -97,7 +98,7 @@ const EventMonthView: React.FC<any> = () => {
 
           if (response?.events.length > 0) {
             response?.events.forEach((event: any) => {
-              if (event?.metadata?.type === 'planned') {
+              if (event?.metadata?.type === sessionType.PLANNED) {
                 sessionArray.push(event);
               } else {
                 extraSessionArray.push(event);

src/pages/centers/[cohortId]/index.tsx

@@ -36,7 +36,7 @@ import { getCohortDetails } from '@/services/CohortServices';
 import { getEventList } from '@/services/EventService';
 import reassignLearnerStore from '@/store/reassignLearnerStore';
 import { CustomField } from '@/utils/Interfaces';
-import { Role, Telemetry } from '@/utils/app.constant';
+import { Role, Telemetry, sessionType } from '@/utils/app.constant';
 import AddIcon from '@mui/icons-material/Add';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
@@ -341,7 +341,7 @@ const CohortPage = () => {
         const sessionArray: any[] = [];
         if (response?.events?.length > 0) {
           response.events.forEach((event: any) => {
-            if (event?.metadata?.type === 'planned') {
+            if (event?.metadata?.type === sessionType.PLANNED) {
               sessionArray.push(event);
             }
           });
@@ -398,7 +398,7 @@ const CohortPage = () => {
         const extraSessionArray: any[] = [];
         if (response?.events?.length > 0) {
           response.events.forEach((event: any) => {
-            if (event?.metadata?.type === 'extra') {
+            if (event?.metadata?.type === sessionType.EXTRA) {
               extraSessionArray.push(event);
             }
           });

src/pages/dashboard.tsx

@@ -64,6 +64,7 @@ import {
   Role,
   Telemetry,
   cohortHierarchy,
+  sessionType,
 } from '@/utils/app.constant';
 import { telemetryFactory } from '@/utils/telemetry';
 import { getEventList } from '@/services/EventService';
@@ -781,10 +782,10 @@ const Dashboard: React.FC<DashboardProps> = () => {
               // const cohort = cohortList?.find(
               //   (cohort: any) => cohort?.cohortId === event?.metadata?.cohortId
               // );
-              if (event?.metadata?.type === 'planned') {
+              if (event?.metadata?.type === sessionType.PLANNED) {
                 sessionArray.push(event);
               }
-              if (event?.metadata?.type === 'extra') {
+              if (event?.metadata?.type === sessionType.EXTRA) {
                 extraSessionArray.push(event);
               }
             });

src/utils/app.constant.ts

@@ -6,9 +6,8 @@ import html from '../assets/images/HTML.svg';
 import mp4 from '../assets/images/MP4.svg';
 import qml from '../assets/images/Qml.svg';
 import youtube from '../assets/images/youtube.svg';
-import h5p from '../assets/images/h5p.png'
-import unit from '../assets/images/Unit.png'
-
+import h5p from '../assets/images/h5p.png';
+import unit from '../assets/images/Unit.png';
 
 // background image
 
@@ -18,9 +17,8 @@ import bghtml from '../assets/images/bgHtml.svg';
 import bgmp4 from '../assets/images/bgMP4 .svg';
 import bgqml from '../assets/images/bgQml.svg';
 import bgyoutube from '../assets/images/bgYouTube.svg';
-import bgh5p from '../assets/images/bgh5p.png'
-import bgunit from '../assets/images/bgUnit.png'
-
+import bgh5p from '../assets/images/bgh5p.png';
+import bgunit from '../assets/images/bgUnit.png';
 
 export const limit: number = 300;
 export const refetchInterval: number = 5 * 60 * 1000; // 5 min
@@ -256,3 +254,8 @@ export enum contentStatus {
   IN_PROGRESS = 'In_Progress',
   NOT_STARTED = 'Not_Started',
 }
+
+export enum sessionType {
+  PLANNED = 'planned',
+  EXTRA = 'extra',
+}