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

src/components/Carpool/Carpool.tsx

@@ -160,7 +160,9 @@ export default function Carpool({ id }: { id: number }) {
 				leave,
 			}}
 		>
-			<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
+			<UISecondaryBox
+				style={{ width: '45rem', maxWidth: '100vw', alignItems: 'center' }}
+			>
 				<h1>{carpool.name}</h1>
 				<UILink href={'/events/' + carpool.event.id}>
 					{carpool.event.name}

src/components/Carpool/CarpoolMap.tsx

@@ -39,7 +39,7 @@ const CarpoolMap = () => {
 			google={google}
 			style={{ width: '100%', height: '100%' }}
 			containerStyle={{
-				width: '30rem',
+				width: 'min(30rem, 100%)',
 				height: '25rem',
 				position: 'relative',
 				borderRadius: '0.5rem',

src/components/Carpool/MemberList.tsx

@@ -40,7 +40,7 @@ export default function MemberList() {
 		() => carpool.members.map((member) => member.id),
 		[carpool]
 	);
-	const members = useSignups(carpool.id, memberIDs);
+	const members = useSignups(carpool.event.id, memberIDs);
 	console.log(members);
 
 	const membersToShow = useMemo(

src/components/Header/Header.tsx

@@ -8,7 +8,7 @@ import UIPrimaryTitle from '../UI/UIPrimaryTitle';
 
 export default function Header() {
 	const me = useMe();
-	const notifications = useNotifications();
+	const [notifications, refreshNotifications] = useNotifications();
 
 	return (
 		<div
@@ -31,7 +31,10 @@ export default function Header() {
 					<UIPressable onClick={logout}>Log out</UIPressable>
 					<br />
 					{notifications.length > 0 ? (
-						<Notifications notifications={notifications} />
+						<Notifications
+							notifications={notifications}
+							refresh={refreshNotifications}
+						/>
 					) : (
 						<span>No notifications</span>
 					)}

src/components/Notifications/Notification.tsx

@@ -1,45 +1,44 @@
-import { useCallback } from 'react';
-import {
-	acceptInvite,
-	acceptCarpoolRequest,
-	denyInvite,
-	denyCarpoolRequest,
-} from '../api';
+import { useCallback, useContext } from 'react';
+import { NotificationsContext } from '../../state/Notifications/NotificationsProvider';
+import { acceptCarpoolRequest, denyCarpoolRequest } from '../api';
 import { IInvitation } from '../types';
 import UIButton from '../UI/UIButton';
 
 export default function Notification({
 	notification,
+	refresh,
 }: {
 	notification: IInvitation;
+	refresh: () => void;
 }) {
 	const carpoolId = notification.carpool.id;
 
+	const notifs = useContext(NotificationsContext);
+
 	const acceptReq = useCallback(() => {
-		acceptCarpoolRequest(carpoolId, notification.user.id);
-	}, [carpoolId, notification.user.id]);
+		acceptCarpoolRequest(carpoolId, notification.user.id).finally(refresh);
+	}, [carpoolId, notification.user.id, refresh]);
 
 	const rejectReq = useCallback(() => {
-		denyCarpoolRequest(carpoolId, notification.user.id);
-	}, [carpoolId, notification.user.id]);
+		denyCarpoolRequest(carpoolId, notification.user.id).finally(refresh);
+	}, [carpoolId, notification.user.id, refresh]);
 
 	const acceptInv = useCallback(() => {
-		acceptInvite(carpoolId);
-	}, [carpoolId]);
+		notifs.acceptCarpoolInvite(carpoolId);
+	}, [carpoolId, notifs]);
 
 	const rejectInv = useCallback(() => {
-		denyInvite(carpoolId);
-	}, [carpoolId]);
+		notifs.denyCarpoolInvite(carpoolId);
+	}, [carpoolId, notifs]);
 
 	const sentTime = new Date(notification.sentTime);
 
 	return (
 		<div className="notification">
-			{notification.user.name}{' '}
 			{notification.isRequest ? (
-				<span>requested to join</span>
+				<span>{notification.user.name} requested to join</span>
 			) : (
-				<span>invited you to join</span>
+				<span>You're invited to join</span>
 			)}{' '}
 			{notification.carpool.name + ' at ' + sentTime.toLocaleString()}
 			{notification.isRequest ? (

src/components/Notifications/Notifications.tsx

@@ -3,8 +3,10 @@ import { IInvitation } from '../types';
 
 export default function Notifications({
 	notifications,
+	refresh,
 }: {
 	notifications: IInvitation[];
+	refresh: () => void;
 }) {
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -12,6 +14,7 @@ export default function Notifications({
 			{notifications.map((notification) => (
 				<Notification
 					notification={notification}
+					refresh={refresh}
 					key={`${notification.user.id}:${notification.carpool.id}`}
 				/>
 			))}

src/components/api.ts

@@ -245,7 +245,7 @@ export async function leaveCarpool(carpoolId: number) {
 }
 
 export async function sendCarpoolRequest(carpoolId: number) {
-	await post('/carpools/' + carpoolId + '/request', {});
+	await post(`/carpools/${carpoolId}/request`, {});
 }
 
 export async function cancelCarpoolRequest(carpoolId: number) {

src/components/hooks.ts

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { getReceivedInvitationsAndRequests } from './api';
 import AuthenticationContext from './Authentication/AuthenticationContext';
 import { IInvitation } from './types';
@@ -9,9 +9,11 @@ export const useMe = () => useAuth().user;
 export function useNotifications() {
 	const [notifications, setNotifications] = useState<IInvitation[]>([]);
 
-	useEffect(() => {
+	const refresh = useCallback(() => {
 		getReceivedInvitationsAndRequests().then(setNotifications);
 	}, []);
 
-	return notifications;
+	useEffect(refresh, [refresh]);
+
+	return [notifications, refresh] as const;
 }