Make coverage filing sync explicit

This commit is contained in:
2026-03-14 19:54:59 -04:00
parent 0d6c684227
commit 69b45f35e3
5 changed files with 313 additions and 31 deletions

View File

@@ -35,6 +35,14 @@ type FormState = {
tags: string;
};
type PostCreateNotice = {
ticker: string;
category: string | null;
tags: string[];
syncState: 'idle' | 'pending' | 'queued';
error: string | null;
};
const STATUS_OPTIONS: Array<{ value: CoverageStatus; label: string }> = [
{ value: 'backlog', label: 'Backlog' },
{ value: 'active', label: 'Active' },
@@ -117,6 +125,7 @@ export default function WatchlistPage() {
const [error, setError] = useState<string | null>(null);
const [editingItemId, setEditingItemId] = useState<number | null>(null);
const [form, setForm] = useState<FormState>(EMPTY_FORM);
const [postCreateNotice, setPostCreateNotice] = useState<PostCreateNotice | null>(null);
const loadCoverage = useCallback(async () => {
const options = watchlistQueryOptions();
@@ -170,6 +179,7 @@ export default function WatchlistPage() {
}, []);
const beginEdit = useCallback((item: WatchlistItem) => {
setPostCreateNotice(null);
setEditingItemId(item.id);
setForm({
ticker: item.ticker,
@@ -191,12 +201,34 @@ export default function WatchlistPage() {
}
}, [queryClient]);
const queueCoverageSync = useCallback(async (input: {
ticker: string;
category?: string | null;
tags?: string[];
}) => {
const ticker = input.ticker.trim().toUpperCase();
await queueFilingSync({
ticker,
limit: 20,
category: input.category ?? undefined,
tags: input.tags && input.tags.length > 0 ? input.tags : undefined
});
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
void queryClient.invalidateQueries({ queryKey: ['filings', ticker] });
void queryClient.invalidateQueries({ queryKey: queryKeys.companyAnalysis(ticker) });
}, [queryClient]);
const saveCoverage = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
setSaving(true);
setError(null);
try {
const isCreate = editingItemId === null;
const ticker = form.ticker.trim().toUpperCase();
const wasExistingItem = items.some((item) => item.ticker === ticker);
const payload = {
companyName: form.companyName.trim(),
sector: form.sector.trim() || undefined,
@@ -206,16 +238,29 @@ export default function WatchlistPage() {
tags: parseTagsInput(form.tags)
};
if (editingItemId === null) {
await upsertWatchlistItem({
ticker: form.ticker.trim().toUpperCase(),
if (isCreate) {
const response = await upsertWatchlistItem({
ticker,
...payload
});
if (!wasExistingItem) {
setPostCreateNotice({
ticker: response.item.ticker,
category: response.item.category,
tags: response.item.tags,
syncState: 'idle',
error: null
});
} else {
setPostCreateNotice(null);
}
} else {
await updateWatchlistItem(editingItemId, payload);
setPostCreateNotice(null);
}
invalidateCoverageQueries(form.ticker);
invalidateCoverageQueries(ticker);
await loadCoverage();
resetForm();
} catch (err) {
@@ -248,19 +293,51 @@ export default function WatchlistPage() {
const queueSync = async (item: WatchlistItem) => {
try {
await queueFilingSync({
setError(null);
await queueCoverageSync({
ticker: item.ticker,
limit: 20,
category: item.category ?? undefined,
tags: item.tags.length > 0 ? item.tags : undefined
category: item.category,
tags: item.tags
});
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
void queryClient.invalidateQueries({ queryKey: queryKeys.filings(item.ticker, 120) });
} catch (err) {
setError(err instanceof Error ? err.message : `Failed to queue filing sync for ${item.ticker}`);
}
};
const queuePostCreateSync = async () => {
if (!postCreateNotice || postCreateNotice.syncState === 'queued') {
return;
}
setPostCreateNotice((current) => current
? {
...current,
syncState: 'pending',
error: null
}
: null);
try {
await queueCoverageSync(postCreateNotice);
setPostCreateNotice((current) => current
? {
...current,
syncState: 'queued',
error: null
}
: null);
} catch (err) {
const message = err instanceof Error ? err.message : `Failed to queue filing sync for ${postCreateNotice.ticker}`;
setPostCreateNotice((current) => current
? {
...current,
syncState: 'idle',
error: message
}
: null);
}
};
if (isPending || !isAuthenticated) {
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading coverage terminal...</div>;
}
@@ -407,7 +484,7 @@ export default function WatchlistPage() {
<div className="mt-3 grid grid-cols-2 gap-2">
<Button variant="secondary" className="px-2 py-1 text-xs" onClick={() => void queueSync(item)}>
Sync
Sync filings
</Button>
<Button
variant="ghost"
@@ -437,6 +514,9 @@ export default function WatchlistPage() {
await deleteWatchlistItem(item.id);
invalidateCoverageQueries(item.ticker);
await loadCoverage();
if (postCreateNotice?.ticker === item.ticker) {
setPostCreateNotice(null);
}
if (editingItemId === item.id) {
resetForm();
}
@@ -567,7 +647,7 @@ export default function WatchlistPage() {
Filings
</Link>
<Button variant="secondary" className="px-2 py-1 text-xs" onClick={() => void queueSync(item)}>
Sync
Sync filings
</Button>
<Button
variant="ghost"
@@ -597,6 +677,9 @@ export default function WatchlistPage() {
await deleteWatchlistItem(item.id);
invalidateCoverageQueries(item.ticker);
await loadCoverage();
if (postCreateNotice?.ticker === item.ticker) {
setPostCreateNotice(null);
}
if (editingItemId === item.id) {
resetForm();
}
@@ -625,6 +708,50 @@ export default function WatchlistPage() {
variant="surface"
>
<form onSubmit={saveCoverage} className="space-y-3">
{editingItemId === null ? (
<p className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm text-[color:var(--terminal-muted)]">
Saving coverage adds the company to your board only. Filing sync starts when you choose Sync filings.
</p>
) : null}
{postCreateNotice ? (
<div
data-testid="watchlist-post-create-notice"
className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-3 text-sm"
>
<p className="text-[color:var(--terminal-bright)]">
{postCreateNotice.syncState === 'queued'
? `${postCreateNotice.ticker} added to coverage. Filing sync is queued.`
: `${postCreateNotice.ticker} added to coverage. Filing sync has not started yet.`}
</p>
{postCreateNotice.error ? (
<p className="mt-2 text-sm text-[#ffb5b5]">{postCreateNotice.error}</p>
) : null}
<div className="mt-3 flex flex-wrap gap-2">
<Button
type="button"
className="w-full sm:w-auto"
disabled={postCreateNotice.syncState === 'pending' || postCreateNotice.syncState === 'queued'}
onClick={() => {
void queuePostCreateSync();
}}
>
{postCreateNotice.syncState === 'pending'
? 'Queueing...'
: postCreateNotice.syncState === 'queued'
? 'Sync queued'
: 'Sync filings'}
</Button>
<Button
type="button"
variant="ghost"
className="w-full sm:w-auto"
onClick={() => setPostCreateNotice(null)}
>
Dismiss
</Button>
</div>
</div>
) : null}
<div>
<label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Ticker</label>
<Input