Skip to content

Commit

Permalink
Merge pull request #342 from Rushikesh-Sonawane99/shiksha-2.0
Browse files Browse the repository at this point in the history 
Issue #PS-1154 feat: Integrated api to display cohorts as per heirarchy for TL and facilitator and created CohortSelectionSection Component
  • Loading branch information
@itsvick
itsvick authored Jul 4, 2024
2 parents 7535787 + dc4c8b2 commit d448f6e
Show file tree
Hide file tree
Showing 5 changed files with 400 additions and 405 deletions.
322 changes: 322 additions & 0 deletions src/components/CohortSelectionSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,322 @@
import { getCohortList } from '@/services/CohortServices';
import React, { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { cohort } from '@/utils/Interfaces';
import {
Box,
FormControl,
MenuItem,
Select,
SelectChangeEvent,
Typography,
} from '@mui/material';
import ReactGA from 'react-ga4';
import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'next-i18next';
import Loader from './Loader';

interface CohortSelectionSectionProps {
classId: string;
setClassId: React.Dispatch<React.SetStateAction<string>>;
userId: string | null;
setUserId: React.Dispatch<React.SetStateAction<string | null>>;
isAuthenticated?: boolean;
setIsAuthenticated?: React.Dispatch<React.SetStateAction<boolean>>;
loading: boolean;
setLoading: React.Dispatch<React.SetStateAction<boolean>>;
cohortsData: Array<cohort>;
setCohortsData: React.Dispatch<React.SetStateAction<Array<cohort>>>;
manipulatedCohortData?: Array<cohort>;
setManipulatedCohortData?: React.Dispatch<React.SetStateAction<Array<cohort>>>;
blockName: string;
isManipulationRequired?: boolean;
setBlockName: React.Dispatch<React.SetStateAction<string>>;
handleSaveHasRun?: boolean;
setHandleSaveHasRun?: React.Dispatch<React.SetStateAction<boolean>>;
isCustomFieldRequired?: boolean;
}


const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
classId,
setClassId,
userId,
setUserId,
isAuthenticated,
setIsAuthenticated,
loading,
setLoading,
cohortsData,
setCohortsData,
manipulatedCohortData,
setManipulatedCohortData,
isManipulationRequired = true,
blockName,
setBlockName,
handleSaveHasRun,
setHandleSaveHasRun,
isCustomFieldRequired = false,
}) => {
const router = useRouter();
const theme = useTheme<any>();
const { t } = useTranslation();

useEffect(() => {
if (typeof window !== 'undefined' && window.localStorage) {
const token = localStorage.getItem('token');
const storedUserId = localStorage.getItem('userId');
setClassId(localStorage.getItem('classId') || '');
if (token) {
setIsAuthenticated?.(true);
} else {
router.push('/login');
}
setUserId(storedUserId);
}
}, [router, setClassId, setIsAuthenticated, setUserId]);

useEffect(() => {
// const userId = localStorage.getItem('userId');
// if (userId) {
// setUserId(userId);
// }
if (userId) {
setLoading(true);
const fetchCohorts = async () => {
try {
const response = await getCohortList(userId, {customField: isCustomFieldRequired.toString()});
console.log('Response:', response);
if (response && response.length > 0) {
if (response[0].type === 'COHORT') {
let filteredData = response
?.map((item: any) => ({
cohortId: item?.cohortId,
parentId: item?.parentId,
name: item?.cohortName || item?.name,
}))
?.filter(Boolean);
setCohortsData(filteredData);
if (filteredData.length > 0) {
if (typeof window !== 'undefined' && window.localStorage) {
const cohort = localStorage.getItem('classId') || '';
if (cohort !== '') {
setClassId(localStorage.getItem('classId') || '');
} else {
localStorage.setItem(
'classId',
filteredData?.[0]?.cohortId
);
setClassId(filteredData?.[0]?.cohortId);
}
}
if(isManipulationRequired){
setManipulatedCohortData?.(
filteredData.concat({ cohortId: 'all', name: 'All Centers' })
);
}else{
setManipulatedCohortData?.(filteredData);
}

}
} else if (response[0].type === 'BLOCK') {
setBlockName(response[0].name || response[0].cohortName);
const filteredData = response[0].childData
?.map((item: any) => ({
cohortId: item?.cohortId,
parentId: item?.parentId,
name: item?.cohortName || item?.name,
}))
?.filter(Boolean);
setCohortsData(filteredData);

if (filteredData.length > 0) {
if (typeof window !== 'undefined' && window.localStorage) {
const cohort = localStorage.getItem('classId') || '';
if (cohort !== '') {
setClassId(localStorage.getItem('classId') || '');
} else {
localStorage.setItem(
'classId',
filteredData?.[0]?.cohortId
);
setClassId(filteredData?.[0]?.cohortId);
}
}
}
setManipulatedCohortData?.(filteredData);
}
}
setLoading(false);
} catch (error) {
console.error('Error fetching cohort list', error);
setLoading(false);
}
};

fetchCohorts();
}
}, [userId, setCohortsData, setLoading, setClassId, setManipulatedCohortData, setBlockName, isCustomFieldRequired]);

const handleCohortSelection = (event: SelectChangeEvent<string>) => {
setClassId(event.target.value as string);
ReactGA.event('cohort-selection-dashboard', {
selectedCohortID: event.target.value,
});
localStorage.setItem('classId', event.target.value);
setHandleSaveHasRun?.(!handleSaveHasRun)


// ---------- set cohortId and stateName-----------
const cohort_id = event.target.value;
localStorage.setItem('cohortId', cohort_id);

const get_state_name: string | null = getStateByCohortId(cohort_id);
if (get_state_name) {
localStorage.setItem('stateName', get_state_name);
} else {
localStorage.setItem('stateName', '');
console.log('NO State For Selected Cohort');
}
function getStateByCohortId(cohortId: any) {
const cohort = cohortsData?.find((item) => item.cohortId === cohortId);
return cohort ? cohort?.state : null;
}
};

return (
<Box>
{loading && <Loader showBackdrop={true} loadingText={t('LOADING')} />}
{!loading && cohortsData && (
<Box>
{loading && <Loader showBackdrop={true} loadingText={t('LOADING')} />}
{!loading && cohortsData && (
<Box>
{blockName ? (
<Box>
<Typography color={theme.palette.warning['300']} textAlign={'left'}>
{blockName}
</Typography>
<Box sx={{ mt: 1 }}>
<Box sx={{ minWidth: 120, gap: '15px' }} display={'flex'}>
{cohortsData?.length > 1 ? (
<FormControl
className="drawer-select"
sx={{ m: 0, width: '100%' }}
>
<Select
value={classId}
onChange={handleCohortSelection}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
className="SelectLanguages fs-14 fw-500 bg-white"
style={{
borderRadius: '0.5rem',
color: theme.palette.warning['200'],
width: '100%',
marginBottom: '0rem',
}}
>
{cohortsData?.length !== 0 ? (
manipulatedCohortData?.map((cohort) => (
<MenuItem
key={cohort.cohortId}
value={cohort.cohortId}
style={{
fontWeight: '500',
fontSize: '14px',
color: '#4D4639',
}}
>
{cohort.name}
</MenuItem>
))
) : (
<Typography
style={{
fontWeight: '500',
fontSize: '14px',
color: '#4D4639',
padding: '0 15px',
}}
>
{t('COMMON.NO_DATA_FOUND')}
</Typography>
)}
</Select>
</FormControl>
) : (
<Typography color={theme.palette.warning['300']}>
{cohortsData[0]?.name}
</Typography>
)}
</Box>
</Box>
</Box>
) : (
<Box>
<Box sx={{ mt: 2 }}>
<Box sx={{ minWidth: 120, gap: '15px' }} display={'flex'}>
{cohortsData?.length > 1 ? (
<FormControl
className="drawer-select"
sx={{ m: 0, width: '100%' }}
>
<Select
value={classId}
onChange={handleCohortSelection}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
className="SelectLanguages fs-14 fw-500 bg-white"
style={{
borderRadius: '0.5rem',
color: theme.palette.warning['200'],
width: '100%',
marginBottom: '0rem',
}}
>
{cohortsData?.length !== 0 ? (
manipulatedCohortData?.map((cohort) => (
<MenuItem
key={cohort.cohortId}
value={cohort.cohortId}
style={{
fontWeight: '500',
fontSize: '14px',
color: '#4D4639',
}}
>
{cohort.name}
</MenuItem>
))
) : (
<Typography
style={{
fontWeight: '500',
fontSize: '14px',
color: '#4D4639',
padding: '0 15px',
}}
>
{t('COMMON.NO_DATA_FOUND')}
</Typography>
)}
</Select>
</FormControl>
) : (
<Typography color={theme.palette.warning['300']}>
{cohortsData[0]?.name}
</Typography>
)}
</Box>
</Box>
</Box>
)}
</Box>
)}
</Box>
)}
</Box>
);
};

export default CohortSelectionSection;
Loading

0 comments on commit d448f6e

Please sign in to comment.