tubearchivist-frontend/tubearchivist/www/src/pages/index.tsx

62 lines
1.5 KiB
TypeScript
Raw Normal View History

import type { GetServerSideProps, GetStaticProps, NextPage } from "next";
import { signIn, signOut, useSession } from "next-auth/react";
import { dehydrate, QueryClient } from "react-query";
2022-04-03 20:04:28 +00:00
import { CustomHead } from "../components/CustomHead";
import { Layout } from "../components/Layout";
import { VideoList } from "../components/VideoList";
import { getVideos } from "../lib/getVideos";
import { Videos } from "../types/video";
type HomeProps = {
videos: Videos;
imagePlaceholders?: string[];
};
2022-04-03 00:27:33 +00:00
const SignInOutButton = ({ isSignedIn }: { isSignedIn: boolean }) => {
if (isSignedIn) {
return <button onClick={() => signOut()}>Sign Out</button>;
}
return <button onClick={() => signIn()}>Sign in</button>;
};
const Home: NextPage<HomeProps> = () => {
const { data: session, status } = useSession();
2022-04-03 00:27:33 +00:00
const authData = {
session,
status,
};
return (
<>
2022-04-03 20:04:28 +00:00
<CustomHead />
<Layout>
<VideoList />
2022-04-03 00:27:33 +00:00
<SignInOutButton isSignedIn={!!session?.user} />
</Layout>
</>
);
};
export default Home;
// http://localhost:8000/cache/videos/3/37Kn-kIsVu8.jpg
// export const getServerSideProps: GetServerSideProps = async (ctx) => {
// const videos = await getVideos();
// return { props: { videos } };
// };
export const getStaticProps: GetStaticProps = async () => {
const queryClient = new QueryClient();
await queryClient.prefetchQuery("videos", getVideos);
return {
props: {
dehydratedState: dehydrate(queryClient),
},
};
};