From 1f99528511865ce54ecf29acc9dd9a4b38c4f650 Mon Sep 17 00:00:00 2001 From: Dorian Zedler Date: Thu, 28 Jul 2022 18:59:28 +0200 Subject: [PATCH] Feat: search for comps and dark mode --- src/data/DigitalrockApi.tsx | 4 +-- src/index.css | 5 ++++ src/pages/CalendarPage.tsx | 46 ++++++++++++++++++++++++---- src/utils/Theme.tsx | 60 +------------------------------------ 4 files changed, 48 insertions(+), 67 deletions(-) diff --git a/src/data/DigitalrockApi.tsx b/src/data/DigitalrockApi.tsx index c10fd36..2738e2d 100644 --- a/src/data/DigitalrockApi.tsx +++ b/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 = '/test.json?'; + private BASE_URL = 'https://www.digitalrock.de/egroupware/ranking/json.php?'; + // private BASE_URL = '/test.json?'; /** * function to get competitions diff --git a/src/index.css b/src/index.css index ec2585e..4f4638d 100644 --- a/src/index.css +++ b/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; +} diff --git a/src/pages/CalendarPage.tsx b/src/pages/CalendarPage.tsx index 507c6fc..18127b3 100644 --- a/src/pages/CalendarPage.tsx +++ b/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([]); + const competitions = React.useRef([]); + const [filteredCompetitions, setFilteredCompetitions] = + React.useState(); + const [filter, setFilter] = React.useState(); + const { api } = React.useContext(Context); const navigate = useNavigate(); React.useEffect(() => { api.getCompetitions('GER').then(result => { console.log(result.competitions.filter); - setCompetitions( - result.competitions.filter(competition => - competition.discipline?.includes('speed'), - ), + competitions.current = 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() { setFilter(e.target.value)} fullWidth /> - {competitions.map(competition => ( + {filteredCompetitions?.map(competition => ( @@ -82,6 +98,24 @@ export default function CalendarPage() { ))} + {filteredCompetitions === undefined && ( + + + + + + + + + + + + )} + {filteredCompetitions?.length === 0 && ( + + Nothing found! + + )} ); diff --git a/src/utils/Theme.tsx b/src/utils/Theme.tsx index 07e9441..bfe42f8 100644 --- a/src/utils/Theme.tsx +++ b/src/utils/Theme.tsx @@ -18,66 +18,8 @@ export default function Theme(props: { children: JSX.Element }) { }, }, palette: { - mode: 'light', - 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', - }, + mode: 'dark', }, - 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 (