2022-03-11 21:48:40 -05:00
|
|
|
import { Button, Page, Text } from "@geist-ui/core";
|
2022-03-09 20:11:37 -05:00
|
|
|
import Skeleton from 'react-loading-skeleton';
|
2022-03-07 23:42:44 -05:00
|
|
|
|
2022-03-07 01:16:08 -05:00
|
|
|
import { useRouter } from "next/router";
|
2022-03-09 20:11:37 -05:00
|
|
|
import { useEffect, useState } from "react";
|
2022-03-06 19:46:59 -05:00
|
|
|
import Document from '../../components/document'
|
|
|
|
import Header from "../../components/header";
|
|
|
|
import VisibilityBadge from "../../components/visibility-badge";
|
|
|
|
import { ThemeProps } from "../_app";
|
2022-03-12 23:13:35 -05:00
|
|
|
import PageSeo from "components/page-seo";
|
2022-03-12 14:53:55 -05:00
|
|
|
import Head from "next/head";
|
|
|
|
import styles from './styles.module.css';
|
2022-03-15 15:15:54 -04:00
|
|
|
import Cookies from "js-cookie";
|
2022-03-06 19:46:59 -05:00
|
|
|
|
2022-03-07 01:16:08 -05:00
|
|
|
const Post = ({ theme, changeTheme }: ThemeProps) => {
|
|
|
|
const [post, setPost] = useState<any>()
|
|
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
|
|
const [error, setError] = useState<string>()
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
async function fetchPost() {
|
|
|
|
setIsLoading(true);
|
|
|
|
if (router.query.id) {
|
2022-03-11 21:48:40 -05:00
|
|
|
const post = await fetch(`/server-api/posts/${router.query.id}`, {
|
2022-03-07 01:16:08 -05:00
|
|
|
method: "GET",
|
|
|
|
headers: {
|
|
|
|
"Content-Type": "application/json",
|
2022-03-15 15:15:54 -04:00
|
|
|
"Authorization": `Bearer ${Cookies.get("drift-token")}`
|
2022-03-07 01:16:08 -05:00
|
|
|
}
|
|
|
|
})
|
2022-03-06 19:46:59 -05:00
|
|
|
|
2022-03-07 01:16:08 -05:00
|
|
|
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])
|
2022-03-06 19:46:59 -05:00
|
|
|
|
2022-03-11 21:48:40 -05:00
|
|
|
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()
|
|
|
|
}
|
|
|
|
|
2022-03-06 19:46:59 -05:00
|
|
|
return (
|
2022-03-07 23:42:44 -05:00
|
|
|
<Page width={"100%"}>
|
2022-03-12 23:13:35 -05:00
|
|
|
{!isLoading && (
|
|
|
|
<PageSeo
|
|
|
|
title={`${post.title} - Drift`}
|
|
|
|
description={post.description}
|
|
|
|
isPrivate={post.visibility === 'private'}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
2022-03-06 19:46:59 -05:00
|
|
|
<Page.Header>
|
2022-03-07 19:42:47 -05:00
|
|
|
<Header theme={theme} changeTheme={changeTheme} />
|
2022-03-06 19:46:59 -05:00
|
|
|
</Page.Header>
|
2022-03-06 20:41:30 -05:00
|
|
|
<Page.Content width={"var(--main-content-width)"} margin="auto">
|
2022-03-07 01:16:08 -05:00
|
|
|
{error && <Text type="error">{error}</Text>}
|
2022-03-09 20:11:37 -05:00
|
|
|
{/* {!error && (isLoading || !post?.files) && <Loading />} */}
|
|
|
|
{!error && isLoading && <><Text h2><Skeleton width={400} /></Text>
|
|
|
|
<Document skeleton={true} />
|
|
|
|
</>}
|
2022-03-11 21:48:40 -05:00
|
|
|
{!isLoading && post && <>
|
2022-03-12 14:53:55 -05:00
|
|
|
<div className={styles.header}>
|
2022-03-11 21:48:40 -05:00
|
|
|
<Text h2>{post.title} <VisibilityBadge visibility={post.visibility} /></Text>
|
|
|
|
<Button auto onClick={download}>
|
2022-03-12 14:53:55 -05:00
|
|
|
Download as ZIP archive
|
2022-03-11 21:48:40 -05:00
|
|
|
</Button>
|
|
|
|
</div>
|
2022-03-07 01:16:08 -05:00
|
|
|
{post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => (
|
2022-03-06 19:46:59 -05:00
|
|
|
<Document
|
|
|
|
key={id}
|
2022-03-11 21:48:40 -05:00
|
|
|
id={id}
|
2022-03-06 19:46:59 -05:00
|
|
|
content={content}
|
|
|
|
title={title}
|
|
|
|
editable={false}
|
2022-03-07 01:16:08 -05:00
|
|
|
initialTab={'preview'}
|
2022-03-06 19:46:59 -05:00
|
|
|
/>
|
2022-03-07 01:16:08 -05:00
|
|
|
))}
|
2022-03-09 20:11:37 -05:00
|
|
|
</>}
|
2022-03-06 19:46:59 -05:00
|
|
|
</Page.Content>
|
|
|
|
</Page >
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Post
|