From 18387e2dde2a7dd4f56b2c93fbd3fe17c2f32e98 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 9 Feb 2023 03:28:55 +0330 Subject: [PATCH] Route handling + Added main layout. --- components/Collections.tsx | 4 +-- components/Layouts/MainLayout.tsx | 51 +++++++++++++++++++++++++++++++ components/Loader.tsx | 7 +++++ components/Navbar.tsx | 3 ++ components/Sidebar.tsx | 13 ++++++++ hooks/useRedirection.tsx | 30 ++++++++++++++++++ middleware.ts | 3 -- pages/_app.tsx | 11 +++---- pages/dashboard.tsx | 8 +---- pages/login.tsx | 18 ++--------- pages/register.tsx | 15 ++------- 11 files changed, 117 insertions(+), 46 deletions(-) create mode 100644 components/Layouts/MainLayout.tsx create mode 100644 components/Loader.tsx create mode 100644 components/Navbar.tsx create mode 100644 components/Sidebar.tsx create mode 100644 hooks/useRedirection.tsx delete mode 100644 middleware.ts diff --git a/components/Collections.tsx b/components/Collections.tsx index bef54a4..a1b936a 100644 --- a/components/Collections.tsx +++ b/components/Collections.tsx @@ -16,9 +16,9 @@ export default function Collections() { return (
- {collections.map((e) => { + {collections.map((e, i) => { return ( -
+

{e.name}

); diff --git a/components/Layouts/MainLayout.tsx b/components/Layouts/MainLayout.tsx new file mode 100644 index 0000000..5b28d73 --- /dev/null +++ b/components/Layouts/MainLayout.tsx @@ -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 ( + <> + + Linkwarden + + + +
+ +
+ + {children} +
+
+ + ); + else if ((status === "unauthenticated" && !redirection) || !routeExists) + return ( + <> + + Linkwarden + + + + {children} + + ); + else return ; +} diff --git a/components/Loader.tsx b/components/Loader.tsx new file mode 100644 index 0000000..f41c4d5 --- /dev/null +++ b/components/Loader.tsx @@ -0,0 +1,7 @@ +export default function Loader() { + return ( +
+

Loading...

+
+ ); +} diff --git a/components/Navbar.tsx b/components/Navbar.tsx new file mode 100644 index 0000000..17e7836 --- /dev/null +++ b/components/Navbar.tsx @@ -0,0 +1,3 @@ +export default function Navbar() { + return
Navbar
; +} diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx new file mode 100644 index 0000000..54f073e --- /dev/null +++ b/components/Sidebar.tsx @@ -0,0 +1,13 @@ +import { useSession } from "next-auth/react"; + +export default function Sidebar() { + const { data: session, status } = useSession(); + + const user = session?.user; + + return ( +
+

{user?.name}

+
+ ); +} diff --git a/hooks/useRedirection.tsx b/hooks/useRedirection.tsx new file mode 100644 index 0000000..f5d91ba --- /dev/null +++ b/hooks/useRedirection.tsx @@ -0,0 +1,30 @@ +import { ReactNode, useEffect, useState } from "react"; +import { useSession } from "next-auth/react"; +import { useRouter } from "next/router"; + +export default function useRedirection() { + const router = useRouter(); + const { status } = useSession(); + const [redirect, setRedirect] = useState(true); + + useEffect(() => { + if ( + status === "authenticated" && + (router.pathname === "/login" || router.pathname === "/register") + ) { + router.push("/").then(() => { + setRedirect(false); + }); + } else if ( + status === "unauthenticated" && + !(router.pathname === "/login" || router.pathname === "/register") + ) { + router.push("/login").then(() => { + setRedirect(false); + }); + } else if (status === "loading") setRedirect(true); + else setRedirect(false); + }, [status]); + + return redirect; +} diff --git a/middleware.ts b/middleware.ts deleted file mode 100644 index 0f4fc8c..0000000 --- a/middleware.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default } from "next-auth/middleware"; - -export const config = { matcher: ["/", "/dashboard"] }; diff --git a/pages/_app.tsx b/pages/_app.tsx index cfb9630..4101ff0 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,17 +1,14 @@ +import MainLayout from "@/components/Layouts/MainLayout"; import "@/styles/globals.css"; import { SessionProvider } from "next-auth/react"; import type { AppProps } from "next/app"; -import Head from "next/head"; export default function App({ Component, pageProps }: AppProps) { return ( - - Linkwarden - - - - + + + ); } diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 5a255a1..6a953c9 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -6,15 +6,9 @@ export default function Dashboard() { const user = session?.user; - console.log(); return (
-
-

Linkwarden

-
-
-

Welcome {user?.name?.toLocaleUpperCase()}!

-
+

Linkwarden

); diff --git a/pages/login.tsx b/pages/login.tsx index f4d568a..7b499a7 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -1,8 +1,6 @@ import { signIn } from "next-auth/react"; import Link from "next/link"; -import { useEffect, useState } from "react"; -import { useSession } from "next-auth/react"; -import { useRouter } from "next/router"; +import { useState } from "react"; interface FormData { email: string; @@ -10,16 +8,6 @@ interface FormData { } export default function Login() { - const session = useSession(); - const router = useRouter(); - - useEffect(() => { - if (session.status === "authenticated") { - console.log("Already logged in."); - router.push("/"); - } - }, []); - const [form, setForm] = useState({ email: "", password: "", @@ -40,7 +28,7 @@ export default function Login() { password: "", }); - router.push("/"); + // router.push("/"); } else { console.log("User not found or password does not match.", res); } @@ -72,7 +60,7 @@ export default function Login() { > Login
- + Register
diff --git a/pages/register.tsx b/pages/register.tsx index de5aa6f..2da7f4a 100644 --- a/pages/register.tsx +++ b/pages/register.tsx @@ -1,6 +1,5 @@ import Link from "next/link"; -import { useEffect, useState } from "react"; -import { useSession } from "next-auth/react"; +import { useState } from "react"; import { useRouter } from "next/router"; interface FormData { @@ -10,16 +9,8 @@ interface FormData { } export default function Register() { - const session = useSession(); const router = useRouter(); - useEffect(() => { - if (session.status === "authenticated") { - console.log("Already logged in."); - router.push("/"); - } - }, [session]); - const [form, setForm] = useState({ name: "", email: "", @@ -51,7 +42,7 @@ export default function Register() { password: "", }); - router.push("/auth/login"); + router.push("/login"); } } else { console.log("Please fill out all the fields."); @@ -88,7 +79,7 @@ export default function Register() { > Register - + Login