feat: some profile page upgrades

src/app.tsx

@@ -1,8 +1,8 @@
 import { FunctionComponent } from "preact";
-import { ErrorBoundary, LocationProvider, Route, Router, useLocation } from "preact-iso";
+import { ErrorBoundary, lazy, LocationProvider, Route, Router, useLocation } from "preact-iso";
 import "preact/debug";
 import LoginPage from "./pages/login";
-import ProfilePage from "./pages/profile";
+import { AppProvider } from "./providers/AuthProvider";
 
 const HomePage: FunctionComponent = () => {
   const location = useLocation();
@@ -12,14 +12,17 @@ const HomePage: FunctionComponent = () => {
 
 export function App() {
   return (
-    <LocationProvider>
-      <ErrorBoundary>
-        <Router>
-          <Route path="/" component={HomePage} />
-          <Route path="/login" component={LoginPage} />
-          <Route path="/profile" component={ProfilePage} />
-        </Router>
-      </ErrorBoundary>
-    </LocationProvider>
+    <AppProvider>
+      <LocationProvider>
+        <ErrorBoundary>
+          <Router>
+            <Route path="/" component={HomePage} />
+            <Route path="/login" component={LoginPage} />
+            <Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
+            <Route default component={() => <h1>404</h1>} />
+          </Router>
+        </ErrorBoundary>
+      </LocationProvider>
+    </AppProvider>
   );
 }

src/components/layout.tsx

@@ -1,13 +0,0 @@
-import { FunctionComponent } from "preact";
-import Menu from "./menu";
-
-const Layout: FunctionComponent = (props) => {
-  return (
-    <div class="flex min-w-screen flex-row justify-between">
-      {props.children}
-      <Menu />
-    </div>
-  );
-};
-
-export default Layout;

src/pages/login.tsx

@@ -1,14 +1,25 @@
 import Button from "@/components/ui/Button";
 import Input from "@/components/ui/Input";
+import { useAppContext } from "@/providers/AuthProvider";
 import { FunctionComponent } from "preact";
+import { useLocation } from "preact-iso";
 import classes from "./login.module.scss";
 const LoginPage: FunctionComponent = () => {
+  const { isLoggedIn } = useAppContext();
+  const location = useLocation();
   return (
     <div class={classes.login_container}>
       <div class={classes.login_card}>
         <Input placeholder="Login" textAlign="center" />
         <Input isPassword placeholder="Password" textAlign="center" />
-        <Button onClick={() => {}}>Login</Button>
+        <Button
+          onClick={() => {
+            isLoggedIn.value = true;
+            location.route("/profile/settings");
+          }}
+        >
+          Login
+        </Button>
       </div>
     </div>
   );

src/pages/profile.tsx

@@ -1,11 +1,26 @@
-import Layout from "@/components/layout";
+import Menu from "@/components/menu";
 import { FunctionComponent } from "preact";
+import { Route, Router, useLocation } from "preact-iso";
 
 const ProfilePage: FunctionComponent = () => {
+  const { route } = useLocation();
   return (
-    <Layout>
-      <p>Profile</p>
-    </Layout>
+    <div class="flex min-w-screen flex-row justify-between">
+      <div class="w-full overflow-x-auto">
+        <Router>
+          <Route path="/settings" component={() => <h1>Test</h1>} />
+          <Route path="/tasks" component={() => <h1>Test2</h1>} />
+          <Route
+            default
+            component={() => {
+              route("/profile/settings", true);
+              return null;
+            }}
+          />
+        </Router>
+      </div>
+      <Menu />
+    </div>
   );
 };