57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router";
|
|
import { pb } from "@/lib/pocketbase";
|
|
import type { Campaign } from "@/lib/types";
|
|
import { Link } from "@tanstack/react-router";
|
|
import { Loader } from "@/components/Loader";
|
|
import { CreateCampaignButton } from "@/components/CreateCampaignButton";
|
|
import { useRouter } from "@tanstack/react-router";
|
|
|
|
export const Route = createFileRoute("/_authenticated/campaigns/")({
|
|
loader: async () => {
|
|
const records = await pb.collection("campaigns").getFullList();
|
|
return {
|
|
campaigns: records.map((rec: any) => ({
|
|
id: rec.id,
|
|
name: rec.name,
|
|
})) as Campaign[],
|
|
};
|
|
},
|
|
component: RouteComponent,
|
|
pendingComponent: Loader,
|
|
});
|
|
|
|
function RouteComponent() {
|
|
const { campaigns } = Route.useLoaderData();
|
|
const router = useRouter();
|
|
|
|
const handleCreated = async () => {
|
|
await router.invalidate();
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-xl mx-auto py-8">
|
|
<h2 className="text-xl font-bold mb-4 text-slate-100">Your Campaigns</h2>
|
|
{!campaigns || campaigns.length === 0 ? (
|
|
<div>No campaigns found.</div>
|
|
) : (
|
|
<ul className="space-y-2">
|
|
{campaigns.map((c) => (
|
|
<li key={c.id}>
|
|
<Link
|
|
to="/campaigns/$campaignId"
|
|
params={{ campaignId: c.id }}
|
|
className="block px-4 py-2 rounded bg-slate-800 hover:bg-violet-700 text-slate-100 transition-colors"
|
|
>
|
|
{c.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
<div className="mt-8">
|
|
<CreateCampaignButton onCreated={handleCreated} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|