From cc0fbd8e07c3d85400eaecbb2d4498d7108d3119 Mon Sep 17 00:00:00 2001
From: Sam Nystrom <sam@samnystrom.dev>
Date: Wed, 13 Mar 2024 12:43:43 +0000
Subject: feat: use different header actions for each page

---
 src/NodeEditor.tsx         |  2 +-
 src/index.tsx              |  5 ----
 src/pages/Home.tsx         | 17 ++++++++----
 src/pages/LogIn.tsx        | 48 +++++++++++++++++++---------------
 src/pages/ProjectsList.tsx | 47 +++++++++++++++++++---------------
 src/pages/SignUp.tsx       | 64 +++++++++++++++++++++++++---------------------
 src/util.ts                |  9 +++++--
 7 files changed, 108 insertions(+), 84 deletions(-)

(limited to 'src')

diff --git a/src/NodeEditor.tsx b/src/NodeEditor.tsx
index fcfee2d..a77f21b 100644
--- a/src/NodeEditor.tsx
+++ b/src/NodeEditor.tsx
@@ -1,6 +1,6 @@
 import { useContext, useEffect, useMemo, useRef } from 'preact/hooks';
 import { signal, computed, batch, useSignal, useComputed, Signal } from '@preact/signals';
-import { Pb } from './pb.ts';
+import { Pb } from './context.ts';
 import { nodeRegistry } from './nodes';
 import { SocketHandlers, SocketHandler, NodeInfo } from './node.tsx';
 import { InputSocket } from './dataflow.ts';
