joining a group via code works now!

src/components/GroupJoinerLink.tsx

@@ -1,22 +1,45 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { joinGroup, resolveCode } from './api';
 import UIButton from './UIButton';
 import UIPressable from './UIPressable';
 import UISecondaryBox from './UISecondaryBox';
 import UITextInput from './UITextInput';
 import useToggle from './useToggle';
 
+export type GroupPreview = {
+	name: string;
+	id: number;
+};
+
 function GroupJoiner() {
 	const [code, setCode] = useState('');
 	const [joining, setJoining] = useState(false);
+
+	const [group, setGroup] = useState<GroupPreview | null>(null);
+
+	useEffect(() => {
+		const initialCode = code;
+		resolveCode(code).then((group) => {
+			if (code === initialCode) {
+				setGroup(group);
+			}
+		});
+	}, [code]);
+
 	const join = useCallback(() => {
-		if (code) {
+		const id = group?.id;
+		if (code && id) {
 			console.log('Joining a group with the code', code);
 			setJoining(true);
-			setTimeout(() => {
-				setJoining(false);
-			}, 500);
+			joinGroup(id, code)
+				.then(({ status }) => {
+					if (status === 'success') {
+						window.location.href = '/groups/' + id;
 					}
-	}, [code]);
+				})
+				.finally(() => setJoining(false));
+		}
+	}, [code, group?.id]);
 
 	const buttonEnabled = code.length > 0 && !joining;
 
@@ -25,9 +48,18 @@ function GroupJoiner() {
 			<h1>Join Group</h1>
 			Code
 			<UITextInput value={code} onChangeText={setCode} />
-			<UIButton onClick={join} style={!buttonEnabled ? { color: 'grey' } : {}}>
+			{group && (
+				<>
+					<br />
+					<span>Found group: {group.name}</span>
+					<UIButton
+						onClick={join}
+						style={!buttonEnabled ? { color: 'grey' } : {}}
+					>
 						{joining ? 'Joining' : 'Join'}
 					</UIButton>
+				</>
+			)}
 		</UISecondaryBox>
 	);
 }

src/components/api.ts

@@ -1,4 +1,5 @@
 import { IEventSignup } from './Event';
+import { GroupPreview } from './GroupJoinerLink';
 
 async function post(path: string, data: any) {
 	const res = await fetch('http://localhost:5000/api' + path, {
@@ -151,3 +152,14 @@ export async function denyInvite(carpoolId: number, userId: number) {
 export async function getMe() {
 	return await get('/users/@me');
 }
+
+export async function resolveCode(code: string): Promise<GroupPreview> {
+	return await get('/resolve_code/' + code);
+}
+
+export async function joinGroup(id: number, code: string) {
+	const result = await post('/groups/' + id + '/join', { code });
+	return {
+		status: result.status,
+	};
+}