Auto-refresh

Author: YuWei-CH

backend/app/main.py

@@ -8,7 +8,7 @@
 from fastapi import Depends, FastAPI, HTTPException, Query
 from fastapi.middleware.cors import CORSMiddleware
 from httpx import HTTPError
-from sqlalchemy import select
+from sqlalchemy import func, select
 from sqlalchemy.orm import Session
 
 from .db import get_db, init_db
@@ -26,6 +26,7 @@
     CompareResponse,
     GeocodeResultOut,
     ListingOut,
+    ListingSummaryOut,
     ListingUpsert,
     ReverseGeocodeOut,
     TargetOut,
@@ -168,6 +169,26 @@ def list_listings(db: DbDep) -> list[Listing]:
     return list(db.scalars(select(Listing).order_by(Listing.captured_at.desc())))
 
 
+@app.get("/api/listings/summary", response_model=ListingSummaryOut)
+def listing_summary(db: DbDep) -> ListingSummaryOut:
+    total = int(db.scalar(select(func.count(Listing.id))) or 0)
+    row = db.execute(
+        select(Listing.id, Listing.captured_at)
+        .order_by(Listing.captured_at.desc())
+        .limit(1)
+    ).first()
+    latest_id: str | None = None
+    latest_captured_at: datetime | None = None
+    if row:
+        latest_id = row[0]
+        latest_captured_at = row[1]
+        if isinstance(latest_captured_at, datetime) and latest_captured_at.tzinfo is None:
+            latest_captured_at = latest_captured_at.replace(tzinfo=timezone.utc)
+    return ListingSummaryOut(
+        count=total, latest_id=latest_id, latest_captured_at=latest_captured_at
+    )
+
+
 @app.delete("/api/listings/{listing_id}")
 def delete_listing(listing_id: str, db: DbDep) -> dict[str, bool]:
     listing = db.scalar(select(Listing).where(Listing.id == listing_id))

backend/app/schemas.py

@@ -52,6 +52,12 @@ class ListingOut(BaseModel):
     captured_at: datetime
 
 
+class ListingSummaryOut(BaseModel):
+    count: int
+    latest_id: str | None = None
+    latest_captured_at: datetime | None = None
+
+
 class TargetUpsert(BaseModel):
     id: str | None = None
     name: str = Field(min_length=1, max_length=256)

backend/tests/test_targets_compare.py

@@ -160,3 +160,30 @@ def fake_reverse_geocode(lat: float, lng: float, *, zoom: int = 10) -> ReverseGe
 
         assert items[1]["metrics"]["distance_km"] is None
 
+
+def test_listings_summary_empty_then_one() -> None:
+    with TestClient(main.app) as client:
+        empty = client.get("/api/listings/summary")
+        assert empty.status_code == 200, empty.text
+        assert empty.json() == {"count": 0, "latest_id": None, "latest_captured_at": None}
+
+        created = client.post(
+            "/api/listings",
+            json={
+                "source": "airbnb",
+                "source_url": "https://www.airbnb.com/rooms/summary-test",
+                "title": "Summary test",
+                "currency": "USD",
+                "price_period": "unknown",
+                "captured_at": "2026-01-30T10:00:00Z",
+            },
+        )
+        assert created.status_code == 200, created.text
+        listing_id = created.json()["id"]
+
+        after = client.get("/api/listings/summary")
+        assert after.status_code == 200, after.text
+        data = after.json()
+        assert data["count"] == 1
+        assert data["latest_id"] == listing_id
+        assert data["latest_captured_at"] == "2026-01-30T10:00:00Z"

frontend/src/MapView.tsx

