Merge pull request #110 from profullstack/feat/watchlist-bulk-add

feat(finance): bulk-add tickers to watchlist from a pasted list

Author: ralyodio

src/app/api/finance/watchlist/route.ts

@@ -14,6 +14,7 @@ import { requireActiveSubscription } from '@/lib/subscription/guard';
 import { getActiveProfileId } from '@/lib/profiles/profile-utils';
 import { getServerClient } from '@/lib/supabase';
 import { normalizeSymbol } from '@/lib/finance/market-data/stooq';
+import { parseSymbolList } from '@/lib/finance/watchlist';
 
 export const dynamic = 'force-dynamic';
 
@@ -51,7 +52,34 @@ export async function POST(request: NextRequest): Promise<NextResponse> {
     return NextResponse.json({ error: 'No active profile' }, { status: 400 });
   }
 
-  const body = (await request.json().catch(() => null)) as { symbol?: string; exchange?: string } | null;
+  const body = (await request.json().catch(() => null)) as
+    | { symbol?: string; symbols?: string | string[]; exchange?: string }
+    | null;
+
+  // Bulk add: `symbols` may be a comma/space/newline-separated string or array.
+  if (body?.symbols !== undefined) {
+    const { valid, invalid } = parseSymbolList(body.symbols);
+    if (valid.length === 0) {
+      return NextResponse.json({ error: 'no valid symbols', invalid }, { status: 400 });
+    }
+
+    const { data, error } = await getServerClient()
+      .from('finance_watchlist')
+      .upsert(
+        valid.map((symbol) => ({ profile_id: profileId, symbol, exchange: null })),
+        { onConflict: 'profile_id,symbol' },
+      )
+      .select('id, symbol, exchange, added_at');
+
+    if (error) {
+      console.error('[finance/watchlist] bulk add error:', error);
+      return NextResponse.json({ error: 'failed to add symbols' }, { status: 500 });
+    }
+
+    return NextResponse.json({ added: data ?? [], count: data?.length ?? 0, invalid }, { status: 201 });
+  }
+
+  // Single add.
   const symbol = normalizeSymbol(body?.symbol ?? '');
   if (!SYMBOL_RE.test(symbol)) {
     return NextResponse.json({ error: 'invalid symbol' }, { status: 400 });

src/app/finance/finance-hub.tsx

@@ -23,6 +23,9 @@ export function FinanceHub(): React.ReactElement {
   const [query, setQuery] = useState('');
   const [watchlist, setWatchlist] = useState<WatchlistRow[]>([]);
   const [recent, setRecent] = useState<string[]>([]);
+  const [bulk, setBulk] = useState('');
+  const [bulkBusy, setBulkBusy] = useState(false);
+  const [bulkMsg, setBulkMsg] = useState<string | null>(null);
 
   useEffect(() => {
     try {
@@ -33,13 +36,51 @@ export function FinanceHub(): React.ReactElement {
     }
   }, []);
 
-  useEffect(() => {
+  const loadWatchlist = useCallback(() => {
     fetch('/api/finance/watchlist', { cache: 'no-store' })
       .then((res) => (res.ok ? res.json() : { watchlist: [] }))
       .then((body: { watchlist?: WatchlistRow[] }) => setWatchlist(body.watchlist ?? []))
       .catch(() => undefined);
   }, []);
 
+  useEffect(() => {
+    loadWatchlist();
+  }, [loadWatchlist]);
+
+  const addBulk = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!bulk.trim()) return;
+      setBulkBusy(true);
+      setBulkMsg(null);
+      try {
+        const res = await fetch('/api/finance/watchlist', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ symbols: bulk }),
+        });
+        const body = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          setBulkMsg(body.error === 'no valid symbols' ? 'No valid tickers found.' : 'Could not add tickers.');
+          return;
+        }
+        const added = body.count ?? 0;
+        const invalid: string[] = body.invalid ?? [];
+        setBulkMsg(
+          `Added ${added} ticker${added === 1 ? '' : 's'}` +
+            (invalid.length ? ` · skipped ${invalid.length} invalid (${invalid.slice(0, 5).join(', ')})` : ''),
+        );
+        setBulk('');
+        loadWatchlist();
+      } catch {
+        setBulkMsg('Network error.');
+      } finally {
+        setBulkBusy(false);
+      }
+    },
+    [bulk, loadWatchlist],
+  );
+
   const go = useCallback(
     (raw: string) => {
       const symbol = normalizeSymbol(raw);
@@ -99,6 +140,22 @@ export function FinanceHub(): React.ReactElement {
         <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-text-muted">
           Watchlist
         </h2>
+
+        <form onSubmit={addBulk} className="mb-4 flex flex-col gap-2 sm:flex-row">
+          <input
+            className="input flex-1"
+            placeholder="Paste tickers to add, e.g. NVDA, AAPL, TSLA, SPY"
+            value={bulk}
+            onChange={(e) => setBulk(e.target.value)}
+            autoCapitalize="characters"
+            spellCheck={false}
+          />
+          <button type="submit" disabled={bulkBusy || !bulk.trim()} className="btn btn-secondary disabled:opacity-60">
+            {bulkBusy ? 'Adding…' : 'Add all'}
+          </button>
+        </form>
+        {bulkMsg ? <p className="mb-3 text-xs text-text-muted">{bulkMsg}</p> : null}
+
         {watchlist.length === 0 ? (
           <p className="text-sm text-text-muted">
             No tickers yet. Open a ticker and tap “Add to watchlist”.

src/lib/finance/watchlist.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+import { parseSymbolList } from './watchlist';
+
+describe('parseSymbolList', () => {
+  it('parses a comma-separated string, normalizing + de-duping', () => {
+    const { valid, invalid } = parseSymbolList(' nvda, AAPL ,tsla,  nvda ');
+    expect(valid).toEqual(['NVDA', 'AAPL', 'TSLA']);
+    expect(invalid).toEqual([]);
+  });
+
+  it('splits on whitespace, newlines and semicolons too', () => {
+    const { valid } = parseSymbolList('NVDA AAPL\nMSFT;GOOG\tSPY');
+    expect(valid).toEqual(['NVDA', 'AAPL', 'MSFT', 'GOOG', 'SPY']);
+  });
+
+  it('accepts an array input', () => {
+    expect(parseSymbolList(['nvda', 'aapl']).valid).toEqual(['NVDA', 'AAPL']);
+  });
+
+  it('collects invalid tokens separately', () => {
+    const { valid, invalid } = parseSymbolList('NVDA, $$$, 123, , TSLA');
+    expect(valid).toEqual(['NVDA', 'TSLA']);
+    expect(invalid).toContain('$$$');
+    expect(invalid).toContain('123');
+  });
+
+  it('returns empty for empty input', () => {
+    expect(parseSymbolList('   ')).toEqual({ valid: [], invalid: [] });
+  });
+});

src/lib/finance/watchlist.ts

@@ -0,0 +1,41 @@
+/**
+ * Finance — watchlist helpers.
+ */
+
+import { normalizeSymbol } from './market-data/stooq';
+
+const SYMBOL_RE = /^[A-Z][A-Z0-9.\-]{0,9}$/;
+
+export interface ParsedSymbolList {
+  /** Valid, normalized, de-duplicated symbols. */
+  valid: string[];
+  /** Raw tokens that failed validation (for user feedback). */
+  invalid: string[];
+}
+
+/**
+ * Parse a pasted list of tickers (comma / whitespace / newline / semicolon
+ * separated, or an array) into validated, normalized, de-duplicated symbols.
+ */
+export function parseSymbolList(input: string | string[]): ParsedSymbolList {
+  const tokens = Array.isArray(input) ? input : input.split(/[\s,;]+/);
+  const seen = new Set<string>();
+  const valid: string[] = [];
+  const invalid: string[] = [];
+
+  for (const token of tokens) {
+    const trimmed = token.trim();
+    if (!trimmed) continue;
+    const symbol = normalizeSymbol(trimmed);
+    if (SYMBOL_RE.test(symbol)) {
+      if (!seen.has(symbol)) {
+        seen.add(symbol);
+        valid.push(symbol);
+      }
+    } else {
+      invalid.push(trimmed);
+    }
+  }
+
+  return { valid, invalid };
+}