info page

client/src/components/nav.tsx

@@ -0,0 +1,67 @@
+import { h } from 'preact';
+import { route } from 'preact-router';
+import { useEffect } from 'preact/hooks';
+import { useSelector, useDispatch } from 'react-redux'
+
+import http from './../http';
+import { State, userState } from './../store';
+
+function showAdmin(user) {
+    return user && user.email === 'ntr@mnml.gg';
+}
+
+const DEFAULT_ROUTE = '/info';
+
+const Nav = () => {
+    const dispatch = useDispatch()
+    const user = useSelector((state: State) => state.user);
+
+    useEffect(() => {
+        if (!user) route('/login');
+        route(DEFAULT_ROUTE)
+    }, [user])
+
+    async function logoutClick(e) {
+        e.preventDefault();
+        await http.postLogout();
+        window.location.reload();
+    }
+
+    const nav = () => (
+        <nav>
+            <a href="/">Offers</a>
+            <a href='/list'>List</a>
+            <a href="/search">Search</a>
+        </nav>
+    );
+
+    const anonNav = () => (
+        <nav>
+            <a href="/login">Login</a>
+            <a href="/register">Register</a>
+        </nav>
+    );
+
+    const adminNav = () => (
+        <nav>
+            <a href='/offers/acp'>Offers ACP</a>
+        </nav>
+    )
+
+    const userNav = () => (
+        <nav>
+            <a href="/info">Info</a>
+            <a href="/auth/logout" onClick={logoutClick}>Logout</a>
+        </nav>
+    )
+
+    return (
+        <header>
+            {user ? nav() : anonNav()}
+            {showAdmin(user) ? adminNav() : <div></div>}
+            {user ? userNav() : null}
+        </header>
+    );
+}
+
+export default Nav;