diff --git a/src/index.tsx b/src/index.tsx
index 9bcdfe9..ff833cc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -12,11 +12,6 @@ export const App = () => {
 	const pb = useMemo(() => new PocketBase(`/`));
 	return (
 		<Pb.Provider value={pb}>
-			<Header>
-				<Button kind="ghost" href="/play">Try Now</Button>
-				<Button kind="ghost" href="/login">Log In</Button>
-				<Button kind="ghost" href="/signup">Sign Up</Button>
-			</Header>
 			<Router>
 				<Home path="/" />
 				<SignUp path="/signup" />
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index f177a75..43f5955 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,11 +1,18 @@
-import { Content } from '../components';
+import { Header, Content, Button } from '../components';
 
 const Home = () => {
 	return (
-		<Content>
-			<p><a href="/play">Try Now</a></p>
-			<p><a href="/signup">Create Account</a></p>
-		</Content>
+		<>
+			<Header>
+				<Button kind="ghost" href="/play">Try Now</Button>
+				<Button kind="ghost" href="/login">Log In</Button>
+				<Button kind="ghost" href="/signup">Sign Up</Button>
+			</Header>
+			<Content>
+				<p><a href="/play">Try Now</a></p>
+				<p><a href="/signup">Create Account</a></p>
+			</Content>
+		</>
 	);
 };
 
diff --git a/src/pages/LogIn.tsx b/src/pages/LogIn.tsx
index 7e83f98..1f6cb70 100644
--- a/src/pages/LogIn.tsx
+++ b/src/pages/LogIn.tsx
@@ -2,7 +2,7 @@ import { useContext } from 'preact/hooks';
 import { useSignal } from '@preact/signals';
 import { route } from 'preact-router';
 import { Pb } from '../context.ts';
-import { TextInput, ArrowButton, FormLabel, Content, Form } from '../components';
+import { Header, Content, Form, TextInput, Button, ArrowButton, FormLabel } from '../components';
 
 const LogIn = () => {
 	const pb = useContext(Pb);
@@ -12,31 +12,37 @@ const LogIn = () => {
 
 	const onSubmit = async (event: SubmitEvent) => {
 		event.preventDefault();
-		const user = await pb.collection('users').authWithPassword(email.value, password.value);
+		await pb.collection('users').authWithPassword(email.value, password.value);
 		if (pb.authStore.isValid) {
-			route('/' + user.username);
+			route('/' + pb.authStore.model.username);
 		}
 	};
 
 	return (
-		<Content>
-			<Form onSubmit={onSubmit}>
-				<h1>Log In</h1>
-				<p>
-					Don't have an account? <a href="/signup">Sign up</a>
-				</p>
-				<hr />
-				<FormLabel>
-					Email
-					<TextInput placeholder="Email" signal={email} />
-				</FormLabel>
-				<FormLabel>
-					Password
-					<TextInput type="password" placeholder="Email" signal={email} />
-				</FormLabel>
-				<ArrowButton>Continue</ArrowButton>
-			</Form>
-		</Content>
+		<>
+			<Header>
+				<Button kind="ghost" href="/play">Try Now</Button>
+				<Button kind="ghost" href="/signup">Sign Up</Button>
+			</Header>
+			<Content>
+				<Form onSubmit={onSubmit}>
+					<h1>Log In</h1>
+					<p>
+						Don't have an account? <a href="/signup">Sign up</a>
+					</p>
+					<hr />
+					<FormLabel>
+						Email
+						<TextInput placeholder="Email" signal={email} />
+					</FormLabel>
+					<FormLabel>
+						Password
+						<TextInput type="password" placeholder="Password" signal={password} />
+					</FormLabel>
+					<ArrowButton>Continue</ArrowButton>
+				</Form>
+			</Content>
+		</>
 	);
 };
 
diff --git a/src/pages/ProjectsList.tsx b/src/pages/ProjectsList.tsx
index d548aa7..324c9bd 100644
--- a/src/pages/ProjectsList.tsx
+++ b/src/pages/ProjectsList.tsx
@@ -2,7 +2,8 @@ import { useContext, useEffect } from 'preact/hooks';
 import { useSignal } from '@preact/signals';
 import { route } from 'preact-router';
 import { Pb } from '../context.ts';
-import { TextInput, Button, Form, FormLabel, ContainedList, Content } from '../components';
+import { logOut } from '../util.ts';
+import { Header, Content, ContainedList, Form, FormLabel, TextInput, Button } from '../components';
 
 const ProjectsList = ({ user }) => {
 	console.log(user);
@@ -25,27 +26,31 @@ const ProjectsList = ({ user }) => {
 		route(`/${user}/${project.name}`);
 	};
 
-	if (projects.value === null) {
-		return (
-			<p>Loading...</p>
-		);
-	}
 	return (
-		<Content>
-			<h1>{user}'s Projects</h1>
-			<Form onSubmit={onCreateProject}>
-				<FormLabel>
-					Name
-					<TextInput placeholder="Project name" signal={projectName} />
-				</FormLabel>
-				<Button>Create project</Button>
-			</Form>
-			<ContainedList>
-				{projects.value.items.map(p => (
-					<li><Button kind="ghost" href={`/${user}/${p.name}`}>{p.name}</Button></li>
-				))}
-			</ContainedList>
-		</Content>
+		<>
+			<Header>
+				<Button kind="ghost" href="/account">My Account</Button>
+				<Button kind="ghost" onClick={() => logOut(pb)}>Log Out</Button>
+			</Header>
+			<Content>
+				<h1>{user}'s Projects</h1>
+				<Form onSubmit={onCreateProject}>
+					<FormLabel>
+						Name
+						<TextInput placeholder="Project name" signal={projectName} />
+					</FormLabel>
+					<Button>Create project</Button>
+				</Form>
+				{projects.value === null
+					? <p>Loading...</p>
+					: <ContainedList>
+							{projects.value.items.map(p => (
+								<li><Button kind="ghost" href={`/${user}/${p.name}`}>{p.name}</Button></li>
+							))}
+						</ContainedList>
+				}
+			</Content>
+		</>
 	);
 };
 
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 8bdf35b..15b9f95 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -2,7 +2,7 @@ import { useContext } from 'preact/hooks';
 import { useSignal } from '@preact/signals';
 import { route } from 'preact-router';
 import { Pb } from '../context.ts';
-import { TextInput, ArrowButton, Form, FormLabel, Content } from '../components';
+import { Header, Content, Form, FormLabel, TextInput, Button, ArrowButton } from '../components';
 
 const SignUp = () => {
 	const pb = useContext(Pb);
@@ -14,7 +14,7 @@ const SignUp = () => {
 
 	const onSubmit = async (event: SubmitEvent) => {
 		event.preventDefault();
-		const user = await pb.collection('users').create({
+		await pb.collection('users').create({
 			username: username.value,
 			email: email.value,
 			emailVisibility: true,
@@ -22,37 +22,43 @@ const SignUp = () => {
 			passwordConfirm: confirm.value,
 		});
 		if (pb.authStore.isValid) {
-			route('/' + user.username);
+			route('/' + pb.authStore.model.username);
 		}
 	};
 
 	return (
-		<Content>
-			<Form onSubmit={onSubmit}>
-				<h1>Sign Up</h1>
-				<p>
-					Already have an account? <a href="/login">Log in</a>
-				</p>
-				<hr />
-				<FormLabel>
-					Username
-					<TextInput placeholder="Username" signal={username} />
-				</FormLabel>
-				<FormLabel>
-					Email
-					<TextInput placeholder="Email" signal={email} />
-				</FormLabel>
-				<FormLabel>
-					Password
-					<TextInput type="password" placeholder="Password" signal={password} />
-				</FormLabel>
-				<FormLabel>
-					Confirm password
-					<TextInput type="password" placeholder="Confirm password" signal={confirm} />
-				</FormLabel>
-				<ArrowButton>Continue</ArrowButton>
-			</Form>
-		</Content>
+		<>
+			<Header>
+				<Button kind="ghost" href="/play">Try Now</Button>
+				<Button kind="ghost" href="/login">Log In</Button>
+			</Header>
+			<Content>
+				<Form onSubmit={onSubmit}>
+					<h1>Sign Up</h1>
+					<p>
+						Already have an account? <a href="/login">Log in</a>
+					</p>
+					<hr />
+					<FormLabel>
+						Username
+						<TextInput placeholder="Username" signal={username} />
+					</FormLabel>
+					<FormLabel>
+						Email
+						<TextInput placeholder="Email" signal={email} />
+					</FormLabel>
+					<FormLabel>
+						Password
+						<TextInput type="password" placeholder="Password" signal={password} />
+					</FormLabel>
+					<FormLabel>
+						Confirm password
+						<TextInput type="password" placeholder="Confirm password" signal={confirm} />
+					</FormLabel>
+					<ArrowButton>Continue</ArrowButton>
+				</Form>
+			</Content>
+		</>
 	);
 };
 
diff --git a/src/util.ts b/src/util.ts
index 9f84ffe..f181289 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,2 +1,7 @@
-export const cls = (...classes: Array<string | false | null | undefined>) =>
-	classes.filter(c => c).join(' ');
\ No newline at end of file
+import { route } from 'preact-router';
+import PocketBase from 'pocketbase';
+
+export const logOut = (pb: PocketBase) => {
+	pb.authStore.clear();
+	route('/login');
+};
\ No newline at end of file
-- 
cgit v1.2.3