import { Button, Page, Text } from "@geist-ui/core"; import Skeleton from 'react-loading-skeleton'; import { useRouter } from "next/router"; 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 Head from "next/head"; const Post = ({ theme, changeTheme }: ThemeProps) => { const [post, setPost] = useState() const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState() const router = useRouter(); 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 ${localStorage.getItem("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) } } fetchPost() }, [router, router.query.id]) const download = async () => { const clientZip = require("client-zip") const blob = await clientZip.downloadZip(post.files.map((file: any) => { return { name: file.title, input: file.content, lastModified: new Date(file.updatedAt) } })).blob() const link = document.createElement("a") link.href = URL.createObjectURL(blob) link.download = `${post.title}.zip` link.click() link.remove() } return ( {isLoading && loading - Drift} {!isLoading && {post.title} - Drift} {!isLoading && post.visibility !== 'private' && }
{error && {error}} {/* {!error && (isLoading || !post?.files) && } */} {!error && isLoading && <> } {!isLoading && post && <>
{post.title}
{post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => ( ))} } ) } export default Post