@@ -14,6 +14,7 @@ type RouteSummary = {
 
 type Props = {
   target: Target | null
+  initialCenter: { lat: number; lng: number } | null
   items: CompareItem[]
   selectedListingId: string | null
   onSelectListingId: (id: string) => void
@@ -89,6 +90,7 @@ function markerIcon(kind: 'target' | 'listing', opts?: { selected?: boolean }) {
 
 export default function MapView({
   target,
+  initialCenter,
   items,
   selectedListingId,
   onSelectListingId,
@@ -152,10 +154,10 @@ export default function MapView({
         }
         await loadGoogleMaps()
         if (cancelled) return
-        const startCenter = target ? { lat: target.lat, lng: target.lng } : US_CENTER
+        const startCenter = initialCenter ?? (target ? { lat: target.lat, lng: target.lng } : US_CENTER)
         const map = new google.maps.Map(containerRef.current!, {
           center: startCenter,
-          zoom: target ? 11 : 4,
+          zoom: target || initialCenter ? 11 : 4,
           mapTypeControl: false,
           streetViewControl: false,
           fullscreenControl: false,

frontend/src/api.ts

@@ -33,6 +33,12 @@ export type CompareResponse = {
   items: CompareItem[]
 }
 
+export type ListingSummary = {
+  count: number
+  latest_id: string | null
+  latest_captured_at: string | null
+}
+
 async function parseJsonOrThrow(res: Response): Promise<unknown> {
   const text = await res.text()
   if (!res.ok) {
@@ -55,6 +61,11 @@ export async function deleteListing(id: string): Promise<void> {
   await parseJsonOrThrow(res)
 }
 
+export async function fetchListingsSummary(): Promise<ListingSummary> {
+  const res = await fetch(apiUrl('/api/listings/summary'), { method: 'GET' })
+  return (await parseJsonOrThrow(res)) as ListingSummary
+}
+
 export async function upsertTarget(payload: {
   id?: string
   name: string

frontend/src/pages/ComparePage.tsx

@@ -1,10 +1,16 @@
 import '../App.css'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 
 import MapView from '../MapView'
-import type { CompareItem } from '../api'
-import { deleteListing, fetchCompare, reverseGeocode, upsertTarget } from '../api'
+import type { CompareItem, ListingSummary } from '../api'
+import {
+  deleteListing,
+  fetchCompare,
+  fetchListingsSummary,
+  reverseGeocode,
+  upsertTarget,
+} from '../api'
 
 type SortKey = 'distance' | 'price'
 type TargetLocationMode = 'address' | 'coords'
@@ -108,6 +114,9 @@ function App() {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
+  const lastListingSummaryRef = useRef<ListingSummary | null>(null)
+  const isAutoRefreshingRef = useRef(false)
+
   useEffect(() => {
     localStorage.setItem('easyrelocate_target_location_mode', targetLocationMode)
   }, [targetLocationMode])
@@ -152,19 +161,22 @@ function App() {
   }, [selectedItem])
 
   const refresh = useCallback(
-    async (opts?: { nextTargetId?: string | null }) => {
+    async (opts?: { nextTargetId?: string | null; silent?: boolean }) => {
       const id = opts?.nextTargetId ?? targetId
       if (!id) return
-      setLoading(true)
-      setError(null)
+      const silent = opts?.silent ?? false
+      if (!silent) {
+        setLoading(true)
+        setError(null)
+      }
       try {
         const res = await fetchCompare(id)
         setTarget(res.target)
         setCompareItems(res.items)
       } catch (e) {
-        setError(e instanceof Error ? e.message : String(e))
+        if (!silent) setError(e instanceof Error ? e.message : String(e))
       } finally {
-        setLoading(false)
+        if (!silent) setLoading(false)
       }
     },
     [targetId],
@@ -175,6 +187,56 @@ function App() {
     void refresh()
   }, [refresh, targetId])
 
+  useEffect(() => {
+    if (!targetId) return
+    let cancelled = false
+
+    const checkForNewListings = async (opts?: { force?: boolean }) => {
+      if (cancelled) return
+      if (!opts?.force && document.hidden) return
+      try {
+        const summary = await fetchListingsSummary()
+        if (cancelled) return
+
+        const prev = lastListingSummaryRef.current
+        lastListingSummaryRef.current = summary
+        const changed =
+          prev != null &&
+          (prev.count !== summary.count ||
+            prev.latest_id !== summary.latest_id ||
+            prev.latest_captured_at !== summary.latest_captured_at)
+
+        if (changed && !isAutoRefreshingRef.current) {
+          isAutoRefreshingRef.current = true
+          try {
+            await refresh({ nextTargetId: targetId, silent: true })
+          } finally {
+            isAutoRefreshingRef.current = false
+          }
+        }
+      } catch {
+        // ignore (offline / backend down)
+      }
+    }
+
+    void checkForNewListings({ force: true })
+
+    const interval = window.setInterval(() => {
+      void checkForNewListings()
+    }, 7000)
+
+    const onVisibilityChange = () => {
+      if (!document.hidden) void checkForNewListings({ force: true })
+    }
+    document.addEventListener('visibilitychange', onVisibilityChange)
+
+    return () => {
+      cancelled = true
+      window.clearInterval(interval)
+      document.removeEventListener('visibilitychange', onVisibilityChange)
+    }
+  }, [refresh, targetId])
+
   const onSaveTarget = async () => {
     const address = targetAddress.trim()
     const lat = parseNumberOrNull(targetLat)
@@ -315,6 +377,14 @@ function App() {
   }, [filteredAndSorted])
 
   const fitKey = target ? `${target.id}:${target.updated_at}` : 'no-target'
+  const initialCenter = useMemo(() => {
+    if (target) return { lat: target.lat, lng: target.lng }
+    const lat = parseNumberOrNull(targetLat)
+    const lng = parseNumberOrNull(targetLng)
+    if (lat == null || lng == null) return null
+    if (!isWithinUsBounds(lat, lng)) return null
+    return { lat, lng }
+  }, [target, targetLat, targetLng])
 
   return (
     <div className="app">
@@ -665,6 +735,7 @@ function App() {
         <main className="mapWrap">
           <MapView
             target={target}
+            initialCenter={initialCenter}
             items={filteredAndSorted}
             selectedListingId={selectedListingId}
             onSelectListingId={setSelectedListingId}