member list carpools

src/components/Carpool/Carpool.tsx

@@ -1,51 +1,87 @@
-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 { IUser } from '../types';
 import UISecondaryBox from '../UI/UISecondaryBox';
 import MemberList from './MemberList';
 
-const dummyMemberData: IUser[] = [
+export default function Carpool() {
+	const id = +useParams<{ id: string }>().id;
+	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: [
 			{
 				id: 0,
-		email: 'joshua12696@gmail.com',
 				name: 'Joshua Hsueh',
 			},
 			{
 				id: 1,
-		email: 'myfatemi04@gmail.com',
 				name: 'Michael Fatemi',
 			},
 			{
 				id: 2,
-		email: 'thegoat@gmail.com',
 				name: 'Tom Brady',
 			},
 			{
 				id: 3,
-		email: 'bobbyshmurda@gmail.com',
 				name: 'Bob the Builder',
 			},
-];
+		],
+		invitations: [],
+	});
 
-export default function Carpool() {
+	// useEffect(() => {
-	const id = +useParams<{ id: string }>().id;
+	// 	getCarpool(id).then(setCarpool);
-	const [carpool, setCarpool] = useState<ICarpool | null>(null);
+	// }, [id]);
 
-	useEffect(() => {
+	const { event, name } = carpool!;
-		getCarpool(id).then(setCarpool);
-	}, [id]);
 
 	return (
 		<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
-			<MemberList members={dummyMemberData} />
+			{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/Carpool/MemberList.tsx

@@ -1,7 +1,13 @@
-import { IUser } from '../types';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 
-export default function MemberList({ members }: { members: IUser[] }) {
+export default function MemberList({
+	members,
+}: {
+	members: {
+		id: number;
+		name: string;
+	}[];
+}) {
 	return (
 		<div className="MemberList">
 			<div style={{ display: 'flex', flexDirection: 'column' }}>

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;