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

This commit is contained in:
Max Leiter 2022-04-19 18:05:21 -07:00 committed by GitHub
parent 57cded29c3
commit 265f7b6161
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 112 deletions

View file

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

View file

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