add a demo carpool view

src/components/Carpool.tsx

@@ -0,0 +1,25 @@
+import { ICarpool, IUser } from './types';
+import UISecondaryBox from './UISecondaryBox';
+
+function MemberList({ members }: { members: IUser[] }) {
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column' }}>
+			{members.length > 0
+				? members.map((member) => {
+						return <div key={member.id}>{member.name}</div>;
+				  })
+				: 'This carpool has no members.'}
+		</div>
+	);
+}
+
+export default function Carpool({ carpool }: { carpool: ICarpool }) {
+	return (
+		<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
+			<h2 style={{ textAlign: 'center' }}>{carpool.name}</h2>
+			{carpool.description}
+			<h3>Members</h3>
+			<MemberList members={carpool.members} />
+		</UISecondaryBox>
+	);
+}

src/components/WheelShare.tsx

@@ -1,7 +1,9 @@
 import { CSSProperties } from 'react';
 import logout from './Authentication/logout';
+import Carpool from './Carpool';
 import Events from './Events';
 import Groups from './Groups';
+import { useMe } from './hooks';
 import UIPressable from './UIPressable';
 import UIPrimaryTitle from './UIPrimaryTitle';
 
@@ -16,10 +18,24 @@ const style: CSSProperties = {
 };
 
 export default function WheelShare() {
+	const user = useMe()!;
+
 	return (
 		<div style={style}>
 			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
 
+			<Carpool
+				carpool={{
+					name: 'Carpool',
+					id: 0,
+					description: 'Test carpool',
+					eventId: null,
+					members: [],
+					invitations: [],
+				}}
+			/>
+
+			{user.name}
 			<UIPressable onClick={logout}>Log out</UIPressable>
 
 			<Groups />

src/components/types.ts

@@ -0,0 +1,74 @@
+/**
+ * Model User
+ */
+
+export type IUser = {
+	id: number;
+	email: string;
+	name: string | null;
+};
+
+/**
+ * Model Invitation
+ */
+
+export type IInvitation = {
+	userId: number;
+	carpoolId: number;
+	isRequest: boolean;
+	sentTime: Date;
+};
+
+/**
+ * Model Carpool
+ */
+
+export type ICarpool = {
+	id: number;
+	name: string;
+	description: string;
+	eventId: number | null;
+	event?: IEvent;
+	members: IUser[];
+	invitations: IInvitation[];
+};
+
+/**
+ * Model Group
+ */
+
+export type IGroup = {
+	id: number;
+	name: string;
+};
+
+/**
+ * Model Event
+ */
+
+export type IEvent = {
+	id: number;
+	name: string;
+	groupId: number;
+	startTime: Date;
+	duration: number;
+	endTime: Date | null;
+	daysOfWeek: number;
+	placeId: string;
+	formattedAddress: string;
+	latitude: number;
+	longitude: number;
+};
+
+/**
+ * Model EventSignup
+ */
+
+export type IEventSignup = {
+	eventId: number;
+	userId: number;
+	placeId: string | null;
+	formattedAddress: string | null;
+	latitude: number | null;
+	longitude: number | null;
+};