Issue #PS-000 fix: Fixed UT issues

src/pages/course-planner.tsx

@@ -1,44 +1,35 @@
 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';
 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,17 +96,24 @@ const CoursePlanner = () => {
  addQueryParams({ center: event.target.value });
  };
 
+ useEffect(() => {
+ if (classId) {
+ setSelectedValue(classId);
+ addQueryParams({ center: classId });
+ }
+ }, [classId]);
+
  useEffect(() => {
  const subjects = localStorage.getItem('overallCommonSubjects');
  if (subjects) {
  try {
  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={{