From fcb4205dded5e02ada2ea910528004a38277763b Mon Sep 17 00:00:00 2001
From: vivek kasture <vivek_kasture@techjoomla.com>
Date: Wed, 25 Sep 2024 14:24:20 +0530
Subject: [PATCH] Issue #PS-000 fix: Fixed UT issues

---
 src/pages/course-planner.tsx | 156 +++++++++++++++++++----------------
 1 file changed, 85 insertions(+), 71 deletions(-)

diff --git a/src/pages/course-planner.tsx b/src/pages/course-planner.tsx
index 9e12459a..80845f5f 100644
--- a/src/pages/course-planner.tsx
+++ b/src/pages/course-planner.tsx
@@ -1,18 +1,26 @@
 import Header from '@/components/Header';
+import { getCohortSearch } from '@/services/CohortServices';
+import coursePlannerStore from '@/store/coursePlannerStore';
+import useStore from '@/store/store';
+import taxonomyStore from '@/store/taxonomyStore';
+import { CoursePlannerConstants } from '@/utils/app.constant';
+import {
+  filterAndMapAssociationsNew,
+  findCommonAssociations,
+  getAssociationsByCodeNew,
+  getOptionsByCategory,
+  toPascalCase,
+} from '@/utils/Helper';
+import withAccessControl from '@/utils/hoc/withAccessControl';
+import { CoursePlannerData, ICohort } from '@/utils/Interfaces';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import SearchIcon from '@mui/icons-material/Search';
 import {
   Box,
   FormControl,
   Grid,
-  IconButton,
-  InputBase,
   InputLabel,
   MenuItem,
-  Paper,
   Select,
-  Tab,
-  Tabs,
   Typography,
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
@@ -20,25 +28,8 @@ import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
-import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
-import { getCoursePlanner } from '@/services/CoursePlannerService';
-import { CoursePlannerData } from '@/utils/Interfaces';
-import useCourseStore from '@/store/coursePlannerStore';
-import { getCohortSearch } from '@/services/CohortServices';
-import { CoursePlannerConstants } from '@/utils/app.constant';
-import useStore from '@/store/store';
 import { accessControl, frameworkId } from '../../app.config';
-import withAccessControl from '@/utils/hoc/withAccessControl';
-import NoDataFound from '@/components/common/NoDataFound';
-import taxonomyStore from '@/store/taxonomyStore';
-import coursePlannerStore from '@/store/coursePlannerStore';
-import {
-  filterAndMapAssociationsNew,
-  findCommonAssociations,
-  getAssociationsByCodeNew,
-  getOptionsByCategory,
-  toPascalCase,
-} from '@/utils/Helper';
+import CohortSelectionSection from '@/components/CohortSelectionSection';
 
 const CoursePlanner = () => {
   const [value, setValue] = React.useState('');
@@ -71,13 +62,20 @@ const CoursePlanner = () => {
   const [stateOption, setStateOption] = useState<any[]>([]);
   const [stateAssociations, setStateAssociations] = useState<any[]>([]);
   const setTaxonomySubject = taxonomyStore((state) => state.setTaxonomySubject);
+  const [classId, setClassId] = useState('');
+  const [userId, setUserId] = useState<string | null>(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [cohortsData, setCohortsData] = useState<Array<ICohort>>([]);
+  const [manipulatedCohortData, setManipulatedCohortData] =
+    useState<Array<ICohort>>(cohortsData);
 
   const handleChange = (event: any) => {
     setValue(event.target.value);
     setType(event.target.value);
   };
 
-
   const addQueryParams = (newParams: any) => {
     // Merge existing query params with new ones
     const updatedQuery = { ...router.query, ...newParams };
@@ -98,6 +96,13 @@ const CoursePlanner = () => {
     addQueryParams({ center: event.target.value });
   };
 
+  useEffect(() => {
+    if (classId) {
+      setSelectedValue(classId);
+      addQueryParams({ center: classId });
+    }
+  }, [classId]);
+
   useEffect(() => {
     const subjects = localStorage.getItem('overallCommonSubjects');
     if (subjects) {
@@ -105,10 +110,10 @@ const CoursePlanner = () => {
         const parsedData = JSON.parse(subjects);
         setSubjects(parsedData);
       } catch (error) {
-        console.error("Failed to parse subjects from localStorage:", error);
+        console.error('Failed to parse subjects from localStorage:', error);
       }
     } else {
-      console.log("No subjects found in localStorage.");
+      console.log('No subjects found in localStorage.');
       setSubjects([]);
     }
   }, []);
@@ -459,7 +464,10 @@ const CoursePlanner = () => {
             const overallCommonSubjects =
               await findOverallCommonSubjects(arrays);
 
-            localStorage.setItem('overallCommonSubjects', JSON.stringify(overallCommonSubjects));
+            localStorage.setItem(
+              'overallCommonSubjects',
+              JSON.stringify(overallCommonSubjects)
+            );
             setSubjects(overallCommonSubjects);
           }
         }
@@ -491,7 +499,7 @@ const CoursePlanner = () => {
         </Typography>
       </Box>
 
-      <Grid sx={{ display: 'flex', alignItems: 'center' }} container>
+      {/* <Grid sx={{ display: 'flex', alignItems: 'center' }} container>
         <Grid item md={6} xs={12}>
           <Box sx={{ mt: 2, px: '20px' }}>
             <Box sx={{ flexBasis: '70%' }}>
@@ -534,52 +542,58 @@ const CoursePlanner = () => {
             </Box>
           </Box>
         </Grid>
-        <Grid item md={6} xs={12}>
-          {/* <Box sx={{ mt: 2, px: '20px' }}>
-          <Paper
-            component="form"
-            className="100"
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              borderRadius: '100px',
-              background: theme.palette.warning.A700,
-              boxShadow: 'none',
-            }}
-          >
-            <InputBase
-              sx={{ ml: 3, flex: 1, mb: '0', fontSize: '14px' }}
-              placeholder="Search.."
-              inputProps={{ 'aria-label': 'search student' }}
-            />
-            <IconButton type="button" sx={{ p: '10px' }} aria-label="search">
-              <SearchIcon />
-            </IconButton>
-          </Paper>
-        </Box> */}
+      </Grid> */}
+
+      <Grid container>
+        <Grid item xs={12} md={6}>
+          <Box sx={{ mt: 2, px: '20px', width: '100%' }}>
+            <Box className="w-100 d-md-flex">
+              <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}
+                isCustomFieldRequired={true}
+                showFloatingLabel={true}
+                showDisabledDropDown={true}
+              />
+            </Box>
+          </Box>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <Box sx={{ mt: 2, px: '20px', width: '100%' }}>
+            <FormControl sx={{ width: '100%' }}>
+              <InputLabel id="course-type-select-label">Course Type</InputLabel>
+              <Select
+                labelId="course-type-select-label"
+                id="course-type-select"
+                value={tStore?.type}
+                onChange={handleChange}
+                label="Course Type"
+                sx={{ fontSize: '14px' }}
+              >
+                <MenuItem value={'Foundation Course'}>
+                  {t('COURSE_PLANNER.FOUNDATION_COURSE')}
+                </MenuItem>
+                <MenuItem value={'Main Course'}>
+                  {t('COURSE_PLANNER.MAIN_COURSE')}
+                </MenuItem>
+              </Select>
+            </FormControl>
+          </Box>
         </Grid>
       </Grid>
 
       <Box sx={{ m: 3 }}>
-        <FormControl sx={{ width: '100%' }}>
-          <InputLabel id="course-type-select-label">Course Type</InputLabel>
-          <Select
-            labelId="course-type-select-label"
-            id="course-type-select"
-            value={tStore?.type}
-            onChange={handleChange}
-            label="Course Type"
-            sx={{ fontSize: '14px' }}
-          >
-            <MenuItem value={'Foundation Course'}>
-              {t('COURSE_PLANNER.FOUNDATION_COURSE')}
-            </MenuItem>
-            <MenuItem value={'Main Course'}>
-              {t('COURSE_PLANNER.MAIN_COURSE')}
-            </MenuItem>
-          </Select>
-        </FormControl>
-
         <Box sx={{ mt: 2 }}>
           <Box
             sx={{