Handle query parameters

1 files changed, 77 insertions, 0 deletions

diff --git a/modern/src/EventPage.js b/modern/src/EventPage.js
new file mode 100644
index 00000000..48c6d807
--- /dev/null
+++ b/modern/src/EventPage.js
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+
+import {
+  makeStyles, Typography, AppBar, Toolbar, IconButton,
+} from '@material-ui/core';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import { useHistory, useParams } from 'react-router-dom';
+import { useEffectAsync } from './reactHelper';
+import { useTranslation } from './LocalizationProvider';
+import ContainerDimensions from 'react-container-dimensions';
+import Map from './map/Map';
+import PositionsMap from './map/PositionsMap';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  mapContainer: {
+    flexGrow: 1,
+  },
+}));
+
+const EventPage = () => {
+  const classes = useStyles();
+  const history = useHistory();
+  const t = useTranslation();
+
+  const { id } = useParams();
+
+  const [event, setEvent] = useState();
+  const [position, setPosition] = useState();
+
+  useEffectAsync(async () => {
+    if (id) {
+      const response = await fetch(`/api/events/${id}`);
+      if (response.ok) {
+        setEvent(await response.json());
+      }
+    }
+  }, [id]);
+
+  useEffectAsync(async () => {
+    if (event && event.positionId) {
+      const response = await fetch(`/api/positions?id=${event.positionId}`);
+      if (response.ok) {
+        const positions = await response.json();
+        if (positions.length > 0) {
+          setPosition(positions[0]);
+        }
+      }
+    }
+  }, [event]);
+
+  return (
+    <div className={classes.root}>
+      <AppBar color="inherit" position="static">
+        <Toolbar>
+          <IconButton color="inherit" edge="start" onClick={() => history.push('/')}>
+            <ArrowBackIcon />
+          </IconButton>
+          <Typography variant="h6">{t('positionEvent')}</Typography>
+        </Toolbar>
+      </AppBar>
+      <div className={classes.mapContainer}>
+        <ContainerDimensions>
+          <Map>
+            {position && <PositionsMap positions={[position]} />}
+          </Map>
+        </ContainerDimensions>
+      </div>
+    </div>
+  );
+};
+
+export default EventPage;