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

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

View file

@ -3,6 +3,8 @@ import {
Card, Card,
CardActions, CardActions,
CardContent, CardContent,
Chip,
Divider,
Grid, Grid,
Skeleton, Skeleton,
TextField, TextField,
@ -33,16 +35,18 @@ export default function CalendarPage() {
React.useEffect(() => { React.useEffect(() => {
api.getCompetitions('GER').then(result => { api.getCompetitions('GER').then(result => {
competitions.current = result.competitions.filter(competition => competitions.current = result.competitions;
competition.discipline?.includes('speed'), setFilteredCompetitions(
insertTodayIntoCompetitions(filterCompetitions(competitions.current)),
); );
setFilteredCompetitions(filterCompetitions(competitions.current));
}); });
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (competitions.current.length > 0) if (competitions.current.length > 0)
setFilteredCompetitions(filterCompetitions(competitions.current)); setFilteredCompetitions(
insertTodayIntoCompetitions(filterCompetitions(competitions.current)),
);
}, [filter]); }, [filter]);
const filterCompetitions = (competitions: Competiton[]) => { const filterCompetitions = (competitions: Competiton[]) => {
@ -50,10 +54,49 @@ export default function CalendarPage() {
const queryMatches = c.name const queryMatches = c.name
.toLowerCase() .toLowerCase()
.includes(filter?.toLocaleLowerCase() ?? ''); .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) => { const openCompetition = (competitionId: string, categoryId: string) => {
navigate(`/speed-flowchart/${competitionId}/${categoryId}`); navigate(`/speed-flowchart/${competitionId}/${categoryId}`);
}; };
@ -69,7 +112,14 @@ export default function CalendarPage() {
fullWidth fullWidth
/> />
</Grid> </Grid>
{filteredCompetitions?.map(competition => ( {filteredCompetitions?.map(competition =>
competition.WetId === 'today' ? (
<Grid item xs={12}>
<Divider>
<Chip label='Today' />
</Divider>
</Grid>
) : (
<Grid item key={`competition-card-${competition.WetId}`}> <Grid item key={`competition-card-${competition.WetId}`}>
<Card> <Card>
<CardContent> <CardContent>
@ -104,7 +154,8 @@ export default function CalendarPage() {
</CardActions> </CardActions>
</Card> </Card>
</Grid> </Grid>
))} ),
)}
{filteredCompetitions === undefined && ( {filteredCompetitions === undefined && (
<Grid item xs={12}> <Grid item xs={12}>
<Card> <Card>