111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
import { Loader2 } from "lucide-react";
|
|
import { useId, useState } from "react";
|
|
import { getAllSourceCodes } from "../adapters/bestiary-index-adapter.js";
|
|
import { useBestiaryContext } from "../contexts/bestiary-context.js";
|
|
import { useBulkImportContext } from "../contexts/bulk-import-context.js";
|
|
import { useSidePanelContext } from "../contexts/side-panel-context.js";
|
|
import { Button } from "./ui/button.js";
|
|
import { Input } from "./ui/input.js";
|
|
|
|
const DEFAULT_BASE_URL =
|
|
"https://raw.githubusercontent.com/5etools-mirror-3/5etools-src/main/data/bestiary/";
|
|
|
|
export function BulkImportPrompt() {
|
|
const { fetchAndCacheSource, isSourceCached, refreshCache } =
|
|
useBestiaryContext();
|
|
const { state: importState, startImport, reset } = useBulkImportContext();
|
|
const { dismissPanel } = useSidePanelContext();
|
|
|
|
const [baseUrl, setBaseUrl] = useState(DEFAULT_BASE_URL);
|
|
const baseUrlId = useId();
|
|
const totalSources = getAllSourceCodes().length;
|
|
|
|
const handleStart = (url: string) => {
|
|
startImport(url, fetchAndCacheSource, isSourceCached, refreshCache);
|
|
};
|
|
|
|
const handleDone = () => {
|
|
dismissPanel();
|
|
reset();
|
|
};
|
|
|
|
if (importState.status === "complete") {
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="rounded-md border border-green-500/50 bg-green-500/10 px-3 py-2 text-green-400 text-sm">
|
|
All sources loaded
|
|
</div>
|
|
<Button onClick={handleDone}>Done</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (importState.status === "partial-failure") {
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="rounded-md border border-yellow-500/50 bg-yellow-500/10 px-3 py-2 text-sm text-yellow-400">
|
|
Loaded {importState.completed}/{importState.total} sources (
|
|
{importState.failed} failed)
|
|
</div>
|
|
<Button onClick={handleDone}>Done</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (importState.status === "loading") {
|
|
const processed = importState.completed + importState.failed;
|
|
const pct =
|
|
importState.total > 0
|
|
? Math.round((processed / importState.total) * 100)
|
|
: 0;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center gap-2 text-muted-foreground text-sm">
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
Loading sources... {processed}/{importState.total}
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-muted">
|
|
<div
|
|
className="h-full rounded-full bg-primary transition-all"
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// idle state
|
|
const isDisabled = !baseUrl.trim() || importState.status !== "idle";
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<h3 className="font-semibold text-foreground text-sm">
|
|
Import All Sources
|
|
</h3>
|
|
<p className="mt-1 text-muted-foreground text-xs">
|
|
Load stat block data for all {totalSources} sources at once.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label htmlFor={baseUrlId} className="text-muted-foreground text-xs">
|
|
Base URL
|
|
</label>
|
|
<Input
|
|
id={baseUrlId}
|
|
type="url"
|
|
value={baseUrl}
|
|
onChange={(e) => setBaseUrl(e.target.value)}
|
|
className="text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<Button onClick={() => handleStart(baseUrl)} disabled={isDisabled}>
|
|
Load All
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|