fix authentication issues

src/components/App.tsx

@@ -2,7 +2,6 @@ import { CSSProperties, lazy, Suspense } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import NotificationsProvider from '../state/Notifications/NotificationsProvider';
 import { useMe } from './hooks';
-import UseImmutableTest from './UseImmutableTest';
 import WheelShare from './WheelShare';
 import WheelShareLoggedOut from './WheelShareLoggedOut';
 
@@ -25,30 +24,35 @@ export default function App() {
 	const user = useMe();
 
 	return (
-		<NotificationsProvider>
+		<div style={{ padding: '1rem', maxWidth: '100vw' }}>
-			<div style={{ padding: '1rem', maxWidth: '100vw' }}>
+			<div style={style}>
-				<UseImmutableTest />
+				<Suspense fallback={null}>
-				<div style={style}>
 					<BrowserRouter>
 						<Switch>
-							<Route
+							{user ? (
-								path="/"
+								<NotificationsProvider>
-								exact
+									<Route path="/" exact component={WheelShare} />
-								component={user ? WheelShare : WheelShareLoggedOut}
+									<Route
-							/>
+										component={Authenticator}
-							<Suspense fallback={null}>
+										path="/auth/:provider/callback"
-								<Route
+									/>
-									component={Authenticator}
+									<Route path="/carpools/:id" component={CarpoolPage} />
-									path="/auth/:provider/callback"
+									<Route path="/events/:id" component={EventPage} />
-								/>
+									<Route path="/groups/:id" component={Group} />
-								<Route path="/carpools/:id" component={CarpoolPage} />
+								</NotificationsProvider>
-								<Route path="/events/:id" component={EventPage} />
+							) : (
-								<Route path="/groups/:id" component={Group} />
+								<>
-							</Suspense>
+									<WheelShareLoggedOut />
+									<Route
+										component={Authenticator}
+										path="/auth/:provider/callback"
+									/>
+								</>
+							)}
 						</Switch>
 					</BrowserRouter>
-				</div>
+				</Suspense>
 			</div>
-		</NotificationsProvider>
+		</div>
 	);
 }

src/components/Authentication/AuthenticationWrapper.tsx

@@ -15,7 +15,15 @@ export default function AuthenticationWrapper({
 		const sessionToken = localStorage.getItem('session_token');
 
 		if (sessionToken) {
-			getMe().then(setUser).catch(none);
+			getMe()
+				.then((user) => {
+					if ('status' in user && user.status === 'error') {
+						setUser(null);
+					} else {
+						setUser(user);
+					}
+				})
+				.catch(() => none());
 		} else {
 			none();
 		}

src/components/Authentication/Authenticator.tsx

@@ -75,9 +75,6 @@ export default function Authenticator() {
 					<>
 						<h1>Sign In Error</h1>
 						We couldn't use your Ion account to log in.
-						<br />
-						<br />
-						<a href="/">Home</a>
 					</>
 				);
 				break;
@@ -94,9 +91,6 @@ export default function Authenticator() {
 		children = (
 			<>
 				<h1>Sign In Error</h1>
-				<br />
-				<br />
-				<a href="/">Home</a>
 			</>
 		);
 	}

src/components/Carpool/InvitationList.tsx

@@ -42,14 +42,12 @@ function InvitationRow({
 export default function InvitationList() {
 	const { carpool } = useContext(CarpoolContext);
 
-	const eventId = carpool.event.id;
-
 	const [availableSignups, setAvailableSignups] =
 		useImmutable<PotentialInvitee[] | null>(null);
 
 	useEffect(() => {
-		getPotentialInvitees(eventId).then(setAvailableSignups);
+		getPotentialInvitees(carpool.id).then(setAvailableSignups);
-	}, [eventId, setAvailableSignups]);
+	}, [carpool.id, setAvailableSignups]);
 
 	const invitedUserIDs = useMemo(
 		() =>
@@ -63,9 +61,11 @@ export default function InvitationList() {
 
 	const availableSignupsAlreadyInvited = useMemo(
 		() =>
-			availableSignups?.filter((signup) =>
+			availableSignups
-				invitedUserIDs.has(signup.user.id)
+				? availableSignups.filter((signup) =>
-			) ?? null,
+						invitedUserIDs.has(signup.user.id)
+				  )
+				: null,
 		[availableSignups, invitedUserIDs]
 	);
 
@@ -90,20 +90,26 @@ export default function InvitationList() {
 		>
 			<h1 style={{ marginBottom: '0.25rem' }}>Invite Somebody</h1>
 			{availableSignups === null && 'Loading'}
-			{availableSignupsAlreadyInvited?.map((signup) => (
+			{availableSignupsAlreadyInvited?.map(
-				<InvitationRow
+				(signup) =>
-					key={signup.user.id}
+					!carpool.members.some(({ id }) => id === signup.user.id) && (
-					user={signup.user}
+						<InvitationRow
-					isInvited={true}
+							key={signup.user.id}
-				/>
+							user={signup.user}
-			))}
+							isInvited={true}
-			{availableSignupsNotInvited?.map((signup) => (
+						/>
-				<InvitationRow
+					)
-					key={signup.user.id}
+			)}
-					user={signup.user}
+			{availableSignupsNotInvited?.map(
-					isInvited={false}
+				(signup) =>
-				/>
+					!carpool.members.some(({ id }) => id === signup.user.id) && (
-			))}
+						<InvitationRow
+							key={signup.user.id}
+							user={signup.user}
+							isInvited={false}
+						/>
+					)
+			)}
 		</div>
 	);
 }

src/components/api.ts

@@ -44,7 +44,13 @@ async function get(path: string) {
 			Authorization: 'Bearer ' + localStorage.getItem('session_token'),
 		},
 	});
-	return await res.json();
+	const result = await res.json();
+	return result;
+	// if (res.ok) {
+	// 	return result;
+	// } else {
+	// 	throw new Error(result.message);
+	// }
 }
 
 export async function getEventSignups(