bluerock/speed-flowchart-web
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Feat: show "Today" divider in comps
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Dorian Zedler 2022-09-17 10:38:00 +02:00
parent 108626e488
commit e7d778cda3
Signed by: dorian
GPG key ID: 989DE36109AFA354
1 changed files with 91 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
src/pages/CalendarPage.tsx
View file

@ -3,6 +3,8 @@ import {
Card,
CardActions,
CardContent,
Chip,
Divider,
Grid,
Skeleton,
TextField,
@ -33,16 +35,18 @@ export default function CalendarPage() {
React.useEffect(() => {
api.getCompetitions('GER').then(result => {
competitions.current = result.competitions.filter(competition =>
competition.discipline?.includes('speed'),
competitions.current = result.competitions;
setFilteredCompetitions(
insertTodayIntoCompetitions(filterCompetitions(competitions.current)),
);
setFilteredCompetitions(filterCompetitions(competitions.current));
});
}, []);
React.useEffect(() => {
if (competitions.current.length > 0)
setFilteredCompetitions(filterCompetitions(competitions.current));
setFilteredCompetitions(
insertTodayIntoCompetitions(filterCompetitions(competitions.current)),
);
}, [filter]);
const filterCompetitions = (competitions: Competiton[]) => {
@ -50,10 +54,49 @@ export default function CalendarPage() {
const queryMatches = c.name
.toLowerCase()
.includes(filter?.toLocaleLowerCase() ?? '');
return queryMatches;
const disciplineMatches = c.discipline?.includes('speed');
return queryMatches && disciplineMatches;
});
};
const insertTodayIntoCompetitions = (competitions: Competiton[]) => {
const today = new Date();
const todayString = `${today.getFullYear()}-${
today.getMonth() + 1
}-${today.getDate()}`;
const todayCompetition: Competiton = {
name: 'Today',
date: todayString,
discipline: 'speed',
WetId: 'today',
rkey: '',
comp_name: '',
date_span: '',
cats: [],
categorys: [],
};
const index = competitions.findIndex(c => {
const compDate = new Date(c.date);
return (
compDate.getMonth() >= today.getMonth() &&
compDate.getDate() >= today.getDate()
);
});
if (index === -1) competitions.push(todayCompetition);
else competitions.splice(index, 0, todayCompetition);
console.log(competitions);
console.log(index);
return competitions;
};
const openCompetition = (competitionId: string, categoryId: string) => {
navigate(`/speed-flowchart/${competitionId}/${categoryId}`);
};
@ -69,42 +112,50 @@ export default function CalendarPage() {
fullWidth
/>
</Grid>
{filteredCompetitions?.map(competition => (
<Grid item key={`competition-card-${competition.WetId}`}>
<Card>
<CardContent>
<Typography gutterBottom variant='h5' component='div'>
{competition.name}
</Typography>
<Typography variant='body2' color='text.secondary'>
{competition.date_span}
</Typography>
</CardContent>
<CardActions>
<Grid container spacing={2}>
{competition.cats.map(category => (
<Grid
item
key={`competition-card-${competition.WetId}-category-button-${category.GrpId}`}
xs
>
<Button
size='small'
fullWidth
sx={{ width: '100%' }}
onClick={() =>
openCompetition(competition.WetId, category.GrpId)
}
{filteredCompetitions?.map(competition =>
competition.WetId === 'today' ? (
<Grid item xs={12}>
<Divider>
<Chip label='Today' />
</Divider>
</Grid>
) : (
<Grid item key={`competition-card-${competition.WetId}`}>
<Card>
<CardContent>
<Typography gutterBottom variant='h5' component='div'>
{competition.name}
</Typography>
<Typography variant='body2' color='text.secondary'>
{competition.date_span}
</Typography>
</CardContent>
<CardActions>
<Grid container spacing={2}>
{competition.cats.map(category => (
<Grid
item
key={`competition-card-${competition.WetId}-category-button-${category.GrpId}`}
xs
>
{category.name}
</Button>
</Grid>
))}
</Grid>
</CardActions>
</Card>
</Grid>
))}
<Button
size='small'
fullWidth
sx={{ width: '100%' }}
onClick={() =>
openCompetition(competition.WetId, category.GrpId)
}
>
{category.name}
</Button>
</Grid>
))}
</Grid>
</CardActions>
</Card>
</Grid>
),
)}
{filteredCompetitions === undefined && (
<Grid item xs={12}>
<Card>