97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import { createMemo, createSignal, For, Show } from "solid-js";
|
|
|
|
import styles from "./PostList.module.css";
|
|
import PostItem from "./PostItem.tsx";
|
|
import { getAtk } from "../stores/userinfo.tsx";
|
|
|
|
export default function PostList(props: {
|
|
noRelated?: boolean,
|
|
info: { data: any[], count: number } | null,
|
|
onRepost?: (post: any) => void,
|
|
onReply?: (post: any) => void,
|
|
onEdit?: (post: any) => void,
|
|
onUpdate: (pn: number, filter?: any) => Promise<void>,
|
|
onError: (message: string | null) => void
|
|
}) {
|
|
const [loading, setLoading] = createSignal(true);
|
|
|
|
const posts = createMemo(() => props.info?.data);
|
|
const postCount = createMemo<number>(() => props.info?.count ?? 0);
|
|
|
|
const [page, setPage] = createSignal(1);
|
|
const pageCount = createMemo(() => Math.ceil(postCount() / 10));
|
|
|
|
async function readPosts(filter?: any) {
|
|
setLoading(true);
|
|
await props.onUpdate(page(), filter);
|
|
setLoading(false);
|
|
}
|
|
|
|
readPosts();
|
|
|
|
async function deletePost(item: any) {
|
|
if (!confirm(`Are you sure to delete post#${item.id}?`)) return;
|
|
|
|
setLoading(true);
|
|
const res = await fetch(`/api/posts/${item.id}`, {
|
|
method: "DELETE",
|
|
headers: { "Authorization": `Bearer ${getAtk()}` }
|
|
});
|
|
if (res.status !== 200) {
|
|
props.onError(await res.text());
|
|
} else {
|
|
await readPosts();
|
|
props.onError(null);
|
|
}
|
|
setLoading(false);
|
|
}
|
|
|
|
function changePage(pn: number) {
|
|
setPage(pn);
|
|
readPosts().then(() => {
|
|
setTimeout(() => window.scrollTo({ top: 0, behavior: "smooth" }), 16);
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div id="post-list">
|
|
<div id="posts">
|
|
<For each={posts()}>
|
|
{item =>
|
|
<PostItem
|
|
post={item}
|
|
noRelated={props.noRelated}
|
|
onRepost={props.onRepost}
|
|
onReply={props.onReply}
|
|
onEdit={props.onEdit}
|
|
onDelete={deletePost}
|
|
onReact={() => readPosts()}
|
|
onError={props.onError}
|
|
/>
|
|
}
|
|
</For>
|
|
|
|
<div class="flex justify-center">
|
|
<div class="join">
|
|
<button class={`join-item btn btn-ghost ${styles.paginationControl}`} disabled={page() <= 1}
|
|
onClick={() => changePage(page() - 1)}>
|
|
<i class="fa-solid fa-caret-left"></i>
|
|
</button>
|
|
<button class="join-item btn btn-ghost">Page {page()}</button>
|
|
<button class={`join-item btn btn-ghost ${styles.paginationControl}`} disabled={page() >= pageCount()}
|
|
onClick={() => changePage(page() + 1)}>
|
|
<i class="fa-solid fa-caret-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<Show when={loading()}>
|
|
<div class="w-full border-b border-base-200 pt-5 pb-7 text-center">
|
|
<p class="loading loading-lg loading-infinity"></p>
|
|
<p>Creating fake news...</p>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |