Refactor frontend API calls into hooks and complete task states

This commit is contained in:
2026-03-20 15:18:04 +01:00
parent 7627ae7edb
commit 25b4ebbd96
16 changed files with 483 additions and 409 deletions

View File

@@ -51,7 +51,6 @@ import {
useRunImport,
useSchedule,
} from "../hooks/useBlocklist";
import { previewBlocklist } from "../api/blocklist";
import type {
BlocklistSource,
ImportRunResult,
@@ -262,9 +261,10 @@ interface PreviewDialogProps {
open: boolean;
source: BlocklistSource | null;
onClose: () => void;
fetchPreview: (id: number) => Promise<PreviewResponse>;
}
function PreviewDialog({ open, source, onClose }: PreviewDialogProps): React.JSX.Element {
function PreviewDialog({ open, source, onClose, fetchPreview }: PreviewDialogProps): React.JSX.Element {
const styles = useStyles();
const [data, setData] = useState<PreviewResponse | null>(null);
const [loading, setLoading] = useState(false);
@@ -276,7 +276,7 @@ function PreviewDialog({ open, source, onClose }: PreviewDialogProps): React.JSX
setData(null);
setError(null);
setLoading(true);
previewBlocklist(source.id)
fetchPreview(source.id)
.then((result) => {
setData(result);
setLoading(false);
@@ -285,7 +285,7 @@ function PreviewDialog({ open, source, onClose }: PreviewDialogProps): React.JSX
setError(err instanceof Error ? err.message : "Failed to fetch preview");
setLoading(false);
});
}, [source]);
}, [source, fetchPreview]);
return (
<Dialog
@@ -400,7 +400,7 @@ interface SourcesSectionProps {
function SourcesSection({ onRunImport, runImportRunning }: SourcesSectionProps): React.JSX.Element {
const styles = useStyles();
const { sources, loading, error, refresh, createSource, updateSource, removeSource } =
const { sources, loading, error, refresh, createSource, updateSource, removeSource, previewSource } =
useBlocklists();
const [dialogOpen, setDialogOpen] = useState(false);
@@ -410,7 +410,7 @@ function SourcesSection({ onRunImport, runImportRunning }: SourcesSectionProps):
const [saving, setSaving] = useState(false);
const [saveError, setSaveError] = useState<string | null>(null);
const [previewOpen, setPreviewOpen] = useState(false);
const [previewSource, setPreviewSource] = useState<BlocklistSource | null>(null);
const [previewSourceItem, setPreviewSourceItem] = useState<BlocklistSource | null>(null);
const openAdd = useCallback((): void => {
setDialogMode("add");
@@ -466,7 +466,7 @@ function SourcesSection({ onRunImport, runImportRunning }: SourcesSectionProps):
);
const handlePreview = useCallback((source: BlocklistSource): void => {
setPreviewSource(source);
setPreviewSourceItem(source);
setPreviewOpen(true);
}, []);
@@ -594,10 +594,11 @@ function SourcesSection({ onRunImport, runImportRunning }: SourcesSectionProps):
<PreviewDialog
open={previewOpen}
source={previewSource}
source={previewSourceItem}
onClose={() => {
setPreviewOpen(false);
}}
fetchPreview={previewSource}
/>
</div>
);