Feat: show "Today" divider in comps

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
           />
         </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>