ADD BUTTON FOR CREATING A CARPOOL

src/components/Carpool/Carpool.tsx

@@ -3,7 +3,7 @@ import LocationOnIcon from '@material-ui/icons/LocationOn';
 import MailOutlineIcon from '@material-ui/icons/MailOutline';
 import PersonAddIcon from '@material-ui/icons/PersonAdd';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { ICarpool } from '../types';
@@ -11,6 +11,7 @@ import { ICarpool } from '../types';
 import UISecondaryBox from '../UI/UISecondaryBox';
 import UIButton from '../UI/UIButton';
 import { lightgrey } from '../colors';
+import { getCarpool } from '../api';
 
 function MemberList({ members }: { members: ICarpool['members'] }) {
 	return (
@@ -26,34 +27,18 @@ function MemberList({ members }: { members: ICarpool['members'] }) {
 
 export default function Carpool() {
 	const id = +useParams<{ id: string }>().id;
-	const [carpool, setCarpool] = useState<ICarpool | null>({
+	const [carpool, setCarpool] = useState<ICarpool | null>(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 ? (
 				<>
-					<h1 style={{ marginBottom: '0rem' }}>{name}</h1>
+					<h1 style={{ marginBottom: '0rem' }}>{carpool.name}</h1>
-					<h2 style={{ marginBottom: '0rem' }}>{event.name}</h2>
+					<h2 style={{ marginBottom: '0rem' }}>{carpool.event.name}</h2>
 					<div
 						style={{
 							display: 'flex',
@@ -93,7 +78,7 @@ export default function Carpool() {
 							}}
 						>
 							<LocationOnIcon style={{ marginRight: '1rem' }} />
-							{event.formattedAddress}
+							{carpool.event.formattedAddress}
 						</div>
 						<div
 							style={{

src/components/Event/Event.tsx

@@ -11,7 +11,6 @@ import UIPlacesAutocomplete from '../UI/UIPlacesAutocomplete';
 import UISecondaryBox from '../UI/UISecondaryBox';
 import UISecondaryHeader from '../UI/UISecondaryHeader';
 import useThrottle from '../useThrottle';
-import useToggle from '../useToggle';
 import EventCarpools from './EventCarpools';
 import EventDetails from './EventDetails';
 import EventSignups from './EventSignups';
@@ -44,7 +43,6 @@ export type IEventSignup = {
 
 export default function Event({ event }: { event: IEvent }) {
 	const { name, group, formattedAddress, startTime, endTime } = event;
-	const [haveRide, toggleHaveRide] = useToggle(false);
 	const [placeId, setPlaceId] = useState<string | null>(null);
 	const [interested, setInterested] = useState(false);
 	const [updating, setUpdating] = useState(false);
@@ -143,29 +141,6 @@ export default function Event({ event }: { event: IEvent }) {
 						placeId={placeId}
 					/>
 					<br />
-					{false && (
-						<div
-							style={{
-								display: 'flex',
-								alignItems: 'center',
-								cursor: 'pointer',
-								userSelect: 'none',
-							}}
-							onClick={toggleHaveRide}
-						>
-							<input
-								type="checkbox"
-								style={{
-									borderRadius: '0.5em',
-									width: '2em',
-									height: '2em',
-									margin: '1em',
-								}}
-								checked={haveRide}
-							/>
-							I don't have any way to get there yet
-						</div>
-					)}
 					<EventCarpools event={event} />
 					{signups !== null && (
 						<EventSignups event={event} myPlaceId={placeId} signups={signups} />

src/components/Event/EventCarpools.tsx

@@ -1,8 +1,11 @@
 // import CallMergeIcon from '@material-ui/icons/CallMerge';
 import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople';
+import { useCallback } from 'react';
 // import ScheduleIcon from '@material-ui/icons/Schedule';
 import { useState } from 'react';
+import { createCarpool } from '../api';
 import { lightgrey } from '../colors';
+import { useMe } from '../hooks';
 import { ICarpool } from '../types';
 import UIButton from '../UI/UIButton';
 import { IEvent } from './Event';
@@ -65,14 +68,40 @@ const dummyCarpoolData: ICarpool[] = [
 export default function Carpools({ event }: { event: IEvent }) {
 	// eslint-disable-next-line
 	const [carpools, _setCarpools] = useState(dummyCarpoolData);
+	const [creationStatus, setCreationStatus] =
+		useState<null | 'pending' | 'completed' | 'errored'>(null);
+	const me = useMe()!;
+
+	const createEmptyCarpool = useCallback(() => {
+		setCreationStatus('pending');
+
+		createCarpool({ name: me.name + "'s Carpool", eventId: event.id })
+			.then(() => {
+				setCreationStatus('completed');
+			})
+			.catch(() => {
+				setCreationStatus('errored');
+			});
+
+		setTimeout(() => setCreationStatus('completed'), 1000);
+	}, [event.id, me.name]);
 
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column' }}>
 			<h3 style={{ marginBlockEnd: '0' }}>Carpools</h3>
 			<br />
 			<>Available to drive?</>
-			<UIButton onClick={() => {}} style={{ backgroundColor: lightgrey }}>
+			<UIButton
-				I'm not available
+				onClick={createEmptyCarpool}
+				style={{ backgroundColor: lightgrey }}
+			>
+				{creationStatus === null
+					? 'Create Empty Carpool'
+					: creationStatus === 'pending'
+					? 'Creating...'
+					: creationStatus === 'completed'
+					? 'Created!'
+					: 'Errored'}
 			</UIButton>
 			{carpools.map((carpool) => (
 				<CarpoolRow carpool={carpool} key={carpool.id} />

src/components/api.ts

@@ -167,3 +167,13 @@ export async function getReceivedInvitationsAndRequests() {
 export async function getCarpool(id: number) {
 	return await get('/carpools/' + id);
 }
+
+export async function createCarpool({
+	eventId,
+	name,
+}: {
+	eventId: number;
+	name: string;
+}) {
+	return await post('/carpools/', { eventId, name });
+}