Merge branch 'main' of https://github.com/myfatemi04/wheelshare-frontend

src/components/Carpool/Carpool.tsx

@@ -3,63 +3,35 @@ 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';
 
 import UISecondaryBox from '../UI/UISecondaryBox';
 import MemberList from './MemberList';
+import InvitationList from './InvitationList';
 import UIButton from '../UI/UIButton';
 import { lightgrey } from '../colors';
+import { getCarpool } from '../api';
+import useToggle from '../useToggle';
 
 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,
-				name: 'Joshua Hsueh',
-			},
-			{
-				id: 1,
-				name: 'Michael Fatemi',
-			},
-			{
-				id: 2,
-				name: 'Tom Brady',
-			},
-			{
-				id: 3,
-				name: 'Bob the Builder',
-			},
-		],
-		invitations: [],
-	});
+	const [carpool, setCarpool] = useState<ICarpool | null>(null);
 
-	// useEffect(() => {
-	// 	getCarpool(id).then(setCarpool);
-	// }, [id]);
+	useEffect(() => {
+		getCarpool(id).then(setCarpool);
+	}, [id]);
 
-	const { event, name } = carpool!;
+	const [invitationsOpen, toggleInvitationsOpen] = useToggle(false);
 
 	return (
 		<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
 			{carpool ? (
 				<>
-					<h1 style={{ marginBottom: '0rem' }}>{name}</h1>
-					<h2 style={{ marginBottom: '0rem' }}>{event.name}</h2>
+					<h1 style={{ marginBottom: '0rem' }}>{carpool.name}</h1>
+					<h2 style={{ marginBottom: '0rem' }}>{carpool.event.name}</h2>
 					<div
 						style={{
 							display: 'flex',
@@ -67,6 +39,7 @@ export default function Carpool() {
 							margin: '0.5rem 0',
 						}}
 					>
+						{/* Requests */}
 						<UIButton
 							style={{
 								marginRight: '0.25rem',
@@ -78,6 +51,7 @@ export default function Carpool() {
 						>
 							<MailOutlineIcon style={{ marginRight: '0.5rem' }} /> 1 request
 						</UIButton>
+						{/* Invitations */}
 						<UIButton
 							style={{
 								marginLeft: '0.25rem',
@@ -85,11 +59,12 @@ export default function Carpool() {
 								display: 'flex',
 								alignItems: 'center',
 							}}
-							onClick={console.log}
+							onClick={toggleInvitationsOpen}
 						>
 							<PersonAddIcon style={{ marginRight: '0.5rem' }} /> Invite
 						</UIButton>
 					</div>
+					{invitationsOpen && <InvitationList carpool={carpool} />}
 					<div style={{ fontSize: '1.5rem', fontWeight: 400 }}>
 						<div
 							style={{
@@ -99,7 +74,7 @@ export default function Carpool() {
 							}}
 						>
 							<LocationOnIcon style={{ marginRight: '1rem' }} />
-							{event.formattedAddress}
+							{carpool.event.formattedAddress}
 						</div>
 						<div
 							style={{

src/components/Carpool/InvitationList.tsx

@@ -0,0 +1,103 @@
+import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
+import { getEventSignups } from '../api';
+import { ICarpool, IEventSignup } from '../types';
+
+function InvitationRow({
+	carpoolId,
+	userId,
+	userName,
+	isInvited,
+}: {
+	carpoolId: number;
+	userId: number;
+	userName: string;
+	isInvited: boolean;
+}) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'row',
+				alignItems: 'center',
+				justifyContent: 'space-between',
+				padding: '0.25rem',
+			}}
+		>
+			<span>{userName}</span>
+		</div>
+	);
+}
+
+export default function InvitationList({ carpool }: { carpool: ICarpool }) {
+	const eventId = carpool.event.id;
+
+	const [availableSignups, setAvailableSignups] =
+		useState<IEventSignup[] | null>(null);
+
+	useEffect(() => {
+		getEventSignups(eventId).then(setAvailableSignups);
+	}, [eventId]);
+
+	const existingSignups = useMemo(
+		() =>
+			new Set(
+				carpool.invitations
+					.filter((invitation) => !invitation.isRequest)
+					.map((invitation) => invitation.user.id)
+			),
+		[carpool]
+	);
+
+	const availableSignupsAlreadyInvited = useMemo(
+		() =>
+			availableSignups
+				? availableSignups.filter((signup) =>
+						existingSignups.has(signup.userId)
+				  )
+				: null,
+		[availableSignups, existingSignups]
+	);
+
+	const availableSignupsNotInvited = useMemo(
+		() =>
+			availableSignups
+				? availableSignups.filter(
+						(signup) => !existingSignups.has(signup.userId)
+				  )
+				: null,
+		[availableSignups, existingSignups]
+	);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				maxHeight: '30rem',
+				marginBottom: '1rem',
+			}}
+		>
+			<h1 style={{ marginBottom: '0.25rem' }}>Invite Somebody</h1>
+			{availableSignups === null && 'Loading'}
+			{availableSignupsNotInvited?.map((signup) => (
+				<InvitationRow
+					key={signup.user.id}
+					userId={signup.user.id}
+					userName={signup.user.name}
+					carpoolId={carpool.id}
+					isInvited={false}
+				/>
+			))}
+			{availableSignupsAlreadyInvited?.map((signup) => (
+				<InvitationRow
+					key={signup.userId}
+					userId={signup.user.id}
+					userName={signup.user.name}
+					carpoolId={carpool.id}
+					isInvited
+				/>
+			))}
+		</div>
+	);
+}

src/components/Carpool/MemberList.tsx

@@ -26,17 +26,17 @@ export default function MemberList({
 							<div
 								className="member"
 								style={{ display: 'flex', alignItems: 'center' }}
+								key={member.id}
 							>
-								{}
 								<AccountCircleIcon style={{ marginRight: '8px' }} />
-								<div key={member.id}>{member.name}</div>
+								<div>{member.name}</div>
 							</div>
 						) : (
 							''
 						);
 					})}
 					{members.length > 2
-						? members.length - 2 == 1
+						? members.length - 2 === 1
 							? members.length - 2 + ' other...'
 							: members.length - 2 + ' others...'
 						: ''}{' '}

src/components/Event/Event.tsx

@@ -6,12 +6,12 @@ import {
 } from '../api';
 import { green, lightgrey } from '../colors';
 import { useMe } from '../hooks';
+import { IEventSignup } from '../types';
 import UIButton from '../UI/UIButton';
 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';
@@ -31,20 +31,8 @@ function GroupName({ name }: { name: string }) {
 	return <span style={{ color: '#303030', textAlign: 'center' }}>{name}</span>;
 }
 
-export type IEventSignup = {
-	user: {
-		id: number;
-		name: number;
-	};
-	placeId: string;
-	formattedAddress: string;
-	latitude: number;
-	longitude: number;
-};
-
 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 +131,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 }}>
-				I'm not available
+			<UIButton
+				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/Event/EventSignups.tsx

@@ -1,8 +1,9 @@
+import PersonAddIcon from '@material-ui/icons/PersonAdd';
 import { useMe } from '../hooks';
 import latlongdist, { R_miles } from '../latlongdist';
+import { IEventSignup } from '../types';
 import usePlace from '../usePlace';
-import { IEvent, IEventSignup } from './Event';
-import PersonAddIcon from '@material-ui/icons/PersonAdd';
+import { IEvent } from './Event';
 
 export default function EventSignups({
 	event,

src/components/api.ts

@@ -1,6 +1,5 @@
-import { IEventSignup } from './Event/Event';
 import { GroupPreview } from './GroupJoinerLink';
-import { IInvitation } from './types';
+import { IInvitation, IEventSignup } from './types';
 
 const base = process.env.REACT_APP_API_DOMAIN + 'api';
 
@@ -167,3 +166,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 });
+}

src/components/types.ts

@@ -70,6 +70,10 @@ export type IEvent = {
 export type IEventSignup = {
 	eventId: number;
 	userId: number;
+	user: {
+		id: number;
+		name: string;
+	};
 	placeId: string | null;
 	formattedAddress: string | null;
 	latitude: number | null;