xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

Route handling + Added main layout.

This commit is contained in:
Daniel 2023-02-09 03:28:55 +03:30
parent 0bf1ec0d2a
commit 18387e2dde
11 changed files with 117 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Collections.tsx
View File

@ -16,9 +16,9 @@ export default function Collections() {
return ( return (
<div className="flex flex-wrap"> <div className="flex flex-wrap">
{collections.map((e) => { {collections.map((e, i) => {
return ( 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> <p>{e.name}</p>
</div> </div>
); );

51
components/Layouts/MainLayout.tsx Normal file
View File

@ -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 />;
}

7
components/Loader.tsx Normal file
View File

@ -0,0 +1,7 @@
export default function Loader() {
return (
<div>
<p>Loading...</p>
</div>
);
}

3
components/Navbar.tsx Normal file
View File

@ -0,0 +1,3 @@
export default function Navbar() {
return <div>Navbar</div>;
}

13
components/Sidebar.tsx Normal file
View File

@ -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>
);
}

30
hooks/useRedirection.tsx Normal file
View File

@ -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;
}

3
middleware.ts
View File

@ -1,3 +0,0 @@
export { default } from "next-auth/middleware";
export const config = { matcher: ["/", "/dashboard"] };

9
pages/_app.tsx
View File

@ -1,17 +1,14 @@
import MainLayout from "@/components/Layouts/MainLayout";
import "@/styles/globals.css"; import "@/styles/globals.css";
import { SessionProvider } from "next-auth/react"; import { SessionProvider } from "next-auth/react";
import type { AppProps } from "next/app"; import type { AppProps } from "next/app";
import Head from "next/head";
export default function App({ Component, pageProps }: AppProps) { export default function App({ Component, pageProps }: AppProps) {
return ( return (
<SessionProvider session={pageProps.session}> <SessionProvider session={pageProps.session}>
<Head> <MainLayout>
<title>Linkwarden</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} /> <Component {...pageProps} />
</MainLayout>
</SessionProvider> </SessionProvider>
); );
} }

6
pages/dashboard.tsx
View File

@ -6,15 +6,9 @@ export default function Dashboard() {
const user = session?.user; const user = session?.user;
console.log();
return ( return (
<div className="p-5"> <div className="p-5">
<div>
<p className="text-3xl font-bold text-center mb-10">Linkwarden</p> <p className="text-3xl font-bold text-center mb-10">Linkwarden</p>
</div>
<div>
<p>Welcome {user?.name?.toLocaleUpperCase()}!</p>
</div>
<Collections /> <Collections />
</div> </div>
); );

18
pages/login.tsx
View File

@ -1,8 +1,6 @@
import { signIn } from "next-auth/react"; import { signIn } from "next-auth/react";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import { useState } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
interface FormData { interface FormData {
email: string; email: string;
@ -10,16 +8,6 @@ interface FormData {
} }
export default function Login() { 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<FormData>({ const [form, setForm] = useState<FormData>({
email: "", email: "",
password: "", password: "",
@ -40,7 +28,7 @@ export default function Login() {
password: "", password: "",
}); });
router.push("/"); // router.push("/");
} else { } else {
console.log("User not found or password does not match.", res); console.log("User not found or password does not match.", res);
} }
@ -72,7 +60,7 @@ export default function Login() {
> >
Login Login
</div> </div>
<Link href={"/auth/register"} className="block mx-auto w-min"> <Link href={"/register"} className="block mx-auto w-min">
Register Register
</Link> </Link>
</div> </div>

15
pages/register.tsx
View File

@ -1,6 +1,5 @@
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import { useState } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
interface FormData { interface FormData {
@ -10,16 +9,8 @@ interface FormData {
} }
export default function Register() { export default function Register() {
const session = useSession();
const router = useRouter(); const router = useRouter();
useEffect(() => {
if (session.status === "authenticated") {
console.log("Already logged in.");
router.push("/");
}
}, [session]);
const [form, setForm] = useState<FormData>({ const [form, setForm] = useState<FormData>({
name: "", name: "",
email: "", email: "",
@ -51,7 +42,7 @@ export default function Register() {
password: "", password: "",
}); });
router.push("/auth/login"); router.push("/login");
} }
} else { } else {
console.log("Please fill out all the fields."); console.log("Please fill out all the fields.");
@ -88,7 +79,7 @@ export default function Register() {
> >
Register Register
</div> </div>
<Link href={"/auth/login"} className="block mx-auto w-min"> <Link href={"/login"} className="block mx-auto w-min">
Login Login
</Link> </Link>
</div> </div>