CoastalCommitsPastes/client/components/admin/post-modal-link.tsx

51 lines
No EOL
1.6 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