From e7d778cda332896e46ea3231b3e3a0243943ad98 Mon Sep 17 00:00:00 2001 From: Dorian Zedler Date: Sat, 17 Sep 2022 10:38:00 +0200 Subject: [PATCH] Feat: show "Today" divider in comps --- src/pages/CalendarPage.tsx | 131 ++++++++++++++++++++++++++----------- 1 file changed, 91 insertions(+), 40 deletions(-) diff --git a/src/pages/CalendarPage.tsx b/src/pages/CalendarPage.tsx index 238b2ee..df223cd 100644 --- a/src/pages/CalendarPage.tsx +++ b/src/pages/CalendarPage.tsx @@ -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 /> - {filteredCompetitions?.map(competition => ( - - - - - {competition.name} - - - {competition.date_span} - - - - - {competition.cats.map(category => ( - - - - ))} - - - - - ))} + + + ))} + + + + + ), + )} {filteredCompetitions === undefined && (