client: delete protected/ dir and SSG homepage again, but with graceful fallback (#107)

client/pages/index.tsx

@@ -2,9 +2,17 @@ import styles from "@styles/Home.module.css"
 import PageSeo from "@components/page-seo"
 import HomeComponent from "@components/home"
 import { Page, Text } from "@geist-ui/core"
-import { GetServerSideProps } from "next"
+import type { GetStaticProps } from "next"
+import { InferGetStaticPropsType } from 'next'
+type Props = {
+	introContent: string
+	introTitle: string
+	rendered: string
+} | {
+	error: boolean
+}
 
-export const getServerSideProps: GetServerSideProps = async ({ res }) => {
+export const getStaticProps: GetStaticProps = async () => {
 	try {
 		const resp = await fetch(process.env.API_URL + `/welcome`, {
 			method: "GET",
@@ -15,36 +23,30 @@ export const getServerSideProps: GetServerSideProps = async ({ res }) => {
 		})
 
 		const { title, content, rendered } = await resp.json()
-
-		res.setHeader(
-			"Cache-Control",
-			`public, s-maxage=${60 * 60 * 24 * 360}, max-age=${60 * 60 * 24 * 360}`
-		)
-
 		return {
 			props: {
 				introContent: content || null,
 				rendered: rendered || null,
 				introTitle: title || null
-			}
+			},
+			// Next.js will attempt to re-generate the page:
+			// - When a request comes in
+			// - At most every 60 seconds
+			revalidate: 60, // In seconds
 		}
-	} catch (error) {
+	} catch (err) {
+		// If there was an error, it's likely due to the server not running, so we attempt to regenerate the page
 		return {
 			props: {
-				error: true
-			}
+				error: true,
+			},
+			revalidate: 10, // In seconds
 		}
 	}
 }
 
-type Props = {
-	introContent: string
-	introTitle: string
-	rendered: string
-	error?: boolean
-}
-
-const Home = ({ rendered, introContent, introTitle, error }: Props) => {
+// TODO: fix props type
+const Home = ({ rendered, introContent, introTitle, error }: InferGetStaticPropsType<typeof getStaticProps>) => {
 	return (
 		<Page className={styles.wrapper}>
 			<PageSeo />

client/pages/post/protected/[id].tsx

@@ -1,92 +0,0 @@
-import { Page, useToasts } from "@geist-ui/core"
-
-import type { Post } from "@lib/types"
-import PasswordModal from "@components/new-post/password-modal"
-import { useEffect, useState } from "react"
-import { useRouter } from "next/router"
-import Cookies from "js-cookie"
-import PostPage from "@components/post-page"
-
-const Post = () => {
-	const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(true)
-	const [post, setPost] = useState<Post>()
-	const router = useRouter()
-	const { setToast } = useToasts()
-
-	useEffect(() => {
-		if (router.isReady) {
-			const fetchPostWithAuth = async () => {
-				const resp = await fetch(`/server-api/posts/${router.query.id}`, {
-					headers: {
-						Authorization: `Bearer ${Cookies.get("drift-token")}`
-					}
-				})
-				if (!resp.ok) return
-				const post = await resp.json()
-
-				if (!post) return
-				setPost(post)
-			}
-			fetchPostWithAuth()
-		}
-	}, [router.isReady, router.query.id])
-
-	const onSubmit = async (password: string) => {
-		const res = await fetch(
-			`/server-api/posts/${router.query.id}?password=${password}`,
-			{
-				method: "GET",
-				headers: {
-					"Content-Type": "application/json"
-				}
-			}
-		)
-
-		if (!res.ok) {
-			setToast({
-				type: "error",
-				text: "Wrong password"
-			})
-			return
-		}
-
-		const data = await res.json()
-		if (data) {
-			if (data.error) {
-				setToast({
-					text: data.error,
-					type: "error"
-				})
-			} else {
-				setPost(data)
-				setIsPasswordModalOpen(false)
-			}
-		}
-	}
-
-	const onClose = () => {
-		setIsPasswordModalOpen(false)
-		router.push("/")
-	}
-
-	if (!router.isReady) {
-		return <></>
-	}
-
-	if (!post) {
-		return (
-			<Page>
-				<PasswordModal
-					creating={false}
-					onClose={onClose}
-					onSubmit={onSubmit}
-					isOpen={isPasswordModalOpen}
-				/>
-			</Page>
-		)
-	}
-
-	return <PostPage post={post} />
-}
-
-export default Post