CoastalCommitsPastes/client/components/admin/post-modal-link.tsx
2022-04-09 17:48:19 -07:00

57 lines
1.5 KiB
TypeScript

import { Link, Modal, useModal } from "@geist-ui/core"
import { Post } from "@lib/types"
import Cookies from "js-cookie"
import useSWR from "swr"
import { adminFetcher } from "."
import styles from "./admin.module.css"
const PostModal = ({ id }: { id: string }) => {
const { visible, setVisible, bindings } = useModal()
const { data: post, error } = useSWR<Post>(
`/server-api/admin/post/${id}`,
adminFetcher
)
if (error) return <Modal>failed to load</Modal>
if (!post) return <Modal>loading...</Modal>
const deletePost = async () => {
await fetch(`/server-api/admin/post/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${Cookies.get("drift-token")}`
}
})
setVisible(false)
}
return (
<>
<Link href="#" color onClick={() => setVisible(true)}>
{post.title}
</Link>
<Modal width={"var(--main-content)"} {...bindings}>
<Modal.Title>{post.title}</Modal.Title>
<Modal.Subtitle>Click an item to expand</Modal.Subtitle>
{post.files?.map((file) => (
<div key={file.id} className={styles.postModal}>
<Modal.Content>
<details>
<summary>{file.title}</summary>
<div dangerouslySetInnerHTML={{ __html: file.html }}></div>
</details>
</Modal.Content>
</div>
))}
<Modal.Action type="warning" onClick={deletePost}>
Delete
</Modal.Action>
<Modal.Action passive onClick={() => setVisible(false)}>
Close
</Modal.Action>
</Modal>
</>
)
}
export default PostModal