2022-03-29 17:19:24 +00:00
|
|
|
import type { NextPage } from "next";
|
|
|
|
|
import { signIn, signOut, useSession } from "next-auth/react";
|
2022-04-03 00:27:33 +00:00
|
|
|
import dynamic from "next/dynamic";
|
2022-03-29 17:19:24 +00:00
|
|
|
import Head from "next/head";
|
2022-04-03 00:27:33 +00:00
|
|
|
import { Suspense } from "react";
|
|
|
|
|
|
|
|
|
|
const DynamicHeader = dynamic(() => import("../components/Header"), {
|
|
|
|
|
suspense: true,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const SignInOutButton = ({ isSignedIn }: { isSignedIn: boolean }) => {
|
|
|
|
|
if (isSignedIn) {
|
|
|
|
|
return <button onClick={() => signOut()}>Sign Out</button>;
|
|
|
|
|
}
|
|
|
|
|
return <button onClick={() => signIn()}>Sign in</button>;
|
|
|
|
|
};
|
2022-03-29 17:19:24 +00:00
|
|
|
|
|
|
|
|
const Home: NextPage = () => {
|
|
|
|
|
const { data: session, status } = useSession();
|
2022-04-03 00:27:33 +00:00
|
|
|
const authData = {
|
|
|
|
|
session,
|
|
|
|
|
status,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
console.log(status);
|
2022-03-29 17:19:24 +00:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Tube Archivist</title>
|
|
|
|
|
<meta name="description" content="Generated by create next app" />
|
|
|
|
|
<link rel="icon" href="/favicon/favicon.ico" />
|
|
|
|
|
</Head>
|
|
|
|
|
|
2022-04-03 00:27:33 +00:00
|
|
|
<Suspense fallback={<h1>Loading</h1>}>
|
|
|
|
|
<DynamicHeader authData={authData} />
|
|
|
|
|
</Suspense>
|
2022-03-29 17:19:24 +00:00
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
style={{
|
|
|
|
|
display: "flex",
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
maxWidth: "100px",
|
|
|
|
|
}}
|
|
|
|
|
>
|
2022-04-03 00:27:33 +00:00
|
|
|
<SignInOutButton isSignedIn={!!session?.user} />
|
2022-03-29 17:19:24 +00:00
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Home;
|
