Merge pull request #407 from Aar-if/modern

Issue #000 Bug: Course Planner Fixes and improvements
tekdi · Nov 22, 2024 · 3c9de51 · 3c9de51
2 parents 37b32b9 + bbd0824
commit 3c9de51
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 45 deletions.
diff --git a/src/pages/course-planner/center/[cohortId].tsx b/src/pages/course-planner/center/[cohortId].tsx
@@ -30,7 +30,11 @@ import {
 } from '@/services/CoursePlannerService';
 import useCourseStore from '@/store/coursePlannerStore';
 import dayjs from 'dayjs';
-import { AssessmentStatus, Role, TelemetryEventType } from '@/utils/app.constant';
+import {
+  AssessmentStatus,
+  Role,
+  TelemetryEventType,
+} from '@/utils/app.constant';
 import Loader from '@/components/Loader';
 import withAccessControl from '@/utils/hoc/withAccessControl';
 // import { accessControl } from '../../app.config';
@@ -56,6 +60,9 @@ const CoursePlannerDetail = () => {
   const router = useRouter();
   const { t } = useTranslation();
   const { isRTL } = useDirection();
+  const setSelectedResource = useCourseStore(
+    (state) => state.setSelectedResource
+  );
   const setResources = useCourseStore((state) => state.setResources);
   const store = useCourseStore();
   const tStore = taxonomyStore();
@@ -98,7 +105,7 @@ const CoursePlannerDetail = () => {
         board: tStore?.board,
         type: tStore?.type,
         medium: tStore?.medium,
-        entityId: cohortId
+        entityId: cohortId,
       });
 
       if (response?.result?.data == '') {
@@ -161,7 +168,7 @@ const CoursePlannerDetail = () => {
         templateId: externalId,
         solutionId,
         role: Role.TEACHER,
-        cohortId
+        cohortId,
       });
 
       const updatedResponse = await getTargetedSolutions({
@@ -171,7 +178,7 @@ const CoursePlannerDetail = () => {
         board: tStore?.board,
         type: tStore?.type,
         medium: tStore?.medium,
-        entityId: cohortId
+        entityId: cohortId,
       });
       setLoading(false);
 
@@ -221,7 +228,7 @@ const CoursePlannerDetail = () => {
     const windowUrl = window.location.pathname;
 
     const cleanedUrl = windowUrl.replace(/^\//, '');
-    const env = cleanedUrl.split("/")[0];
+    const env = cleanedUrl.split('/')[0];
 
     const telemetryInteract = {
       context: {
@@ -241,19 +248,19 @@ const CoursePlannerDetail = () => {
 
   const toggleDrawer =
     (open: boolean, selectedCount: number = 0) =>
-      (event?: React.KeyboardEvent | React.MouseEvent) => {
-        if (
-          event &&
-          event.type === 'keydown' &&
-          ((event as React.KeyboardEvent).key === 'Tab' ||
-            (event as React.KeyboardEvent).key === 'Shift')
-        ) {
-          return;
-        }
-        setDrawerState({ ...drawerState, bottom: open });
-        setIsDrawerOpen(open);
-        setSelectedCount(selectedCount);
-      };
+    (event?: React.KeyboardEvent | React.MouseEvent) => {
+      if (
+        event &&
+        event.type === 'keydown' &&
+        ((event as React.KeyboardEvent).key === 'Tab' ||
+          (event as React.KeyboardEvent).key === 'Shift')
+      ) {
+        return;
+      }
+      setDrawerState({ ...drawerState, bottom: open });
+      setIsDrawerOpen(open);
+      setSelectedCount(selectedCount);
+    };
 
   const handleCloseModel = () => {
     setModalOpen(false);
@@ -343,7 +350,12 @@ const CoursePlannerDetail = () => {
     return false;
   };
 
-  const fetchLearningResources = async (resources: IResource[]) => {
+  const fetchLearningResources = async (
+    subtopic: any,
+    resources: IResource[]
+  ) => {
+    console.log(resources);
+
     try {
       const identifiers = resources.map((resource: IResource) => resource?.id);
       const response = await fetchBulkContents(identifiers);
@@ -354,11 +366,11 @@ const CoursePlannerDetail = () => {
         );
         return { ...resource, ...content };
       });
-
+      setSelectedResource(subtopic?.name);
       setResources(resources);
       console.log('response===>', resources);
     } catch (error) {
-      console.error("error", error);
+      console.error('error', error);
     }
   };
 
@@ -613,8 +625,11 @@ const CoursePlannerDetail = () => {
                                     cursor: 'pointer',
                                   }}
                                   onClick={() => {
-                                    fetchLearningResources(subTopic?.learningResources);
-                                    // setResources(subTopic);
+                                    fetchLearningResources(
+                                      subTopic,
+                                      subTopic?.learningResources
+                                    );
+
                                     router.push(`/topic-detail-view`);
                                   }}
                                 >
@@ -715,7 +730,10 @@ const CoursePlannerDetail = () => {
                                   sx={{ fontSize: '12px', fontWeight: '500' }}
                                   onClick={() => {
                                     // setResources(subTopic);
-                                    fetchLearningResources(subTopic?.learningResources);
+                                    fetchLearningResources(
+                                      subTopic,
+                                      subTopic?.learningResources
+                                    );
                                     router.push(`/topic-detail-view`);
                                   }}
                                 >
@@ -762,7 +780,6 @@ const CoursePlannerDetail = () => {
         selectedCount={selectedCount}
       />
 
-
       {/* <ConfirmationModal
         message={
           'You are unchecking this topic as complete. Are you sure you want to save this change?'

diff --git a/src/pages/topic-detail-view.tsx b/src/pages/topic-detail-view.tsx
@@ -4,11 +4,7 @@ import useCourseStore from '@/store/coursePlannerStore';
 import { ResourcesType } from '@/utils/app.constant';
 import { logEvent } from '@/utils/googleAnalytics';
 import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
-import {
-  Box,
-  Tab,
-  Tabs
-} from '@mui/material';
+import { Box, Tab, Tabs } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
@@ -24,34 +20,36 @@ const TopicDetailView = () => {
   const { isRTL } = useDirection();
   const store = useCourseStore();
 
-
   useEffect(() => {
-    console.log("store", store.resources);
+    console.log('store', store.resources);
     const type = ResourcesType.POSTREQUSITE;
     const filteredResources = getLearningResources(type);
-    console.log("filteredResources", filteredResources);
+    console.log('filteredResources', filteredResources);
   }, []);
 
-
   const getLearningResources = (type: string) => {
     if (store?.resources?.length) {
       return store?.resources?.filter((resource: any) => {
-        return (type === ResourcesType.NONE && !resource.type) || resource.type === type
+        return (
+          (type === ResourcesType.NONE && !resource.type) ||
+          resource.type === type
+        );
       });
     }
-  }
-
-  const toggleAccordion = (panel: string) => (event: React.SyntheticEvent, expanded: boolean) => {
-    // Toggle between the selected panel and 'panel1' to keep the first panel open by default
-    setExpanded(expanded ? panel : 'panel1');
   };
+
+  const toggleAccordion =
+    (panel: string) => (event: React.SyntheticEvent, expanded: boolean) => {
+      // Toggle between the selected panel and 'panel1' to keep the first panel open by default
+      setExpanded(expanded ? panel : 'panel1');
+    };
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
 
   const handleBackEvent = () => {
     // window.history.back();
-    router.push(`/course-planner-detail`);
+    router.back();
     logEvent({
       action: 'back-button-clicked-attendance-overview',
       category: 'Attendance Overview Page',
@@ -102,7 +100,7 @@ const TopicDetailView = () => {
                   color: theme.palette.warning['300'],
                 }}
               >
-                {store.resources.name}
+                {store?.selectedResource}
               </Box>
             </Box>
           </Box>
@@ -161,12 +159,16 @@ const TopicDetailView = () => {
 
         {value === 2 && (
           <Box onClick={handlePlayers}>
-            <CourseAccordion expanded={expanded === 'panel1'} onChange={toggleAccordion('panel1')}
+            <CourseAccordion
+              expanded={expanded === 'panel1'}
+              onChange={toggleAccordion('panel1')}
               title={t('CENTER_SESSION.PREREQUISITES')}
               type={ResourcesType.PREREQUSITE}
               resources={getLearningResources(ResourcesType.PREREQUSITE)}
             />
-            <CourseAccordion expanded={expanded === 'panel2'} onChange={toggleAccordion('panel2')}
+            <CourseAccordion
+              expanded={expanded === 'panel2'}
+              onChange={toggleAccordion('panel2')}
               title={t('CENTER_SESSION.POST_REQUISITES')}
               type={ResourcesType.POSTREQUSITE}
               resources={getLearningResources(ResourcesType.POSTREQUSITE)}

diff --git a/src/store/coursePlannerStore.js b/src/store/coursePlannerStore.js
@@ -6,13 +6,16 @@ const useCourseStore = create(
   persist(
     (set) => ({
       resources: '',
+      selectedResource: '',
       subject: '',
       setResources: (newResources) => set(() => ({ resources: newResources })),
+      setSelectedResource: (newSelectedResource) =>
+        set(() => ({ selectedResource: newSelectedResource })),
       setSubject: (newSubject) => set(() => ({ subject: newSubject })),
     }),
     {
       name: 'resources',
-      getStorage: () => localStorage
+      getStorage: () => localStorage,
       // storage: typeof window !== 'undefined' ? localStorage : undefined,
     }
   )