Feat: dynamic title

2022-07-28 19:39:06 +02:00 · 2022-07-28 19:39:06 +02:00 · 79399032d6
parent 1f99528511
commit 79399032d6
13 changed files with 108 additions and 29 deletions
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -7,7 +7,7 @@
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
-      content="Web site created using create-react-app"
+      content="Web site to view flowcharts of german speedclimbing competitions"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
@ -24,7 +24,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
+    <title>blueROCK speed-flowchart</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -0,0 +1,35 @@
+import {
+  AppBar,
+  Toolbar,
+  Stepper,
+  Step,
+  Box,
+  Container,
+  StepButton,
+  Typography,
+} from '@mui/material';
+import { useContext, useEffect, useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+
+import '../css/Header.css';
+import { Context } from '../data/Context';
+
+/**
+ * Creates a Header Component that displays the reservation steps
+ * @return {JSX.Element}
+ */
+export default function Header() {
+  const { title } = useContext(Context);
+  return (
+    <AppBar position='sticky'>
+      <Container maxWidth='lg'>
+        <Toolbar className='header-container'>
+          <Link to='/' style={{ textDecoration: 'none', color: 'inherit' }}>
+            <img src='/logo192.png' className='header-icon'></img>
+          </Link>
+          <Typography variant='h6'>{title}</Typography>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
--- a/src/css/Header.css
+++ b/src/css/Header.css
@ -0,0 +1,9 @@
+.header-container {
+  gap: 40px;
+  flex-direction: row;
+}
+
+.header-icon {
+  height: 50px;
+  display: block;
+}
--- a/src/data/Context.tsx
+++ b/src/data/Context.tsx
@ -7,6 +7,14 @@ import { DigitalrockAPi } from './DigitalrockApi';
 */
 export const Context = createContext<{
  api: DigitalrockAPi;
+
+  title: string;
+  setTitle: (title: string) => void;
 }>({
  api: new DigitalrockAPi(),
+
+  title: '',
+  setTitle: () => {
+    return;
+  },
 });
--- a/src/models/Competition.tsx
+++ b/src/models/Competition.tsx
@ -5,9 +5,12 @@ export interface Competiton {
  WetId: string;
  rkey: string;
  name: string;
+  comp_name: string;
  date_span: string;
  discipline?: string;
  cats: Category[];
+  categorys: Category[];
+  date: string;
 }

 export interface RouteNames {
--- a/src/pages/CalendarPage.tsx
+++ b/src/pages/CalendarPage.tsx
@ -23,9 +23,13 @@ export default function CalendarPage() {
    React.useState<Competiton[]>();
  const [filter, setFilter] = React.useState<string>();

-  const { api } = React.useContext(Context);
+  const { api, setTitle } = React.useContext(Context);
  const navigate = useNavigate();

+  React.useEffect(() => {
+    setTitle('DAV calendar');
+  }, []);
+
  React.useEffect(() => {
    api.getCompetitions('GER').then(result => {
      console.log(result.competitions.filter);
@ -42,9 +46,14 @@ export default function CalendarPage() {
  }, [filter]);

  const filterCompetitions = (competitions: Competiton[]) => {
-    return competitions.filter(c =>
-      c.name.toLowerCase().includes(filter?.toLocaleLowerCase() ?? ''),
-    );
+    return competitions.filter(c => {
+      const queryMatches = c.name
+        .toLowerCase()
+        .includes(filter?.toLocaleLowerCase() ?? '');
+      const date = new Date(c.date).getTime();
+      const currentDate = new Date().getTime();
+      return queryMatches && currentDate - date > 24 * 60 * 60 * 1000;
+    });
  };

  const openCompetition = (competitionId: string, categoryId: string) => {
--- a/src/pages/SpeedFlowchartPage.tsx
+++ b/src/pages/SpeedFlowchartPage.tsx
@ -13,7 +13,7 @@ import { Card, CardContent, Grid, Typography } from '@mui/material';
 */
 export default function SpeedFlowchartPage() {
  const { competitionId, categoryId } = useParams();
-  const { api } = useContext(Context);
+  const { api, setTitle } = useContext(Context);

  const [flowchartResult, setFlowchartResult] =
    useState<SpeedFlowchartResult>();
@ -24,6 +24,11 @@ export default function SpeedFlowchartPage() {
    }

    api.getCompetitionResults(competitionId, categoryId).then(r => {
+      setTitle(
+        `${r.comp_name} - ${
+          r.categorys.filter(cat => cat.GrpId === categoryId)[0].name
+        }`,
+      );
      const flowchartResult = convertResultsToSpeedFlowchartResult(r);
      console.log(flowchartResult);
      setFlowchartResult(flowchartResult);
@ -32,7 +37,6 @@ export default function SpeedFlowchartPage() {

  return (
    <>
-      <h1>RESULT:</h1>
      <Grid container spacing={2}>
        {flowchartResult?.rounds.map((round, roundKey) => (
          <Grid key={`flowchart-column-${roundKey}`} item xs={12 / 5}>
--- a/src/utils/ContextWrapper.tsx
+++ b/src/utils/ContextWrapper.tsx
@ -1,3 +1,4 @@
+import React from 'react';
 import { Context } from '../data/Context';
 import { DigitalrockAPi } from '../data/DigitalrockApi';

@ -10,6 +11,11 @@ export default function ContextWrapper(props: { children: JSX.Element }) {
  const { children } = props;

  const api = new DigitalrockAPi();
+  const [title, setTitle] = React.useState('');

-  return <Context.Provider value={{ api }}>{children}</Context.Provider>;
+  return (
+    <Context.Provider value={{ api, title, setTitle }}>
+      {children}
+    </Context.Provider>
+  );
 }
--- a/src/utils/PageTemplate.tsx
+++ b/src/utils/PageTemplate.tsx
@ -11,16 +11,14 @@ export default function PageTemplate(props: { children: JSX.Element }) {
  const { children } = props;

  return (
-    <ContextWrapper>
-      <LocalizationProviderWrapper>
-        <Container
-          sx={{ marginTop: '50px' }}
-          className='root-container'
-          maxWidth='lg'
-        >
-          {children}
-        </Container>
-      </LocalizationProviderWrapper>
-    </ContextWrapper>
+    <LocalizationProviderWrapper>
+      <Container
+        sx={{ marginTop: '16px' }}
+        className='root-container'
+        maxWidth='lg'
+      >
+        {children}
+      </Container>
+    </LocalizationProviderWrapper>
  );
 }
--- a/src/utils/Routing.tsx
+++ b/src/utils/Routing.tsx
@ -1,6 +1,8 @@
 import { Routes, Route, HashRouter } from 'react-router-dom';
+import Header from '../components/Header';
 import CalendarPage from '../pages/CalendarPage';
 import SpeedFlowchartPage from '../pages/SpeedFlowchartPage';
+import ContextWrapper from './ContextWrapper';
 import PageTemplate from './PageTemplate';

 /**
@ -10,15 +12,20 @@ import PageTemplate from './PageTemplate';
 export default function Routing() {
  return (
    <HashRouter>
-      <PageTemplate>
-        <Routes>
-          <Route path='/' element={<CalendarPage />} />
-          <Route
-            path='/speed-flowchart/:competitionId/:categoryId'
-            element={<SpeedFlowchartPage />}
-          ></Route>
-        </Routes>
-      </PageTemplate>
+      <ContextWrapper>
+        <>
+          <Header />
+          <PageTemplate>
+            <Routes>
+              <Route path='/' element={<CalendarPage />} />
+              <Route
+                path='/speed-flowchart/:competitionId/:categoryId'
+                element={<SpeedFlowchartPage />}
+              ></Route>
+            </Routes>
+          </PageTemplate>
+        </>
+      </ContextWrapper>
    </HashRouter>
  );
 }