client: optimize fetching rendered markdown

This commit is contained in:
Max Leiter 2022-03-22 20:16:24 -07:00
parent 34b1ab979f
commit eaffebb53c
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
4 changed files with 11 additions and 6 deletions

View file

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

View file

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

View file

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

View file

@ -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') {