diff --git a/client/package.json b/client/package.json index 0a61aa98..cf6ce614 100644 --- a/client/package.json +++ b/client/package.json @@ -12,9 +12,11 @@ "@fec/remark-a11y-emoji": "^3.1.0", "@geist-ui/core": "^2.3.5", "@geist-ui/icons": "^1.0.1", + "@types/cookie": "^0.4.1", "@types/js-cookie": "^3.0.1", "client-zip": "^2.0.0", "comlink": "^4.3.1", + "cookie": "^0.4.2", "dotenv": "^16.0.0", "js-cookie": "^3.0.1", "next": "12.1.0", diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx index 91888263..d3bf55d3 100644 --- a/client/pages/_app.tsx +++ b/client/pages/_app.tsx @@ -13,6 +13,12 @@ export type ThemeProps = { changeTheme: () => void } +export type PostProps = { + renderedPost: any | null, // Still don't have an official data type for posts + theme: "light" | "dark" | string, + changeTheme: () => void +} + type AppProps

= { pageProps: P; } & Omit, "pageProps">; diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx index 0bd32738..cddf7947 100644 --- a/client/pages/post/[id].tsx +++ b/client/pages/post/[id].tsx @@ -6,13 +6,16 @@ import { useEffect, useState } from "react"; import Document from '../../components/document' import Header from "../../components/header"; import VisibilityBadge from "../../components/visibility-badge"; -import { ThemeProps } from "../_app"; +import { PostProps } from "../_app"; import PageSeo from "components/page-seo"; import styles from './styles.module.css'; import Cookies from "js-cookie"; +import cookie from "cookie"; +import { GetServerSideProps } from "next"; -const Post = ({ theme, changeTheme }: ThemeProps) => { - const [post, setPost] = useState() + +const Post = ({renderedPost, theme, changeTheme}: PostProps) => { + const [post, setPost] = useState(renderedPost); const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState() const router = useRouter(); @@ -20,29 +23,18 @@ const Post = ({ theme, changeTheme }: ThemeProps) => { useEffect(() => { async function fetchPost() { setIsLoading(true); - if (router.query.id) { - const post = await fetch(`/server-api/posts/${router.query.id}`, { - method: "GET", - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${Cookies.get("drift-token")}` - } - }) - if (post.ok) { - const res = await post.json() - if (res) - setPost(res) - else - setError("Post not found") - } else { - if (post.status.toString().startsWith("4")) { - router.push("/signin") - } else { - setError(post.statusText) - } - } + if (renderedPost) { + setPost(renderedPost) setIsLoading(false) + + return; + } + + if (!Cookies.get('drift-token')) { + router.push('/signin'); + } else { + setError('Something went wrong fetching the post'); } } fetchPost() @@ -111,4 +103,36 @@ const Post = ({ theme, changeTheme }: ThemeProps) => { ) } +export const getServerSideProps: GetServerSideProps = async (context) => { + + const headers = context.req.headers; + const host = headers.host; + const driftToken = cookie.parse(headers.cookie || '')[`drift-token`]; + + let post; + + if (context.query.id) { + post = await fetch('http://' + host + `/server-api/posts/${context.query.id}`, { + method: "GET", + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${driftToken}` + } + }); + + try { + post = await post.json(); + } catch (e) { + console.log(e); + post = null; + } + } + + return { + props: { + renderedPost: post + } + } +} + export default Post diff --git a/client/yarn.lock b/client/yarn.lock index 5c3bd26b..2ba24293 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -161,6 +161,11 @@ resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz#7f698254aadf921e48dda8c0a6b304026b8a9323" integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A== +"@types/cookie@^0.4.1": + version "0.4.1" + resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d" + integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q== + "@types/debug@^4.0.0": version "4.1.7" resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82" @@ -532,6 +537,11 @@ concat-map@0.0.1: resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= +cookie@^0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432" + integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA== + core-js-pure@^3.20.2: version "3.21.1" resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.21.1.tgz#8c4d1e78839f5f46208de7230cebfb72bc3bdb51"