postdown/islands/PostList.tsx

/** @jsx h */
import { h } from "preact";

interface PostListProps {
  posts: { id: string; title: string; content: string; shared: boolean }[];
}

export default function PostList(props: PostListProps) {
  const onEdit = (id: string) => {
    location.href = `/${id}`;
  };

  const onDelete = (id: string, title: string) => {
    window.$modal?.show(
      "Confirm delete",
      `Are you sure you want to delete ${title}?`,
      [
        {
          text: "Confirm",
          onClick: async () => {
            const resp = await fetch("/api/post", {
              method: "DELETE",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                id,
              }),
            });
            const respJson = await resp.json();
            if (respJson.success) {
              location.reload();
            }
          },
        },
        {
          text: "Cancel",
        },
      ]
    );
  };

  return (
    <div className="pd-post-list">
      {props.posts.map((post) => (
        <div className="pd-post" key={post.id}>
          <span className="pd-post-title">{post.title || "Untitled"}</span>
          <div className="pd-post-action">
            <i
              className="bi bi-x"
              onClick={() => {
                onDelete(post.id, post.title);
              }}
            />
          </div>
          <span className="pd-post-digest">{post.content || "No content"}</span>
          <button
            onClick={() => {
              onEdit(post.id);
            }}
          >
            Edit
          </button>
        </div>
      ))}
    </div>
  );
}