- {collections.map((e) => {
+ {collections.map((e, i) => {
return (
-
+
);
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
+
+
+
+
+
+ );
+ 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 (
+
+ );
+}
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 (
+
+ );
+}
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 (
-
-
-
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