From 7c6f21081f0eb68b769ef6626137660a5a730791 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Mon, 7 Apr 2025 17:06:08 +0300
Subject: [PATCH] feat: 404 page

---
 src/app.tsx               | 11 +++++++----
 src/pages/404.module.scss |  9 +++++++++
 src/pages/404.tsx         | 30 ++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/404.module.scss
 create mode 100644 src/pages/404.tsx

diff --git a/src/app.tsx b/src/app.tsx
index 03fabaf..b510aae 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,13 +1,16 @@
 import { FunctionComponent } from "preact";
 import { ErrorBoundary, lazy, LocationProvider, Route, Router, useLocation } from "preact-iso";
 import "preact/debug";
+import Page404 from "./pages/404";
 import LoginPage from "./pages/login";
-import { AppProvider } from "./providers/AuthProvider";
+import { AppProvider, useAppContext } from "./providers/AuthProvider";
 
 const HomePage: FunctionComponent = () => {
   const { route } = useLocation();
-  route("/login");
-  return <div>Redirecting to login...</div>;
+  const { isLoggedIn } = useAppContext();
+  if (isLoggedIn) route("/profile/tasks", true);
+  else route("/login", true);
+  return <div>Redirecting...</div>;
 };
 
 export function App() {
@@ -19,7 +22,7 @@ export function App() {
             <Route path="/" component={HomePage} />
             <Route path="/login" component={LoginPage} />
             <Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
-            <Route default component={() => <h1>404</h1>} />
+            <Route default component={() => <Page404 />} />
           </Router>
         </ErrorBoundary>
       </LocationProvider>
diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss
new file mode 100644
index 0000000..f6ce9f3
--- /dev/null
+++ b/src/pages/404.module.scss
@@ -0,0 +1,9 @@
+@reference "../index.scss";
+
+#container {
+  @apply flex h-screen w-full flex-col items-center justify-center;
+}
+
+#main_container {
+  @apply flex flex-col items-center gap-8;
+}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 0000000..1bfe437
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,30 @@
+import Button from "@/components/ui/Button";
+import { UrlsTitle } from "@/enums/urls";
+import { FunctionComponent } from "preact";
+import { useLocation } from "preact-iso";
+import { useEffect } from "preact/hooks";
+import classes from "./404.module.scss";
+
+const Page404: FunctionComponent = () => {
+  const { route } = useLocation();
+  useEffect(() => {
+    document.title = UrlsTitle.PAGE404;
+  }, []);
+  return (
+    <div id={classes.container}>
+      <div id={classes.main_container}>
+        <p class="text-6xl font-semibold">404</p>
+        <Button
+          onClick={() => {
+            route("/", true);
+          }}
+          color="secondary"
+        >
+          На главную
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Page404;