Skip to content

Commit

Permalink
Merge pull request #83 from shreyas1434shinde/coursePlaner
Browse files Browse the repository at this point in the history 
Issue #PS-1534 feat: Foundation Course detail view UI implementation
  • Loading branch information
@itsvick
itsvick authored Aug 2, 2024
2 parents 3a4149c + 2e28bf9 commit 5b4acd4
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 88 deletions.
193 changes: 106 additions & 87 deletions src/pages/course-planner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,16 @@ import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useRouter } from 'next/router';
import React from 'react';
import React, { useEffect } from 'react';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import { getCoursePlanner } from '@/services/CoursePlannerService';
import { CoursePlannerData } from '@/utils/Interfaces';

// Define a type for the course planner data

const CoursePlanner = () => {
const [value, setValue] = React.useState(1);
const [subjects, setSubjects] = React.useState([
{ id: 1, subject: 'Mathematics', circular: 10 },
{ id: 2, subject: 'Science', circular: 50 },
{ id: 2, subject: 'History', circular: 30 },
{ id: 2, subject: 'Geography', circular: 60 },
{ id: 2, subject: 'Marathi', circular: 90 },
{ id: 2, subject: 'Hindi', circular: 70 },
{ id: 2, subject: 'Social Science', circular: 80 },
]);
const [subjects, setSubjects] = React.useState<CoursePlannerData[]>([]);
const theme = useTheme<any>();
const { t } = useTranslation();
const router = useRouter();
Expand All @@ -46,11 +42,30 @@ const CoursePlanner = () => {
window.scrollTo({ top: targetY - 70, behavior: 'smooth' });
}
};

const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue);
};

useEffect(() => {
const fetchCoursePlanner = async () => {
try {
const response = await getCoursePlanner();
const transformedData = response.map((item: any) => ({
...item,
id: String(item.id),
}));
setSubjects(transformedData);
} catch (error) {
console.error('Error fetching course planner:', error);
}
};

fetchCoursePlanner();
}, []);

return (
<Box minHeight={'100vh'}>
<Box minHeight="100vh">
<Box>
<Header />
</Box>
Expand All @@ -62,9 +77,9 @@ const CoursePlanner = () => {
color: '#4D4639',
padding: '20px 20px 5px',
}}
width={'100%'}
width="100%"
>
<Typography textAlign={'left'} fontSize={'22px'}>
<Typography textAlign="left" fontSize="22px">
{t('COURSE_PLANNER.COURSE_PLANNER')}
</Typography>
</Box>
Expand Down Expand Up @@ -138,7 +153,6 @@ const CoursePlanner = () => {
aria-label="secondary tabs example"
sx={{
fontSize: '14px',

'& .MuiTab-root': {
color: '#4D4639',
padding: '0 20px',
Expand Down Expand Up @@ -173,108 +187,112 @@ const CoursePlanner = () => {
}}
>
<Grid container>
{subjects.map((item, index) => {
return (
<Grid key={item.id} item xs={12} sm={6} md={4}>
{subjects.map((item) => (
<Grid key={item.id} item xs={12} sm={6} md={4}>
<Box
sx={{
border: `1px solid ${theme.palette.warning.A100}`,
borderRadius: '8px',
padding: '12px',
cursor: 'pointer',
margin: '14px',
}}
onClick={() => {
router.push(`/course-planner-detail`); // Check route
}}
>
<Box
sx={{
border: `1px solid ${theme.palette.warning.A100}`,
borderRadius: '8px',
padding: '12px',
cursor: 'pointer',
margin: '14px',
}}
onClick={() => {
router.push(`/course-planner-detail`); // Check route
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Box>
<Box>
<Box
sx={{
display: 'flex',
gap: '15px',
alignItems: 'center',
}}
>
<Box
sx={{
display: 'flex',
gap: '15px',
alignItems: 'center',
position: 'relative',
display: 'inline-flex',
}}
>
<Box sx={{ width: '40px', height: '40px' }}>
<CircularProgressbar
value={item.circular}
strokeWidth={10}
styles={buildStyles({
pathColor: '#06A816',
trailColor: '#E6E6E6',
strokeLinecap: 'round',
})}
/>
</Box>

<Box
sx={{
position: 'relative',
display: 'inline-flex',
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Box sx={{ width: '40px', height: '40px' }}>
<CircularProgressbar
value={item.circular}
strokeWidth={10}
styles={buildStyles({
pathColor: '#06A816',
trailColor: '#E6E6E6',
strokeLinecap: 'round',
})}
/>
</Box>

<Box
<Typography
variant="caption"
component="div"
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '11px',
color: theme.palette.warning['300'],
fontWeight: '500',
}}
>
<Typography
variant="caption"
component="div"
sx={{
fontSize: '11px',
color: theme.palette.warning['300'],
fontWeight: '500',
}}
>
{item.circular}%
</Typography>
</Box>
{item.circular}%
</Typography>
</Box>
</Box>

<Box
sx={{
fontSize: '16px',
color: theme.palette.warning['300'],
}}
>
{item.subject}
</Box>
<Box
sx={{
fontSize: '16px',
color: theme.palette.warning['300'],
}}
>
{item.subject}
</Box>
</Box>
<Box>
<KeyboardArrowRightIcon
sx={{ color: theme.palette.warning['300'] }}
/>
</Box>
</Box>
<Box>
<KeyboardArrowRightIcon
sx={{ color: theme.palette.warning['300'] }}
/>
</Box>
</Box>
</Grid>
);
})}
</Box>
</Grid>
))}
</Grid>
</Box>
</Box>
)}
{value === 2 && (
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 8 }}>
<Typography variant="h2">No Data Found</Typography>
</Box>
)}
</Box>
</Box>
);
};

export async function getStaticProps({ locale }: any) {
return {
props: {
Expand All @@ -283,4 +301,5 @@ export async function getStaticProps({ locale }: any) {
},
};
}

export default CoursePlanner;
17 changes: 17 additions & 0 deletions src/services/CoursePlannerService.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { CoursePlanner } from '../utils/Interfaces';

export const getCoursePlanner = (): CoursePlanner[] => {
// TODO: Add API call here

const CoursePlannerService: CoursePlanner[] = [
{ id: 1, subject: 'Mathematics', circular: 10 },
{ id: 2, subject: 'Science', circular: 50 },
{ id: 3, subject: 'History', circular: 30 },
{ id: 4, subject: 'Geography', circular: 60 },
{ id: 5, subject: 'Marathi', circular: 90 },
{ id: 6, subject: 'Hindi', circular: 70 },
{ id: 7, subject: 'Social Science', circular: 80 },
];

return CoursePlannerService;
};
18 changes: 17 additions & 1 deletion src/utils/Interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,16 @@ export interface Session {
subtopic?: string;
url?: string;
}

export interface CoursePlanner {
id: number;
subject?: string;
circular?:number;
}
export interface CoursePlanner {
id: number;
subject?: string;
circular?:number
}
export interface SessionCardFooterProps {
item: Session;
}
Expand Down Expand Up @@ -438,3 +447,10 @@ export interface eventFilters {
title?: string;
status?: [];
}


export interface CoursePlannerData {
id: string;
subject: string;
circular: number;
};

0 comments on commit 5b4acd4

Please sign in to comment.