add button for joining group

src/components/NewUI/GroupJoinerLink.tsx

@@ -0,0 +1,51 @@
+import { useCallback, useState } from 'react';
+import UIButton from './UIButton';
+import UIPressable from './UIPressable';
+import UISecondaryBox from './UISecondaryBox';
+import UITextInput from './UITextInput';
+
+function GroupJoiner() {
+	const [code, setCode] = useState('');
+	const [joining, setJoining] = useState(false);
+	const join = useCallback(() => {
+		if (code) {
+			console.log('Joining a group with the code', code);
+			setJoining(true);
+			setTimeout(() => {
+				setJoining(false);
+			}, 500);
+		}
+	}, [code]);
+
+	const buttonEnabled = code.length > 0 && !joining;
+
+	return (
+		<UISecondaryBox style={{ width: '100%' }}>
+			<h1>Join Group</h1>
+			Code
+			<UITextInput value={code} onChangeText={setCode} />
+			<UIButton onClick={join} style={!buttonEnabled ? { color: 'grey' } : {}}>
+				{joining ? 'Joining' : 'Join'}
+			</UIButton>
+		</UISecondaryBox>
+	);
+}
+
+export default function GroupJoinerLink() {
+	const [open, setOpen] = useState(false);
+	const toggle = useCallback(() => {
+		setOpen((open) => !open);
+	}, []);
+
+	return (
+		<>
+			<UIPressable onClick={toggle}>Join Group</UIPressable>
+			{open && (
+				<>
+					<br />
+					<GroupJoiner />
+				</>
+			)}
+		</>
+	);
+}

src/components/NewUI/Groups.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { IGroup } from './Group';
 import GroupCreatorLink from './GroupCreatorLink';
+import GroupJoinerLink from './GroupJoinerLink';
 import GroupList from './GroupList';
 
 export default function Groups() {
@@ -15,9 +16,19 @@ export default function Groups() {
 	return (
 		<>
 			<h1>Groups</h1>
+			<GroupJoinerLink />
+			<br />
 			<GroupCreatorLink />
 			<br />
+			{groups.length > 0 ? (
 				<GroupList groups={groups} />
+			) : (
+				<span>
+					You aren't in any groups. You can create your own by clicking 'create
+					group' above, or join one by asking an admin of the group to send you
+					an invite link.
+				</span>
+			)}
 		</>
 	);
 }