Feat: search for comps and dark mode

src/data/DigitalrockApi.tsx

@@ -14,8 +14,8 @@ interface CompetitionList {
  * A class for dealing with the digitalrock api
  */
 export class DigitalrockAPi {
-  // private BASE_URL = 'https://www.digitalrock.de/egroupware/ranking/json.php?';
+  private BASE_URL = 'https://www.digitalrock.de/egroupware/ranking/json.php?';
-  private BASE_URL = '/test.json?';
+  // private BASE_URL = '/test.json?';
 
   /**
    * function to get competitions

src/index.css

@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.center-children {
+  display: flex;
+  justify-content: center;
+}

src/pages/CalendarPage.tsx

@@ -4,6 +4,7 @@ import {
   CardActions,
   CardContent,
   Grid,
+  Skeleton,
   TextField,
   Typography,
 } from '@mui/material';
@@ -17,21 +18,35 @@ import { Competiton } from '../models/Competition';
  * @return {JSX.Element} calendar page
  */
 export default function CalendarPage() {
-  const [competitions, setCompetitions] = React.useState<Competiton[]>([]);
+  const competitions = React.useRef<Competiton[]>([]);
+  const [filteredCompetitions, setFilteredCompetitions] =
+    React.useState<Competiton[]>();
+  const [filter, setFilter] = React.useState<string>();
+
   const { api } = React.useContext(Context);
   const navigate = useNavigate();
 
   React.useEffect(() => {
     api.getCompetitions('GER').then(result => {
       console.log(result.competitions.filter);
-      setCompetitions(
+      competitions.current = result.competitions.filter(competition =>
-        result.competitions.filter(competition =>
         competition.discipline?.includes('speed'),
-        ),
       );
+      setFilteredCompetitions(filterCompetitions(competitions.current));
     });
   }, []);
 
+  React.useEffect(() => {
+    if (competitions.current.length > 0)
+      setFilteredCompetitions(filterCompetitions(competitions.current));
+  }, [filter]);
+
+  const filterCompetitions = (competitions: Competiton[]) => {
+    return competitions.filter(c =>
+      c.name.toLowerCase().includes(filter?.toLocaleLowerCase() ?? ''),
+    );
+  };
+
   const openCompetition = (competitionId: string, categoryId: string) => {
     navigate(`/speed-flowchart/${competitionId}/${categoryId}`);
   };
@@ -43,10 +58,11 @@ export default function CalendarPage() {
           <TextField
             label='search for competition'
             variant='outlined'
+            onChange={e => setFilter(e.target.value)}
             fullWidth
           />
         </Grid>
-        {competitions.map(competition => (
+        {filteredCompetitions?.map(competition => (
           <Grid item key={`competition-card-${competition.WetId}`} xs={12}>
             <Card>
               <CardContent>
@@ -82,6 +98,24 @@ export default function CalendarPage() {
             </Card>
           </Grid>
         ))}
+        {filteredCompetitions === undefined && (
+          <Grid item xs={12}>
+            <Card>
+              <CardContent>
+                <Skeleton height={50}></Skeleton>
+                <Skeleton></Skeleton>
+              </CardContent>
+              <CardActions>
+                <Skeleton width={200}></Skeleton>
+              </CardActions>
+            </Card>
+          </Grid>
+        )}
+        {filteredCompetitions?.length === 0 && (
+          <Grid item xs={12} className={'center-children'}>
+            Nothing found!
+          </Grid>
+        )}
       </Grid>
     </>
   );

src/utils/Theme.tsx

@@ -18,66 +18,8 @@ export default function Theme(props: { children: JSX.Element }) {
       },
     },
     palette: {
-      mode: 'light',
+      mode: 'dark',
-      primary: {
-        main: '#81a1c1',
-        dark: '#5e81ac',
-        contrastText: '#fff',
     },
-      secondary: {
-        main: '#88c0d0',
-        light: '#8fbcbb',
-        contrastText: '#3b4252',
-      },
-      error: {
-        main: '#bf616a',
-      },
-      warning: {
-        main: '#d08770',
-      },
-      info: {
-        main: '#ebcb8b',
-      },
-      success: {
-        main: '#a3be8c',
-      },
-      text: {
-        primary: '#2e3440',
-        secondary: '#4c566a',
-      },
-      grey: {
-        A200: '#eceff4',
-        A400: '#e5e9f0',
-        A700: '#d8dee9',
-      },
-    },
-    shadows: [
-      'none',
-      'rgba(50, 50, 93, 0.125) 0px 3px 8px -1px,rgba(0, 0, 0, 0.13) 0px 2px 4px -2px;',
-      'rgba(50, 50, 93, 0.125) 0px 2px 5px -1px,rgba(0, 0, 0, 0.13) 0px 1px 3px -1px;',
-      'rgba(50, 50, 93, 0.125) 0px 4px 11px -2px,rgba(0, 0, 0, 0.13) 0px 3px 6px -3px;',
-      'rgba(50, 50, 93, 0.125) 0px 5px 14px -2px,rgba(0, 0, 0, 0.13) 0px 4px 7px -4px;',
-      'rgba(50, 50, 93, 0.125) 0px 6px 17px -3px,rgba(0, 0, 0, 0.13) 0px 5px 9px -5px;',
-      'rgba(50, 50, 93, 0.125) 0px 7px 20px -3px,rgba(0, 0, 0, 0.13) 0px 6px 10px -6px;',
-      'rgba(50, 50, 93, 0.125) 0px 8px 22px -4px,rgba(0, 0, 0, 0.13) 0px 7px 12px -7px;',
-      'rgba(50, 50, 93, 0.125) 0px 8px 24px -5px,rgba(0, 0, 0, 0.13) 0px 8px 13px -7px;',
-      'rgba(50, 50, 93, 0.125) 0px 8px 27px -5px,rgba(0, 0, 0, 0.13) 0px 8px 15px -8px;',
-      'rgba(50, 50, 93, 0.125) 0px 13px 27px -5px,rgba(0, 0, 0, 0.13) 0px 8px 16px -8px;',
-      'rgba(50, 50, 93, 0.125) 0px 25px 35px -5px,rgba(0, 0, 0, 0.13) 0px 15px 20px -12px;',
-      'rgba(50, 50, 93, 0.125) 0px 30px 45px -7px,rgba(0, 0, 0, 0.13) 0px 20px 25px -15px;',
-      'rgba(50, 50, 93, 0.125) 0px 35px 55px -10px,rgba(0, 0, 0, 0.13) 0px 25px 30px -18px;',
-      'rgba(50, 50, 93, 0.125) 0px 40px 65px -12px,rgba(0, 0, 0, 0.13) 0px 30px 35px -21px;',
-      'rgba(50, 50, 93, 0.125) 0px 45px 75px -15px,rgba(0, 0, 0, 0.13) 0px 35px 40px -24px;',
-      'rgba(50, 50, 93, 0.125) 0px 50px 85px -17px,rgba(0, 0, 0, 0.13) 0px 40px 45px -27px;',
-      'rgba(50, 50, 93, 0.125) 0px 55px 95px -20px,rgba(0, 0, 0, 0.13) 0px 45px 50px -30px;',
-      'rgba(50, 50, 93, 0.125) 0px 60px 105px -22px,rgba(0, 0, 0, 0.13) 0px 50px 55px -33px;',
-      'rgba(50, 50, 93, 0.125) 0px 65px 110px -25px,rgba(0, 0, 0, 0.13) 0px 55px 60px -36px;',
-      'rgba(50, 50, 93, 0.125) 0px 70px 115px -27px,rgba(0, 0, 0, 0.13) 0px 60px 65px -39px;',
-      'none',
-      'none',
-      'none',
-      'none',
-    ],
   });
   return (
     <ThemeProvider theme={Theme}>