From 4fedad105809da8eb5f5b2fbd2757307902bea16 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Mon, 12 Jul 2021 22:15:11 -0400
Subject: [PATCH] create carpool base component
---
src/components/Carpool/Carpool.tsx | 60 +++++++++++++++++++++++++-----
src/components/types.ts | 15 +++++++-
2 files changed, 64 insertions(+), 11 deletions(-)
diff --git a/src/components/Carpool/Carpool.tsx b/src/components/Carpool/Carpool.tsx
index 9306db6..2a68b24 100644
--- a/src/components/Carpool/Carpool.tsx
+++ b/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(() => {
- getCarpool(id).then(setCarpool);
- }, [id]);
+ // useEffect(() => {
+ // getCarpool(id).then(setCarpool);
+ // }, [id]);
+
+ const { event, name } = carpool!;
return (
<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
- {carpool && (
+ {carpool ? (
<>
- <h2 style={{ textAlign: 'center' }}>{carpool.name}</h2>
- {carpool.description}
+ <h1>{name}</h1>
+ <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>
);
diff --git a/src/components/types.ts b/src/components/types.ts
index 208ebc2..79cca55 100644
--- a/src/components/types.ts
+++ b/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;