From 79a8f498c59ad0d8b0de456574c4a7ce4b4e8ce7 Mon Sep 17 00:00:00 2001 From: Anton <62949848+icepaq@users.noreply.github.com> Date: Tue, 15 Mar 2022 22:49:41 -0400 Subject: [PATCH 1/6] render posts server side --- client/package.json | 2 ++ client/pages/_app.tsx | 6 ++++++ client/pages/post/[id].tsx | 42 ++++++++++++++++++++++++++++++++++++-- client/yarn.lock | 10 +++++++++ 4 files changed, 58 insertions(+), 2 deletions(-) diff --git a/client/package.json b/client/package.json index 59fa0b18..0d194d17 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 115b69fb..edfebf5c 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 Head from "next/head"; 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 = ({renderedPost, theme, changeTheme}: PostProps) => { const [post, setPost] = useState() const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState() @@ -21,6 +24,14 @@ const Post = ({ theme, changeTheme }: ThemeProps) => { useEffect(() => { async function fetchPost() { setIsLoading(true); + + if (renderedPost) { + console.log('Using Server Side Post'); + setPost(renderedPost) + setIsLoading(false) + return; + } + if (router.query.id) { const post = await fetch(`/server-api/posts/${router.query.id}`, { method: "GET", @@ -108,4 +119,31 @@ 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}` + } + }).then(res => res.json()); + + console.log(post); + } + + return { + props: { + renderedPost: post + } + } +} + export default Post diff --git a/client/yarn.lock b/client/yarn.lock index 28d7f557..1286cb15 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" From 7364eb668bbe6f5ff8642b8f03394fa854f013a0 Mon Sep 17 00:00:00 2001 From: Anton <62949848+icepaq@users.noreply.github.com> Date: Wed, 16 Mar 2022 18:54:04 -0400 Subject: [PATCH 2/6] remove client side post fetch --- client/pages/post/[id].tsx | 29 +++++------------------------ 1 file changed, 5 insertions(+), 24 deletions(-) diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx index edfebf5c..f3a2da33 100644 --- a/client/pages/post/[id].tsx +++ b/client/pages/post/[id].tsx @@ -26,35 +26,16 @@ const Post = ({renderedPost, theme, changeTheme}: PostProps) => { setIsLoading(true); if (renderedPost) { - console.log('Using Server Side Post'); setPost(renderedPost) setIsLoading(false) + return; } - 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) - } - } - setIsLoading(false) + if (post.status.toString().startsWith("4")) { + router.push("/signin") + } else { + setError(post.statusText) } } fetchPost() From ac9027c522d4ac3f23a9bf69a51148cda3ac5c08 Mon Sep 17 00:00:00 2001 From: Anton <62949848+icepaq@users.noreply.github.com> Date: Wed, 16 Mar 2022 18:57:40 -0400 Subject: [PATCH 3/6] fix wrong post check --- client/pages/post/[id].tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx index f3a2da33..2e5d69ad 100644 --- a/client/pages/post/[id].tsx +++ b/client/pages/post/[id].tsx @@ -25,17 +25,17 @@ const Post = ({renderedPost, theme, changeTheme}: PostProps) => { async function fetchPost() { setIsLoading(true); - if (renderedPost) { + if (renderedPost.ok) { setPost(renderedPost) setIsLoading(false) return; } - if (post.status.toString().startsWith("4")) { + if (renderedPost.status.toString().startsWith("4")) { router.push("/signin") } else { - setError(post.statusText) + setError(renderedPost.statusText) } } fetchPost() From 3ac9cbcf4e57696442c2af2f63dc3b285810f4a8 Mon Sep 17 00:00:00 2001 From: Anton <62949848+icepaq@users.noreply.github.com> Date: Wed, 16 Mar 2022 18:58:43 -0400 Subject: [PATCH 4/6] remove console.log --- client/pages/post/[id].tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx index 2e5d69ad..b523d688 100644 --- a/client/pages/post/[id].tsx +++ b/client/pages/post/[id].tsx @@ -116,8 +116,6 @@ export const getServerSideProps: GetServerSideProps = async (context) => { "Authorization": `Bearer ${driftToken}` } }).then(res => res.json()); - - console.log(post); } return { From e646df43f2c0c2791da1c49d34812887af80dd3b Mon Sep 17 00:00:00 2001 From: Anton <62949848+icepaq@users.noreply.github.com> Date: Wed, 16 Mar 2022 19:21:22 -0400 Subject: [PATCH 5/6] clean up post check --- client/pages/post/[id].tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx index b523d688..374130f7 100644 --- a/client/pages/post/[id].tsx +++ b/client/pages/post/[id].tsx @@ -25,17 +25,17 @@ const Post = ({renderedPost, theme, changeTheme}: PostProps) => { async function fetchPost() { setIsLoading(true); - if (renderedPost.ok) { + if (renderedPost) { setPost(renderedPost) setIsLoading(false) return; } - if (renderedPost.status.toString().startsWith("4")) { - router.push("/signin") + if (!Cookies.get('drift-token')) { + router.push('/signin'); } else { - setError(renderedPost.statusText) + setError('Post Error'); } } fetchPost() From c720b929ce1b36f7cd68dd0e0d7b98c2109872d9 Mon Sep 17 00:00:00 2001 From: Anton <62949848+icepaq@users.noreply.github.com> Date: Sat, 19 Mar 2022 20:15:17 -0400 Subject: [PATCH 6/6] specify renderPost, new error message, try await --- client/pages/post/[id].tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx index 374130f7..b471dcd5 100644 --- a/client/pages/post/[id].tsx +++ b/client/pages/post/[id].tsx @@ -16,7 +16,7 @@ import { GetServerSideProps } from "next"; const Post = ({renderedPost, theme, changeTheme}: PostProps) => { - const [post, setPost] = useState() + const [post, setPost] = useState(renderedPost); const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState() const router = useRouter(); @@ -35,7 +35,7 @@ const Post = ({renderedPost, theme, changeTheme}: PostProps) => { if (!Cookies.get('drift-token')) { router.push('/signin'); } else { - setError('Post Error'); + setError('Something went wrong fetching the post'); } } fetchPost() @@ -115,7 +115,14 @@ export const getServerSideProps: GetServerSideProps = async (context) => { "Content-Type": "application/json", "Authorization": `Bearer ${driftToken}` } - }).then(res => res.json()); + }); + + try { + post = await post.json(); + } catch (e) { + console.log(e); + post = null; + } } return {