84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import { useCallback, useState } from "react";
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogBody,
|
|
DialogContent,
|
|
DialogSurface,
|
|
DialogTitle,
|
|
MessageBar,
|
|
MessageBarBody,
|
|
Spinner,
|
|
Text,
|
|
} from "@fluentui/react-components";
|
|
import type { BlocklistSource, PreviewResponse } from "../../types/blocklist";
|
|
|
|
interface PreviewDialogProps {
|
|
open: boolean;
|
|
source: BlocklistSource | null;
|
|
onClose: () => void;
|
|
fetchPreview: (id: number) => Promise<PreviewResponse>;
|
|
}
|
|
|
|
export function PreviewDialog({ open, source, onClose, fetchPreview }: PreviewDialogProps): React.JSX.Element {
|
|
const [data, setData] = useState<PreviewResponse | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleOpen = useCallback((): void => {
|
|
if (!source) return;
|
|
setData(null);
|
|
setError(null);
|
|
setLoading(true);
|
|
fetchPreview(source.id)
|
|
.then((result) => {
|
|
setData(result);
|
|
setLoading(false);
|
|
})
|
|
.catch((err: unknown) => {
|
|
setError(err instanceof Error ? err.message : "Failed to fetch preview");
|
|
setLoading(false);
|
|
});
|
|
}, [source, fetchPreview]);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(_ev, data) => { if (!data.open) onClose(); }}>
|
|
<DialogSurface onAnimationEnd={open ? handleOpen : undefined}>
|
|
<DialogBody>
|
|
<DialogTitle>Preview — {source?.name ?? ""}</DialogTitle>
|
|
<DialogContent>
|
|
{loading && (
|
|
<div style={{ textAlign: "center", padding: "16px" }}>
|
|
<Spinner label="Downloading…" />
|
|
</div>
|
|
)}
|
|
{error && (
|
|
<MessageBar intent="error">
|
|
<MessageBarBody>{error}</MessageBarBody>
|
|
</MessageBar>
|
|
)}
|
|
{data && (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
|
|
<Text size={300}>
|
|
{data.valid_count} valid IPs / {data.skipped_count} skipped of {data.total_lines} total lines. Showing first {data.entries.length}:
|
|
</Text>
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
|
|
{data.entries.map((entry) => (
|
|
<div key={entry}>{entry}</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button appearance="secondary" onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
</DialogActions>
|
|
</DialogBody>
|
|
</DialogSurface>
|
|
</Dialog>
|
|
);
|
|
}
|