add start of Invite Somebody list

src/components/Carpool/Carpool.tsx

@@ -10,9 +10,11 @@ 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;
@@ -22,6 +24,8 @@ export default function Carpool() {
 		getCarpool(id).then(setCarpool);
 	}, [id]);
 
+	const [invitationsOpen, toggleInvitationsOpen] = useToggle(false);
+
 	return (
 		<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
 			{carpool ? (
@@ -35,6 +39,7 @@ export default function Carpool() {
 							margin: '0.5rem 0',
 						}}
 					>
+						{/* Requests */}
 						<UIButton
 							style={{
 								marginRight: '0.25rem',
@@ -46,6 +51,7 @@ export default function Carpool() {
 						>
 							<MailOutlineIcon style={{ marginRight: '0.5rem' }} /> 1 request
 						</UIButton>
+						{/* Invitations */}
 						<UIButton
 							style={{
 								marginLeft: '0.25rem',
@@ -53,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={{

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,6 +6,7 @@ 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';
@@ -30,17 +31,6 @@ 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 [placeId, setPlaceId] = useState<string | null>(null);

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 { IEvent } from './Event';
-import PersonAddIcon from '@material-ui/icons/PersonAdd';
 
 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';
 

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;