CoastalCommitsPastes/client/components/preview/index.tsx

import Cookies from "js-cookie"
import { memo, useEffect, useState } from "react"
import styles from "./preview.module.css"

type Props = {
	height?: number | string
	fileId?: string
	content?: string
	title?: string
	//  file extensions we can highlight
}

const MarkdownPreview = ({ height = 500, fileId, content, title }: Props) => {
	const [preview, setPreview] = useState<string>(content || "")
	const [isLoading, setIsLoading] = useState<boolean>(true)
	useEffect(() => {
		async function fetchPost() {
			if (fileId) {
				const resp = await fetch(`/api/html/${fileId}`, {
					method: "GET"
				})
				if (resp.ok) {
					const res = await resp.text()
					setPreview(res)
					setIsLoading(false)
				}
			} else if (content) {
				const resp = await fetch("/server-api/files/html", {
					method: "POST",
					headers: {
						"Content-Type": "application/json",
						Authorization: `Bearer ${Cookies.get("drift-token") || ""}`
					},
					body: JSON.stringify({
						title,
						content
					})
				})

				if (resp.ok) {
					const res = await resp.text()
					setPreview(res)
					setIsLoading(false)
				}
			}
			setIsLoading(false)
		}
		fetchPost()
	}, [content, fileId, title])
	return (
		<>
			{isLoading ? (
				<div>Loading...</div>
			) : (
				<article
					className={styles.markdownPreview}
					dangerouslySetInnerHTML={{ __html: preview }}
					style={{
						height
					}}
				/>
			)}
		</>
	)
}

export default memo(MarkdownPreview)