Route handling + Added main layout.

2023-02-09 03:28:55 +03:30
parent 0bf1ec0d2a
commit 18387e2dde
11 changed files with 117 additions and 46 deletions
@@ -16,9 +16,9 @@ export default function Collections() {

  return (
    <div className="flex flex-wrap">
-      {collections.map((e) => {
+      {collections.map((e, i) => {
        return (
-          <div className="p-5 bg-gray-100 m-2 w-max ">
+          <div className="p-5 bg-gray-100 m-2 w-max " key={i}>
            <p>{e.name}</p>
          </div>
        );
@@ -0,0 +1,51 @@
+import Head from "next/head";
+import Navbar from "@/components/Navbar";
+import Sidebar from "@/components/Sidebar";
+import { ReactNode } from "react";
+import { useSession } from "next-auth/react";
+import Loader from "../Loader";
+import useRedirection from "@/hooks/useRedirection";
+import { useRouter } from "next/router";
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  const { status } = useSession();
+  const router = useRouter();
+
+  const redirection = useRedirection();
+
+  const routeExists = router.route === "/_error" ? false : true;
+
+  if (status === "authenticated" && !redirection && routeExists)
+    return (
+      <>
+        <Head>
+          <title>Linkwarden</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+        <div className="flex">
+          <Sidebar />
+          <div className="ml-80">
+            <Navbar />
+            {children}
+          </div>
+        </div>
+      </>
+    );
+  else if ((status === "unauthenticated" && !redirection) || !routeExists)
+    return (
+      <>
+        <Head>
+          <title>Linkwarden</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+        {children}
+      </>
+    );
+  else return <Loader />;
+}
@@ -0,0 +1,7 @@
+export default function Loader() {
+  return (
+    <div>
+      <p>Loading...</p>
+    </div>
+  );
+}
@@ -0,0 +1,3 @@
+export default function Navbar() {
+  return <div>Navbar</div>;
+}
@@ -0,0 +1,13 @@
+import { useSession } from "next-auth/react";
+
+export default function Sidebar() {
+  const { data: session, status } = useSession();
+
+  const user = session?.user;
+
+  return (
+    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80">
+      <p>{user?.name}</p>
+    </div>
+  );
+}