src/index.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import { render } from 'preact';
import { useEffect, useMemo } from 'preact/hooks';
import { Router } from 'preact-router';
import PocketBase from 'pocketbase';
import { Pb } from './pb.ts';
import { Home, SignUp, LogIn, ProjectsList } from './pages';
import { NodeEditor } from './NodeEditor.tsx';
import './index.css';

export const App = () => {
	const pb = useMemo(() => new PocketBase(`https://${window.location.hostname}:8080/`));
	return (
		<Pb.Provider value={pb}>
			<header>
				<a class="title action" href="/">DataNodes</a>
				<nav>
					<a class="action" href="/login">Log In</a>
					<a class="action" href="/signup">Sign Up</a>
				</nav>
			</header>
			<Router>
				<Home path="/" />
				<SignUp path="/signup" />
				<LogIn path="/login" />
				<ProjectsList path="/:user" />
				<NodeEditor path="/:user/:project" />
			</Router>
		</Pb.Provider>
	);
};

render(<App />, document.body);