From eaffebb53c364eb9467df71560e204489a6637a5 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Tue, 22 Mar 2022 20:16:24 -0700
Subject: [PATCH] client: optimize fetching rendered markdown

---
 client/components/document/index.tsx | 5 +++--
 client/components/new-post/index.tsx | 2 +-
 client/components/preview/index.tsx  | 6 ++++--
 client/pages/api/render-markdown.ts  | 4 +++-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/components/document/index.tsx b/client/components/document/index.tsx
index d8200c86..415e31fa 100644
--- a/client/components/document/index.tsx
+++ b/client/components/document/index.tsx
@@ -68,7 +68,8 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
 
     const onTitleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => setTitle ? setTitle(event.target.value) : null, [setTitle])
 
-    const removeFile = useCallback(() => (remove?: () => void) => {
+    const removeFile = useCallback((remove?: () => void) => {
+        console.log(remove)
         if (remove) {
             if (content && content.trim().length > 0) {
                 const confirmed = window.confirm("Are you sure you want to remove this file?")
@@ -121,7 +122,7 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
                         width={"100%"}
                         id={title}
                     />
-                    {remove && editable && <Button type="abort" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={removeFile} />}
+                    {remove && editable && <Button type="abort" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
                 </div>
                 <div className={styles.descriptionContainer}>
                     {tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}
diff --git a/client/components/new-post/index.tsx b/client/components/new-post/index.tsx
index c28ce166..9eb79c88 100644
--- a/client/components/new-post/index.tsx
+++ b/client/components/new-post/index.tsx
@@ -111,7 +111,7 @@ const Post = () => {
     }, [docs, title])
 
     return (
-        <div>
+        <div style={{ marginBottom: 150 }}>
             <Title title={title} onChange={onChangeTitle} />
             <FileDropzone setDocs={uploadDocs} />
             <DocumentList docs={docs} updateDocTitle={updateDocTitle} updateDocContent={updateDocContent} removeDoc={removeDoc} />
diff --git a/client/components/preview/index.tsx b/client/components/preview/index.tsx
index 3ad4be6d..1dc24a2e 100644
--- a/client/components/preview/index.tsx
+++ b/client/components/preview/index.tsx
@@ -1,5 +1,6 @@
 import useTheme from "@lib/hooks/use-theme"
 import { memo, useEffect, useState } from "react"
+import styles from './preview.module.css'
 
 type Props = {
     height?: number | string
@@ -24,7 +25,7 @@ const MarkdownPreview = ({ height = 500, fileId, content, title }: Props) => {
                     setPreview(res)
                     setIsLoading(false)
                 }
-            } else {
+            } else if (content) {
                 const resp = await fetch(`/api/render-markdown`, {
                     method: "POST",
                     headers: {
@@ -41,11 +42,12 @@ const MarkdownPreview = ({ height = 500, fileId, content, title }: Props) => {
                     setIsLoading(false)
                 }
             }
+            setIsLoading(false)
         }
         fetchPost()
     }, [content, fileId, title])
     return (<>
-        {isLoading ? <div>Loading...</div> : <div data-theme={theme} dangerouslySetInnerHTML={{ __html: preview }} style={{
+        {isLoading ? <div>Loading...</div> : <div data-theme={theme} className={styles.markdownPreview} dangerouslySetInnerHTML={{ __html: preview }} style={{
             height
         }} />}
     </>)
diff --git a/client/pages/api/render-markdown.ts b/client/pages/api/render-markdown.ts
index a9e4162e..34df3f23 100644
--- a/client/pages/api/render-markdown.ts
+++ b/client/pages/api/render-markdown.ts
@@ -11,12 +11,14 @@ const renderMarkdown: NextApiHandler = async (req, res) => {
         return language
     }
     const type = fileType()
-    let contentToRender: string = '\n' + (content || '');
+    let contentToRender: string = (content || '');
 
     if (!renderAsMarkdown.includes(type)) {
         contentToRender = `~~~${type}
 ${content}
 ~~~`
+    } else {
+        contentToRender = '\n' + content;
     }
 
     if (typeof contentToRender !== 'string') {