Add Event page

src/components/App.tsx

@@ -5,7 +5,8 @@ import WheelShare from './WheelShare';
 import WheelShareLoggedOut from './WheelShareLoggedOut';
 
 const Authenticator = lazy(() => import('./Authentication/Authenticator'));
-const Carpool = lazy(() => import('./Carpool/Carpool'));
+const CarpoolPage = lazy(() => import('./Carpool/CarpoolPage'));
+const EventPage = lazy(() => import('./Event/EventPage'));
 const Group = lazy(() => import('./Group'));
 
 const style: CSSProperties = {
@@ -36,7 +37,8 @@ export default function App() {
 								component={Authenticator}
 								path="/auth/:provider/callback"
 							/>
-							<Route path="/carpools/:id" component={Carpool} />
+							<Route path="/carpools/:id" component={CarpoolPage} />
+							<Route path="/events/:id" component={EventPage} />
 						</Suspense>
 					</Switch>
 				</BrowserRouter>

src/components/Carpool/Carpool.tsx

@@ -1,10 +1,8 @@
 import MailOutlineIcon from '@material-ui/icons/MailOutline';
 import PersonAddIcon from '@material-ui/icons/PersonAdd';
 import { createContext, useCallback, useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
 import { cancelCarpoolInvite, getCarpool, sendCarpoolInvite } from '../api';
 import { lightgrey } from '../colors';
-import Header from '../Header/Header';
 import { ICarpool } from '../types';
 import UIButton from '../UI/UIButton';
 import UISecondaryBox from '../UI/UISecondaryBox';
@@ -23,8 +21,7 @@ export const CarpoolContext = createContext({
 	},
 });
 
-export default function Carpool() {
+export default function Carpool({ id }: { id: number }) {
-	const id = +useParams<{ id: string }>().id;
 	const [carpool, setCarpool] = useState<ICarpool | null>(null);
 
 	useEffect(() => {
@@ -84,7 +81,6 @@ export default function Carpool() {
 
 	return (
 		<CarpoolContext.Provider value={{ carpool, sendInvite, cancelInvite }}>
-			<Header />
 			<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
 				{carpool ? (
 					<>

src/components/Carpool/CarpoolPage.tsx

@@ -0,0 +1,14 @@
+import { useParams } from 'react-router-dom';
+import Header from '../Header/Header';
+import Carpool from './Carpool';
+
+export default function CarpoolPage() {
+	const id = +useParams<{ id: string }>().id;
+
+	return (
+		<>
+			<Header />
+			<Carpool id={id} />
+		</>
+	);
+}

src/components/Event/EventPage.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { getEvent } from '../api';
+import Header from '../Header/Header';
+import { IEvent } from '../types';
+import Event from './Event';
+
+export default function EventPage() {
+	const id = +useParams<{ id: string }>().id;
+	const [event, setEvent] = useState<IEvent | null>(null);
+
+	useEffect(() => {
+		getEvent(id).then(setEvent);
+	}, [id]);
+
+	return (
+		<>
+			<Header />
+			{event ? <Event event={event} /> : <span>Loading...</span>}
+		</>
+	);
+}

src/components/api.ts

@@ -1,5 +1,5 @@
 import { GroupPreview } from './GroupJoinerLink';
-import { IInvitation, IEventSignup, ICarpool } from './types';
+import { IInvitation, IEventSignup, ICarpool, IEvent } from './types';
 
 const base = process.env.REACT_APP_API_DOMAIN + 'api';
 
@@ -86,10 +86,14 @@ export async function createEvent({
 	};
 }
 
-export async function getEvents() {
+export async function getEvents(): Promise<IEvent[]> {
 	return await get('/events');
 }
 
+export async function getEvent(id: number): Promise<IEvent> {
+	return await get('/events/' + id);
+}
+
 export async function getGroup(id: number) {
 	return await get('/groups/' + id);
 }