add leave carpool button

src/components/Carpool/Carpool.tsx

@@ -1,7 +1,12 @@
 import MailOutlineIcon from '@material-ui/icons/MailOutline';
 import PersonAddIcon from '@material-ui/icons/PersonAdd';
 import { createContext, useCallback, useEffect, useState } from 'react';
-import { cancelCarpoolInvite, getCarpool, sendCarpoolInvite } from '../api';
+import {
+	cancelCarpoolInvite,
+	getCarpool,
+	leaveCarpool,
+	sendCarpoolInvite,
+} from '../api';
 import { lightgrey } from '../colors';
 import { ICarpool } from '../types';
 import UIButton from '../UI/UIButton';
@@ -19,6 +24,9 @@ export const CarpoolContext = createContext({
 	cancelInvite: (user: { id: number; name: string }) => {
 		console.error('not implemented: cancelInvite');
 	},
+	leave: () => {
+		console.error('not implemented: leave');
+	},
 });
 
 export default function Carpool({ id }: { id: number }) {
@@ -75,12 +83,31 @@ export default function Carpool({ id }: { id: number }) {
 		[id]
 	);
 
+	const eventId = carpool?.eventId;
+
+	const leave = useCallback(() => {
+		if (eventId) {
+			leaveCarpool(id)
+				.then(() => {
+					window.location.href = '/events/' + eventId;
+				})
+				.catch(console.error);
+		}
+	}, [eventId, id]);
+
 	if (!carpool) {
 		return <>Loading...</>;
 	}
 
 	return (
-		<CarpoolContext.Provider value={{ carpool, sendInvite, cancelInvite }}>
+		<CarpoolContext.Provider
+			value={{
+				carpool,
+				sendInvite,
+				cancelInvite,
+				leave,
+			}}
+		>
 			<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
 				{carpool ? (
 					<>

src/components/Carpool/MemberList.tsx

@@ -1,4 +1,17 @@
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import { useContext } from 'react';
+import { lightgrey } from '../colors';
+import UIButton from '../UI/UIButton';
+import { CarpoolContext } from './Carpool';
+
+function MemberRow({ member }: { member: { id: number; name: string } }) {
+	return (
+		<div style={{ display: 'flex', alignItems: 'center' }} key={member.id}>
+			<AccountCircleIcon style={{ marginRight: '8px' }} />
+			<div>{member.name}</div>
+		</div>
+	);
+}
 
 export default function MemberList({
 	members,
@@ -8,42 +21,36 @@ export default function MemberList({
 		name: string;
 	}[];
 }) {
+	const { leave } = useContext(CarpoolContext);
+	const membersToShow = members.slice(0, 2);
+	const hiddenMemberCount = members.length - membersToShow.length;
+
 	return (
 		<div
-			className="MemberList"
 			style={{
 				display: 'flex',
 				flexDirection: 'column',
 				alignSelf: 'center',
-				alignItems: 'flex-start',
+				alignItems: 'center',
 			}}
 		>
 			<h3 style={{ marginBlockEnd: '0' }}>Members</h3>
 			{members.length > 0 ? (
-				<div>
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
-					{members.map((member, index) => {
+					{membersToShow.map((member) => (
-						return index < 2 ? (
+						<MemberRow member={member} key={member.id} />
-							<div
+					))}
-								className="member"
+					{hiddenMemberCount > 0 &&
-								style={{ display: 'flex', alignItems: 'center' }}
+						(hiddenMemberCount === 1
-								key={member.id}
+							? hiddenMemberCount + ' other...'
-							>
+							: hiddenMemberCount + ' others...')}
-								<AccountCircleIcon style={{ marginRight: '8px' }} />
-								<div>{member.name}</div>
-							</div>
-						) : (
-							''
-						);
-					})}
-					{members.length > 2
-						? members.length - 2 === 1
-							? members.length - 2 + ' other...'
-							: members.length - 2 + ' others...'
-						: ''}{' '}
 				</div>
 			) : (
 				'This carpool has no members.'
 			)}
+			<UIButton onClick={leave} style={{ backgroundColor: lightgrey }}>
+				Leave
+			</UIButton>
 		</div>
 	);
 }

src/components/api.ts

@@ -189,3 +189,7 @@ export async function sendCarpoolInvite(carpoolId: number, userId: number) {
 export async function cancelCarpoolInvite(carpoolId: number, userId: number) {
 	return await delete$('/carpools/' + carpoolId + '/invite', { userId });
 }
+
+export async function leaveCarpool(carpoolId: number) {
+	return await post(`/carpools/${carpoolId}/leave`, {});
+}