create carpool base component

src/components/Carpool/Carpool.tsx

@@ -1,6 +1,8 @@
-import { useEffect, useState } from 'react';
+import EventIcon from '@material-ui/icons/Event';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { getCarpool } from '../api';
 import { ICarpool } from '../types';
 import UISecondaryBox from '../UI/UISecondaryBox';
 
@@ -18,21 +20,61 @@ function MemberList({ members }: { members: ICarpool['members'] }) {
 
 export default function Carpool() {
 	const id = +useParams<{ id: string }>().id;
-	const [carpool, setCarpool] = useState<ICarpool | null>(null);
+	const [carpool, setCarpool] = useState<ICarpool | null>({
+		id,
+		name: 'carpoollo2398',
+		eventId: 0,
+		event: {
+			id: 0,
+			name: 'test event',
+			latitude: 0,
+			longitude: 0,
+			formattedAddress: 'your house',
+			placeId: 'secret',
+		},
+		members: [],
+		invitations: [],
+	});
 
-	useEffect(() => {
+	// useEffect(() => {
-		getCarpool(id).then(setCarpool);
+	// 	getCarpool(id).then(setCarpool);
-	}, [id]);
+	// }, [id]);
+
+	const { event, name } = carpool!;
 
 	return (
 		<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
-			{carpool && (
+			{carpool ? (
 				<>
-					<h2 style={{ textAlign: 'center' }}>{carpool.name}</h2>
+					<h1>{name}</h1>
-					{carpool.description}
+					<h2>{event.name}</h2>
+					<div style={{ fontSize: '1.5rem', fontWeight: 600 }}>
+						<div
+							style={{
+								color: '#303030',
+								display: 'flex',
+								alignItems: 'center',
+							}}
+						>
+							<LocationOnIcon style={{ marginRight: '1rem' }} />
+							{event.formattedAddress}
+						</div>
+						<div
+							style={{
+								color: '#303030',
+								display: 'flex',
+								alignItems: 'center',
+							}}
+						>
+							<EventIcon style={{ marginRight: '1rem' }} />
+							DAWN - DUSK
+						</div>
+					</div>
 					<h3>Members</h3>
 					<MemberList members={carpool.members} />
 				</>
+			) : (
+				<h2>Loading</h2>
 			)}
 		</UISecondaryBox>
 	);

src/components/types.ts

@@ -15,9 +15,20 @@ export type IUser = {
 export type ICarpool = {
 	id: number;
 	name: string;
-	description: string;
 	eventId: number | null;
-	event?: IEvent;
+	event: {
+		id: number;
+		name: string;
+		formattedAddress: string;
+		latitude: number;
+		longitude: number;
+		placeId: string;
+	};
+	// driverId: number | null;
+	// driver: {
+	// 	id: number;
+	// 	name: string;
+	// };
 	members: {
 		id: number;
 		name: string;