From 1246c8382c8734dc705f96bf9fa6b5efdd3819bc Mon Sep 17 00:00:00 2001 From: yyamashita Date: Fri, 8 May 2026 08:38:32 +0900 Subject: Fix all TODO bugs and implement feature additions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - SCRAPE_TARGETS.md: add 5 missing venues (nine-spices, nishieifuku-jam, fever-shindaita, moon-step-nakano, mod-shibasaki) - Navigation: add 日付別 link to venues.tsx and events.$id.tsx headers - venues.tsx: add official site external links per venue card - ScrapeButton: new component with useFetcher-based trigger + 2s polling progress UI showing per-venue status and event count - venues.tsx / events._index.tsx: wire in ScrapeButton - FilterBar + db.server.ts: add area filter derived from venues, threaded through queryEvents Co-Authored-By: Claude Sonnet 4.6 --- app/components/FilterBar.tsx | 24 ++++++++- app/components/ScrapeButton.tsx | 115 ++++++++++++++++++++++++++++++++++++++++ app/lib/db.server.ts | 7 ++- app/routes/events.$id.tsx | 1 + app/routes/events._index.tsx | 14 +++-- app/routes/venues.tsx | 29 +++++++--- 6 files changed, 177 insertions(+), 13 deletions(-) create mode 100644 app/components/ScrapeButton.tsx (limited to 'app') diff --git a/app/components/FilterBar.tsx b/app/components/FilterBar.tsx index 7b8ca0c..7a95d2c 100644 --- a/app/components/FilterBar.tsx +++ b/app/components/FilterBar.tsx @@ -3,11 +3,12 @@ import type { Venue } from "~/lib/db.server"; interface Props { venues: Venue[]; + areas?: string[]; defaultDateFrom?: string; defaultDateTo?: string; } -export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Props) { +export default function FilterBar({ venues, areas, defaultDateFrom, defaultDateTo }: Props) { const [searchParams] = useSearchParams(); return ( @@ -63,6 +64,25 @@ export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Pr /> + {/* Area */} + {areas && areas.length > 0 && ( +
+ + +
+ )} + {/* Capacity */}
@@ -98,5 +118,5 @@ export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Pr } function hasFilters(params: URLSearchParams): boolean { - return ["keyword", "venue_id", "date_from", "date_to", "capacity_range"].some((k) => params.get(k)); + return ["keyword", "venue_id", "date_from", "date_to", "capacity_range", "area"].some((k) => params.get(k)); } diff --git a/app/components/ScrapeButton.tsx b/app/components/ScrapeButton.tsx new file mode 100644 index 0000000..75e48b1 --- /dev/null +++ b/app/components/ScrapeButton.tsx @@ -0,0 +1,115 @@ +import { useState, useEffect, useRef } from "react"; +import { useFetcher } from "react-router"; + +interface ScrapeLog { + id: number; + run_id: string; + venue_id: string; + venue_name: string; + status: "running" | "ok" | "error"; + events_saved: number; + error: string | null; +} + +interface StatusData { + running: boolean; + results: ScrapeLog[]; +} + +interface ScrapeStartData { + run_id: string; + status: string; +} + +export default function ScrapeButton({ venueId }: { venueId?: string }) { + const triggerFetcher = useFetcher(); + const statusFetcher = useFetcher(); + const statusFetcherRef = useRef(statusFetcher); + useEffect(() => { statusFetcherRef.current = statusFetcher; }); + + const [runId, setRunId] = useState(null); + const [polling, setPolling] = useState(false); + const [done, setDone] = useState(false); + + useEffect(() => { + const data = triggerFetcher.data; + if (data?.run_id) { + setRunId(data.run_id); + setPolling(true); + setDone(false); + } + }, [triggerFetcher.data]); + + useEffect(() => { + if (!polling || !runId) return; + const id = setInterval(() => { + statusFetcherRef.current.load(`/api/scrape-status?run_id=${runId}`); + }, 2000); + return () => clearInterval(id); + }, [polling, runId]); + + useEffect(() => { + const data = statusFetcher.data; + if (data && !data.running) { + setPolling(false); + setDone(true); + } + }, [statusFetcher.data]); + + const results: ScrapeLog[] = statusFetcher.data?.results ?? []; + const running = statusFetcher.data?.running ?? false; + const isActive = triggerFetcher.state !== "idle" || polling; + const okCount = results.filter((r) => r.status === "ok").length; + const errCount = results.filter((r) => r.status === "error").length; + const apiUrl = venueId ? `/api/scrape?venue_id=${venueId}` : "/api/scrape"; + + return ( +
+ + + {(isActive || done) && results.length > 0 && ( +
+

+ {running + ? `スクレイプ中... ${okCount + errCount} / ${results.length} 完了` + : `完了 — ✔ ${okCount}件成功 / ✖ ${errCount}件失敗`} +

+ {results.map((r) => ( +
+ + {r.status === "ok" ? "✔" : r.status === "error" ? "✖" : "⟳"} + + {r.venue_name} + {r.status === "ok" && ( + {r.events_saved}件 + )} + {r.status === "error" && ( + + エラー + + )} +
+ ))} +
+ )} +
+ ); +} diff --git a/app/lib/db.server.ts b/app/lib/db.server.ts index a4671b4..82a0025 100644 --- a/app/lib/db.server.ts +++ b/app/lib/db.server.ts @@ -172,12 +172,13 @@ export interface QueryEventsParams { venue_id?: string; keyword?: string; capacity_range?: CapacityRange; + area?: string; limit?: number; offset?: number; } export function queryEvents(params: QueryEventsParams = {}): Event[] { - const { date_from, date_to, venue_id, keyword, capacity_range, limit = 60, offset = 0 } = + const { date_from, date_to, venue_id, keyword, capacity_range, area, limit = 60, offset = 0 } = params; const clauses: string[] = []; @@ -206,6 +207,10 @@ export function queryEvents(params: QueryEventsParams = {}): Event[] { } else if (capacity_range === "large") { clauses.push("v.capacity >= 300"); } + if (area) { + clauses.push("v.area = ?"); + args.push(area); + } const where = clauses.length ? `WHERE ${clauses.join(" AND ")}` : ""; diff --git a/app/routes/events.$id.tsx b/app/routes/events.$id.tsx index 4a84308..423cda5 100644 --- a/app/routes/events.$id.tsx +++ b/app/routes/events.$id.tsx @@ -21,6 +21,7 @@ export default function EventDetail() { diff --git a/app/routes/events._index.tsx b/app/routes/events._index.tsx index cb1a019..890e0fd 100644 --- a/app/routes/events._index.tsx +++ b/app/routes/events._index.tsx @@ -4,6 +4,7 @@ import { queryEvents, getVenues, type CapacityRange } from "~/lib/db.server"; import EventCard from "~/components/EventCard"; import EventListRow from "~/components/EventListRow"; import FilterBar from "~/components/FilterBar"; +import ScrapeButton from "~/components/ScrapeButton"; function defaultWindow() { const today = new Date(); @@ -24,18 +25,20 @@ export async function loader({ request }: Route.LoaderArgs) { const venue_id = url.searchParams.get("venue_id") ?? undefined; const keyword = url.searchParams.get("keyword") ?? undefined; const capacity_range = (url.searchParams.get("capacity_range") ?? undefined) as CapacityRange | undefined; + const area = url.searchParams.get("area") ?? undefined; const page = Math.max(1, parseInt(url.searchParams.get("page") ?? "1", 10)); const limit = 30; const offset = (page - 1) * limit; - const events = queryEvents({ date_from, date_to, venue_id, keyword, capacity_range, limit, offset }); + const events = queryEvents({ date_from, date_to, venue_id, keyword, capacity_range, area, limit, offset }); const venues = getVenues(); + const areas = [...new Set(venues.filter((v) => v.area).map((v) => v.area as string))].sort(); - return { events, venues, page, hasMore: events.length === limit, date_from, date_to }; + return { events, venues, areas, page, hasMore: events.length === limit, date_from, date_to }; } export default function EventsIndex() { - const { events, venues, page, hasMore, date_from, date_to } = useLoaderData(); + const { events, venues, areas, page, hasMore, date_from, date_to } = useLoaderData(); const [searchParams, setSearchParams] = useSearchParams(); const view = (searchParams.get("view") ?? "card") as "card" | "list"; @@ -62,6 +65,8 @@ export default function EventsIndex() {

イベント一覧

+
+
+
- + {events.length === 0 ? (
diff --git a/app/routes/venues.tsx b/app/routes/venues.tsx index b027707..f2a7d54 100644 --- a/app/routes/venues.tsx +++ b/app/routes/venues.tsx @@ -1,6 +1,7 @@ import { useLoaderData, Link } from "react-router"; import type { Route } from "./+types/venues"; import { getVenues, getLastScrapePerVenue, type ScrapeLog } from "~/lib/db.server"; +import ScrapeButton from "~/components/ScrapeButton"; export async function loader(_: Route.LoaderArgs) { const venues = getVenues(); @@ -20,16 +21,20 @@ export default function Venues() {
-
-

会場一覧

-

- 現在 {venues.length} 会場が登録されています。 -

+
+
+

会場一覧

+

+ 現在 {venues.length} 会場が登録されています。 +

+
+
{venues.length === 0 ? ( @@ -51,7 +56,19 @@ export default function Venues() { > {v.name} - {v.area &&

{v.area}

} +
+ {v.area && {v.area}} + {v.url && ( + + 公式サイト ↗ + + )} +
{/* イベント件数 */} -- cgit v1.2.3