CoastalCommitsPastes/client/app/(posts)/post/[id]/components/post-page/index.tsx

168 lines
4.4 KiB
TypeScript
Raw Normal View History

"use client"
2022-11-12 04:28:06 -05:00
import VisibilityBadge from "@components/badges/visibility-badge"
2022-11-12 03:58:21 -05:00
import DocumentComponent from "./view-document"
2022-04-09 20:48:19 -04:00
import styles from "./post-page.module.css"
import { useEffect, useState } from "react"
2022-11-12 03:58:21 -05:00
import FileDropdown from "app/(posts)/components/file-dropdown"
2022-11-12 04:28:06 -05:00
import ScrollToTop from "@components/scroll-to-top"
import { useRouter } from "next/navigation"
2022-11-12 04:28:06 -05:00
import ExpirationBadge from "@components/badges/expiration-badge"
import CreatedAgoBadge from "@components/badges/created-ago-badge"
import PasswordModalPage from "./password-modal-wrapper"
2022-11-12 04:28:06 -05:00
import VisibilityControl from "@components/badges/visibility-control"
import { File, PostWithFilesAndAuthor } from "@lib/server/prisma"
import ButtonGroup from "@components/button-group"
import Button from "@components/button"
import { Archive, ArrowUpCircle, Edit } from "react-feather"
type Props = {
post: string | PostWithFilesAndAuthor
isProtected?: boolean
isAuthor?: boolean
}
const PostPage = ({ post: initialPost, isProtected, isAuthor }: Props) => {
const [post, setPost] = useState<PostWithFilesAndAuthor>(
typeof initialPost === "string" ? JSON.parse(initialPost) : initialPost
2022-04-09 20:48:19 -04:00
)
const [visibility, setVisibility] = useState<string>(post.visibility)
const router = useRouter()
2022-04-09 20:48:19 -04:00
useEffect(() => {
if (post.expiresAt) {
if (new Date(post.expiresAt) < new Date()) {
if (!isAuthor) {
router.push("/expired")
}
2022-04-09 20:48:19 -04:00
const expirationDate = new Date(post.expiresAt ? post.expiresAt : "")
if (!isAuthor && expirationDate < new Date()) {
router.push("/expired")
}
let interval: NodeJS.Timer | null = null
if (post.expiresAt) {
interval = setInterval(() => {
const expirationDate = new Date(
post.expiresAt ? post.expiresAt : ""
)
if (expirationDate < new Date()) {
if (!isAuthor) {
router.push("/expired")
}
clearInterval(interval!)
}
}, 4000)
}
return () => {
if (interval) clearInterval(interval)
}
}
2022-04-09 20:48:19 -04:00
}
}, [isAuthor, post.expiresAt, router])
2022-04-09 20:48:19 -04:00
const download = async () => {
if (!post.files) return
const downloadZip = (await import("client-zip")).downloadZip
const blob = await 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()
}
const editACopy = () => {
router.push(`/new/from/${post.id}`)
}
const viewParentClick = () => {
router.push(`/post/${post.parentId}`)
}
const isAvailable = !isProtected && post.title
2022-04-09 20:48:19 -04:00
return (
<>
2022-11-12 04:28:06 -05:00
{!isAvailable && <PasswordModalPage setPost={setPost} postId={post.id} />}
<div className={styles.header}>
<span className={styles.buttons}>
<ButtonGroup verticalIfMobile>
<Button
iconLeft={<Edit />}
onClick={editACopy}
style={{ textTransform: "none" }}
2022-04-09 20:48:19 -04:00
>
Edit a Copy
</Button>
2022-11-12 04:28:06 -05:00
{post.parentId && (
<Button iconLeft={<ArrowUpCircle />} onClick={viewParentClick}>
View Parent
2022-04-09 20:48:19 -04:00
</Button>
)}
<Button
onClick={download}
iconLeft={<Archive />}
style={{ textTransform: "none" }}
>
Download as ZIP Archive
</Button>
<FileDropdown files={post.files || []} />
</ButtonGroup>
</span>
<span className={styles.title}>
<h3>
{post.title}{" "}
<span style={{ color: "var(--gray)" }}>
by {post.author?.displayName}
</span>
</h3>
<span className={styles.badges}>
<VisibilityBadge visibility={visibility} />
<CreatedAgoBadge createdAt={post.createdAt} />
<ExpirationBadge postExpirationDate={post.expiresAt} />
2022-04-09 20:48:19 -04:00
</span>
</span>
</div>
{post.description && (
<div>
<p>{post.description}</p>
2022-04-09 20:48:19 -04:00
</div>
)}
{/* {post.files.length > 1 && <FileTree files={post.files} />} */}
{post.files?.map(({ id, content, title, html }: File) => (
<DocumentComponent
key={id}
title={title}
initialTab={"preview"}
id={id}
content={content}
preview={html}
/>
))}
{isAuthor && (
<span className={styles.controls}>
<VisibilityControl
postId={post.id}
visibility={visibility}
setVisibility={setVisibility}
2022-04-09 20:48:19 -04:00
/>
</span>
)}
<ScrollToTop />
</>
2022-04-09 20:48:19 -04:00
)
}
2022-04-09 20:48:19 -04:00
export default PostPage