80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import { useState } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { groupSourcesPutMutation, groupSourcesQuery } from "@/lib/queries";
|
|
import type { Blocklist } from "@/lib/types";
|
|
import { sameSet, toggleSource } from "./sourceSet";
|
|
import InlineError from "@/lib/InlineError";
|
|
|
|
interface Props {
|
|
groupId: number;
|
|
blocklists: Blocklist[];
|
|
}
|
|
|
|
export default function GroupSourcesEditor({ groupId, blocklists }: Props) {
|
|
const queryClient = useQueryClient();
|
|
const sources = useQuery(groupSourcesQuery(groupId));
|
|
const mutation = useMutation(groupSourcesPutMutation(queryClient));
|
|
const [selected, setSelected] = useState<number[] | null>(null);
|
|
|
|
if (sources.isPending) {
|
|
return (
|
|
<p role="status" className="mt-3 text-sm text-zinc-500">
|
|
Loading sources…
|
|
</p>
|
|
);
|
|
}
|
|
if (sources.isError) return <InlineError error={sources.error} />;
|
|
|
|
if (blocklists.length === 0) {
|
|
return (
|
|
<p className="mt-3 text-sm text-zinc-500">
|
|
No blocklist sources exist yet — add them on the Blocklists page.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
const current = selected ?? sources.data;
|
|
const dirty = !sameSet(current, sources.data);
|
|
|
|
return (
|
|
<div className="mt-3">
|
|
<ul className="space-y-1">
|
|
{blocklists.map((blocklist) => (
|
|
<li key={blocklist.id}>
|
|
<label className="inline-flex items-center gap-2 text-sm">
|
|
<input
|
|
type="checkbox"
|
|
checked={current.includes(blocklist.id)}
|
|
onChange={() => setSelected(toggleSource(current, blocklist.id))}
|
|
/>
|
|
{blocklist.name}
|
|
</label>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<InlineError error={mutation.error} />
|
|
<div className="mt-3 flex gap-2">
|
|
<button
|
|
type="button"
|
|
disabled={!dirty || mutation.isPending}
|
|
onClick={() =>
|
|
mutation.mutate({ id: groupId, sourceIds: current }, { onSuccess: () => setSelected(null) })
|
|
}
|
|
className="rounded bg-blue-600 px-3 py-1.5 text-sm font-medium text-white disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
|
>
|
|
Save sources
|
|
</button>
|
|
{dirty && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelected(null)}
|
|
className="rounded border border-zinc-300 px-3 py-1.5 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700"
|
|
>
|
|
Discard
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|