clean up events code

src/components/Authentication/createSession.ts

@@ -1,6 +1,4 @@
-const domain = process.env.REACT_APP_API_DOMAIN;
-
-console.log({ domain });
+import { domain } from '../api';
 
 export async function createSession(code: string, redirectUrl: string) {
 	const res = await fetch(domain + 'create_session', {

src/components/Event/Event.tsx

@@ -1,14 +1,9 @@
 import { useCallback, useEffect } from 'react';
 import { green, lightgrey } from '../../lib/colors';
 import getPlaceDetails from '../../lib/getPlaceDetails';
-import {
-	addOrUpdateEventSignup,
-	getEvent,
-	getEventSignups,
-	removeEventSignup,
-} from '../api';
+import { addOrUpdateEventSignup, getEvent, removeEventSignup } from '../api';
 import { useMe } from '../hooks';
-import { IEvent, IEventSignup } from '../types';
+import { IEvent } from '../types';
 import UIButton from '../UI/UIButton';
 import UILink from '../UI/UILink';
 import UIPlacesAutocomplete from '../UI/UIPlacesAutocomplete';
@@ -24,8 +19,6 @@ function GroupName({ group }: { group: IEvent['group'] }) {
 	return <UILink href={`/groups/${group.id}`}>{group.name}</UILink>;
 }
 
-const NOT_LOADED = {};
-
 export default function Event({
 	id,
 	initial,
@@ -33,13 +26,14 @@ export default function Event({
 	id: number;
 	initial?: IEvent;
 }) {
-	const [event, setEvent] = useImmutable<IEvent | null>({
+	const [event, setEvent] = useImmutable<IEvent>({
 		id,
 		name: '',
 		group: {
 			id: 0,
 			name: '',
 		},
+		signups: {},
 		carpools: [],
 		startTime: '',
 		endTime: '',
@@ -51,8 +45,6 @@ export default function Event({
 		duration: 0,
 		...(initial || {}),
 	});
-	const [signups, setSignups] =
-		useImmutable<Record<string, IEventSignup>>(NOT_LOADED);
 
 	const me = useMe()!;
 
@@ -71,13 +63,13 @@ export default function Event({
 			if (placeId) {
 				const details = await getPlaceDetails(placeId);
 
-				signups[me.id] = {
+				event.signups[me.id] = {
 					user: { id: me.id, name: me.name },
 					placeId,
 					...details,
 				};
 			} else {
-				signups[me.id] = {
+				event.signups[me.id] = {
 					user: { id: me.id, name: me.name },
 					placeId: null,
 					latitude: null,
@@ -86,30 +78,18 @@ export default function Event({
 				};
 			}
 		},
-		[id, me.id, me.name, signups]
+		[event.signups, id, me.id, me.name]
 	);
 
 	const removeSignup = useCallback(async () => {
 		await removeEventSignup(id);
 
-		if (signups[me.id]) {
-			delete signups[me.id];
+		if (event.signups[me.id]) {
+			delete event.signups[me.id];
 		}
-	}, [id, me.id, signups]);
+	}, [id, me.id, event.signups]);
 
-	const interested = !!signups[me.id];
-
-	useEffect(() => {
-		getEventSignups(id)
-			.then((signups) => {
-				const signupMap: Record<string, IEventSignup> = {};
-				for (let signup of signups) {
-					signupMap[signup.user.id] = signup;
-				}
-				setSignups(signupMap);
-			})
-			.catch(console.error);
-	}, [id, setSignups]);
+	const interested = !!event.signups[me.id];
 
 	if (!event) {
 		return <UISecondaryBox>Loading...</UISecondaryBox>;
@@ -124,7 +104,6 @@ export default function Event({
 				refresh,
 				default: false,
 				tentativeInvites,
-				signups,
 			}}
 		>
 			<UISecondaryBox>
@@ -151,15 +130,15 @@ export default function Event({
 								updateSignup(placeId);
 							}}
 							style={
-								signups[me.id]?.placeId != null
+								event.signups[me.id]?.placeId != null
 									? { border: '2px solid ' + green }
 									: {}
 							}
-							placeId={signups[me.id]?.placeId}
+							placeId={event.signups[me.id]?.placeId}
 						/>
 						<br />
 						<EventCarpools />
-						{signups !== null && <EventSignups />}
+						{event.signups !== null && <EventSignups />}
 					</>
 				)}
 			</UISecondaryBox>

src/components/Event/EventCarpools.tsx

@@ -12,10 +12,11 @@ import { useMe } from '../hooks';
 import { IEvent } from '../types';
 import useOptimalPath from '../useOptimalPath';
 import EventContext from './EventContext';
-import useMySignup from './useMySignup';
+import { useMySignup } from './EventHooks';
 
 function useMemberLocations(members: IEvent['carpools'][0]['members']) {
-	const { signups } = useContext(EventContext);
+	const { event } = useContext(EventContext);
+	const signups = event.signups;
 
 	return useMemo(
 		() =>

src/components/Event/EventContext.tsx

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { IEvent, IEventSignup } from '../types';
+import { IEvent } from '../types';
 
 const EventContext = createContext({
 	refresh: () => {
@@ -7,7 +7,6 @@ const EventContext = createContext({
 	},
 	event: null! as IEvent,
 	default: true,
-	signups: {} as Record<string, IEventSignup>,
 	tentativeInvites: {} as Record<number, boolean>,
 });
 

src/components/Event/EventHooks.ts

@@ -2,8 +2,12 @@ import { useContext, useMemo } from 'react';
 import { useMe } from '../hooks';
 import EventContext from './EventContext';
 
-export default function useMySignup() {
-	const { signups } = useContext(EventContext);
+export function useSignups() {
+	return useContext(EventContext).event.signups;
+}
+
+export function useMySignup() {
+	const signups = useSignups();
 	const me = useMe()!;
 
 	return useMemo(() => signups[me.id] ?? null, [signups, me.id]);

src/components/Event/EventSignups.tsx

@@ -7,7 +7,7 @@ import { IEventSignup } from '../types';
 import EventCarpoolCreateButton from './EventCarpoolCreateButton';
 import EventContext from './EventContext';
 import pickLatLong from './pickLatLong';
-import useMySignup from './useMySignup';
+import { useMySignup } from './EventHooks';
 
 function EventSignup({ signup }: { signup: IEventSignup }) {
 	const { user } = signup;
@@ -79,7 +79,8 @@ function EventSignup({ signup }: { signup: IEventSignup }) {
 }
 
 export default function EventSignups() {
-	const { event, signups } = useContext(EventContext);
+	const { event } = useContext(EventContext);
+	const signups = event.signups;
 	const carpools = event.carpools;
 
 	const signupsWithoutCarpool = useMemo(() => {
@@ -92,6 +93,8 @@ export default function EventSignups() {
 			.map((id) => signups[id]);
 	}, [signups, carpools]);
 
+	console.log(signups);
+
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column' }}>
 			<h3 style={{ marginBlockEnd: '0' }}>People without a carpool</h3>

src/components/api.ts

@@ -1,12 +1,12 @@
 import { GroupPreview } from './GroupJoinerLink';
 import { IInvitation, IEventSignup, ICarpool, IEvent, IGroup } from './types';
 
-const base = (() => {
-	const domain =
-		process.env.NODE_ENV === 'production'
-			? process.env.REACT_APP_API_PROD
-			: process.env.REACT_APP_API_LOCAL;
+export const domain =
+	process.env.NODE_ENV === 'production'
+		? process.env.REACT_APP_API_PROD
+		: process.env.REACT_APP_API_LOCAL;
 
+export const base = (() => {
 	if (domain?.endsWith('/')) {
 		return domain.slice(0, -1) + '/api';
 	} else {

src/components/types.ts

@@ -71,6 +71,7 @@ export type IEvent = {
 			name: string;
 		}[];
 	}[];
+	signups: Record<string, IEventSignup>;
 	startTime: string; // Datestring
 	duration: number;
 	endTime: string | null; // Datestring