Merge pull request #34 from icepaq/render-public-posts-server-side

client: render posts server side

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",

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<P = any> = {
   pageProps: P;
 } & Omit<NextAppProps<P>, "pageProps">;

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<any>()
+
+const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
+    const [post, setPost] = useState(renderedPost);
     const [isLoading, setIsLoading] = useState(true)
     const [error, setError] = useState<string>()
     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

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"