144 lines
5.0 KiB
TypeScript
144 lines
5.0 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { api, AdminError, type AdminPost } from "@/lib/api";
|
|
import { usePagedList } from "@/lib/use-paged-list";
|
|
import { ListShell, EmptyRow } from "@/components/list-shell";
|
|
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useConfirm } from "@/components/confirm";
|
|
import { fmtDate } from "@/lib/utils";
|
|
import { Clamp } from "@/components/ui/clamp";
|
|
|
|
export default function PostsPage() {
|
|
const [q, setQ] = useState("");
|
|
const fetcher = useCallback(
|
|
(limit: number, offset: number) => api.posts(q, limit, offset),
|
|
[q],
|
|
);
|
|
const list = usePagedList<AdminPost>(fetcher, [q]);
|
|
const confirm = useConfirm();
|
|
|
|
async function run(action: Promise<unknown>, successMsg: string) {
|
|
try {
|
|
await action;
|
|
toast.success(successMsg);
|
|
list.refresh();
|
|
} catch (err) {
|
|
toast.error(err instanceof AdminError ? err.message : "Action failed.");
|
|
}
|
|
}
|
|
|
|
async function onDelete(p: AdminPost) {
|
|
if (
|
|
await confirm({
|
|
title: "Delete this post?",
|
|
message: "It will be removed from the app. You can restore it here later.",
|
|
confirmLabel: "Delete post",
|
|
destructive: true,
|
|
})
|
|
) {
|
|
run(api.deletePost(p.id), "Post deleted.");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ListShell
|
|
title="Posts"
|
|
total={list.total}
|
|
searchPlaceholder="Search caption, source, or author…"
|
|
onQueryChange={setQ}
|
|
list={list}
|
|
>
|
|
<Table>
|
|
<THead>
|
|
<TR>
|
|
<TH>Post</TH>
|
|
<TH>Author</TH>
|
|
<TH>Engagement</TH>
|
|
<TH>Created</TH>
|
|
<TH className="text-right">Actions</TH>
|
|
</TR>
|
|
</THead>
|
|
<tbody>
|
|
{list.items.length === 0 && !list.loading ? (
|
|
<EmptyRow cols={5} label="No posts found." />
|
|
) : (
|
|
list.items.map((p) => (
|
|
<TR key={p.id} className={p.deleted_at ? "opacity-60" : ""}>
|
|
<TD className="max-w-md">
|
|
<Clamp lines={2}>{p.caption || "—"}</Clamp>
|
|
<div className="mt-0.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
|
{p.source_title ? (
|
|
<Clamp lines={2} className="max-w-full">
|
|
{p.source_title}
|
|
</Clamp>
|
|
) : null}
|
|
{p.deleted_at ? (
|
|
<span className="rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive whitespace-nowrap">
|
|
Deleted
|
|
</span>
|
|
) : p.is_hidden ? (
|
|
<span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide whitespace-nowrap">
|
|
Hidden
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</TD>
|
|
<TD className="max-w-[14rem]">
|
|
<Clamp className="font-medium">{p.author_name}</Clamp>
|
|
<Clamp className="text-xs text-muted-foreground">
|
|
{`@${p.author_handle}`}
|
|
</Clamp>
|
|
</TD>
|
|
<TD className="whitespace-nowrap text-xs text-muted-foreground">
|
|
{p.likes_count} likes · {p.comments_count} comments
|
|
</TD>
|
|
<TD className="whitespace-nowrap">{fmtDate(p.created_at)}</TD>
|
|
<TD className="text-right">
|
|
<div className="flex flex-wrap justify-end gap-2">
|
|
{p.deleted_at ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => run(api.restorePost(p.id), "Post restored.")}
|
|
>
|
|
Restore
|
|
</Button>
|
|
) : (
|
|
<>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() =>
|
|
run(
|
|
p.is_hidden
|
|
? api.unhidePost(p.id)
|
|
: api.hidePost(p.id),
|
|
p.is_hidden ? "Post unhidden." : "Post hidden.",
|
|
)
|
|
}
|
|
>
|
|
{p.is_hidden ? "Unhide" : "Hide"}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="destructive"
|
|
onClick={() => onDelete(p)}
|
|
>
|
|
Delete
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</TD>
|
|
</TR>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</Table>
|
|
</ListShell>
|
|
);
|
|
}
|