wrongmove: round-3 fix sweep — scrape pipeline, BUY tab, filter URL state, render hygiene, map polish
Coordinated fix across 31 bugs found in a parallel QA pass. Findings docs at /tmp/wrongmove-bugs/qa-round-3/qa{1,2,3,4}-*.md.
## Backend / scrape (Fix-1) — 8 bugs
- B1 [P0] Scrape totally broken on prod: pod UID 100 vs NFS dir 1000:1000 mode 775 → PermissionError on every never-seen listing. Switched Dockerfile to explicit `useradd --uid 1000 --gid 1000`; added securityContext + chown initContainer to k8s/{api,celery-beat}-deployment.yaml. Celery worker manifest lives outside this repo — Dockerfile UID change is the load-bearing fix.
- B4 [P1] Celery broker reaped every ~30s by Redis HAProxy idle timeout. Added `broker_transport_options` / `result_backend_transport_options` with `socket_keepalive=True, health_check_interval=25` in celery_app.py + same kwargs on every redis.from_url/Redis call across services/, utils/redis_lock.py, redis_repository.py.
- B5 [P1] dump_listings_task never published terminal FAILURE to the task_progress pub/sub channel — UI polled forever. Wrap body in try/except that publishes FAILURE before re-raising.
- B6 [P1] _process_worker had no per-listing exception handler — one bad listing killed the whole scrape via asyncio.gather. Wrap loop body in try/except Exception (re-raises CancelledError).
- B20 [P2] dump_listings_task gained time_limit=3600, soft_time_limit=3500, acks_late=True.
- B21 [P2] RedisRepository moved off shared db0 (was alongside paperless-ngx) to db3 via REDIS_USER_DB env var; keys prefixed `wrongmove:user:`.
- B32 [P3] redis_lock now uses uuid4() owner token + Lua compare-and-delete.
- B33 [P3] Slack notify in refresh_listings → asyncio.create_task (fire-and-forget).
## Frontend filter system (Fix-2) — 7 bugs
- B2 [P0] BUY tab click triggered "Maximum update depth exceeded" → ErrorBoundary. Replaced the three mutually-triggering useEffects in FilterBar with a single one-way controlled-value flow (URL → parent state → form), guarded by previousListingTypeRef so price-defaults fires once per real transition.
- B3 [P0] Filter values never reached the URL. Wired useFilterParams.setFilterValues into FilterBar/FilterPanel onSubmit + handleRemoveChip + new handleResetAllFilters; fed parsed filterValues into both forms' defaultValues; added URL→form sync via form.reset on browser back/forward.
- B8 [P1] Chip removal now resets form state via new FilterBar onFormReady callback — More badge no longer sticks.
- B12 [P2] Desktop swipe-review FAB added next to header (mobile FAB unchanged).
- B17 [P2] "Reset all" affordance on chip strip.
- B22 [P2] formatPrice precision: 1500 → £1.5k, 2500 → £2.5k (no longer collides with £2k/£3k defaults).
- B30 [P3] last_seen_days input gained min={0}.
## Frontend render hygiene + data integrity (Fix-3) — 8 bugs
- B7 [P1] streamingService bails on first non-NDJSON chunk (HTML response = backend down) and throws StreamParseError so the existing AlertError dialog surfaces a single user-visible error instead of 18× console.error spam.
- B9 [P1] formatDuration widened to (null|undefined|number): returns "—" for non-finite or negative, caps implausibly large values.
- B10 [P1] PropertyCard / PropertyCardCompact / SwipeCard JSX leaves render "—" for null total_price/qm/qmprice (was "£0/0 m²/£0/m²" — looked like free listings).
- B13 [P2] hexgrid worker reduceAverage uses Number.isFinite filter instead of !isNaN (which incorrectly accepted null → 0, biasing per-hex averages low).
- B14 [P2] ListingDetail Overview wraps agency in "Listed by" labelled block so it can't collapse to a bare agency name.
- B15 [P2] Compact POIDistanceBadges iterates all three travel modes with "—" for missing, matching the detail-sheet Travel table.
- B24 [P3] Drawer.Description (sr-only) added to ListingDetailSheet + MobileBottomSheet to silence Radix a11y warning.
- B25 [P3] lastSeenDays clamped to ≥0 so future timestamps don't render as "-7d ago".
## Frontend map / carousel / tasks polish (Fix-4) — 8 bugs
- B11 [P2] HexgridHeatmapClient destroy race: Map.tsx adds .catch() + ref guard so post-destroy promise rejections are silent no-ops. Verified by browser smoke (24 rapid Map↔List toggles → 0 pageErrors).
- B16 [P2] PhotoCarousel + inner CardCarousel gained keyboard nav (Arrow keys).
- B18 [P2] Default map center moved from Czech Republic to London (zoom 10).
- B19+B29 [P2/P3] Mapbox token: no longer hard-coded fallback; reads env-only and shows a clear "Map unavailable — set VITE_MAPBOX_TOKEN" banner when missing.
- B23 [P3] PhotoCarousel suppresses "1/1" counter for single-photo listings; added onError fallback for broken URLs.
- B26 [P3] PhotoCarousel only enables loop when photos.length > 1.
- B27 [P3] TaskIndicator cancel/clear-all buttons gained aria-label + data-testid.
- B28 [P3] useTaskProgress strips terminal-local task IDs from the polling union — no more forever-poll on completed tasks.
## Tests
74 new vitest tests + 18 new pytest tests. Local: tsc clean, 201 vitest tests pass, 633 pytest tests pass.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Viktor Barzin
parent
0b5308200e
commit
a42944a756
46 changed files with 2260 additions and 238 deletions
|
|
@ -2,7 +2,7 @@ import { useState, useCallback, useEffect } from 'react';
|
|||
import useEmblaCarousel from 'embla-carousel-react';
|
||||
import { ExternalLink, Footprints, Bike, Train } from 'lucide-react';
|
||||
import type { PropertyProperties, POIDistanceInfo, POI } from '@/types';
|
||||
import { formatDuration } from '@/utils/format';
|
||||
import { formatDuration, formatPrice, formatInteger, formatPricePerSqmShort, isFiniteNumber, EM_DASH } from '@/utils/format';
|
||||
|
||||
function TravelModeIcon({ mode }: { mode: string }) {
|
||||
switch (mode) {
|
||||
|
|
@ -13,15 +13,16 @@ function TravelModeIcon({ mode }: { mode: string }) {
|
|||
}
|
||||
}
|
||||
|
||||
const TRAVEL_MODES: Array<'WALK' | 'BICYCLE' | 'TRANSIT'> = ['WALK', 'BICYCLE', 'TRANSIT'];
|
||||
|
||||
function POIDistanceBadges({ distances }: { distances: POIDistanceInfo[] }) {
|
||||
if (!distances || distances.length === 0) return null;
|
||||
|
||||
// Group by POI name
|
||||
const byPoi = new Map<string, POIDistanceInfo[]>();
|
||||
// Group by POI name, indexing by travel_mode for consistent rendering.
|
||||
const byPoi = new Map<string, Map<string, POIDistanceInfo>>();
|
||||
for (const d of distances) {
|
||||
const existing = byPoi.get(d.poi_name) || [];
|
||||
existing.push(d);
|
||||
byPoi.set(d.poi_name, existing);
|
||||
if (!byPoi.has(d.poi_name)) byPoi.set(d.poi_name, new Map());
|
||||
byPoi.get(d.poi_name)!.set(d.travel_mode, d);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -29,20 +30,21 @@ function POIDistanceBadges({ distances }: { distances: POIDistanceInfo[] }) {
|
|||
{Array.from(byPoi.entries()).map(([poiName, dists]) => (
|
||||
<div key={poiName} className="inline-flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<span className="font-medium">{poiName}:</span>
|
||||
{dists.map(d => (
|
||||
<span key={d.travel_mode} className="inline-flex items-center gap-0.5" title={`${d.travel_mode} to ${poiName}`}>
|
||||
<TravelModeIcon mode={d.travel_mode} />
|
||||
{formatDuration(d.duration_seconds)}
|
||||
</span>
|
||||
))}
|
||||
{TRAVEL_MODES.map(mode => {
|
||||
const d = dists.get(mode);
|
||||
return (
|
||||
<span key={mode} className="inline-flex items-center gap-0.5" title={`${mode} to ${poiName}`}>
|
||||
<TravelModeIcon mode={mode} />
|
||||
{d ? formatDuration(d.duration_seconds) : EM_DASH}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const TRAVEL_MODES: Array<'WALK' | 'BICYCLE' | 'TRANSIT'> = ['WALK', 'BICYCLE', 'TRANSIT'];
|
||||
|
||||
function AllPOIDistances({ pois, distances }: { pois: POI[]; distances?: POIDistanceInfo[] }) {
|
||||
// Index distances by poi_id + travel_mode for O(1) lookup
|
||||
const distMap = new Map<string, POIDistanceInfo>();
|
||||
|
|
@ -73,7 +75,10 @@ function AllPOIDistances({ pois, distances }: { pois: POI[]; distances?: POIDist
|
|||
}
|
||||
|
||||
function CardCarousel({ photos, altText }: { photos: string[]; altText?: string }) {
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
|
||||
// Only loop when there's more than one image (single-image carousels should
|
||||
// be static — mirrors PhotoCarousel B26).
|
||||
const hasMultiple = photos.length > 1;
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: hasMultiple });
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
||||
const onSelect = useCallback(() => {
|
||||
|
|
@ -87,7 +92,29 @@ function CardCarousel({ photos, altText }: { photos: string[]; altText?: string
|
|||
return () => { emblaApi.off('select', onSelect); };
|
||||
}, [emblaApi, onSelect]);
|
||||
|
||||
if (photos.length <= 1) {
|
||||
// Keyboard nav for the card carousel (B16). Listener is scoped to the
|
||||
// embla root so it only fires when the user focuses this carousel.
|
||||
useEffect(() => {
|
||||
if (!emblaApi || !hasMultiple) return;
|
||||
const root = emblaApi.rootNode();
|
||||
if (!root) return;
|
||||
if (root.tabIndex === -1) {
|
||||
root.tabIndex = 0;
|
||||
}
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'ArrowLeft') {
|
||||
e.preventDefault();
|
||||
emblaApi.scrollPrev();
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
e.preventDefault();
|
||||
emblaApi.scrollNext();
|
||||
}
|
||||
};
|
||||
root.addEventListener('keydown', handleKey);
|
||||
return () => { root.removeEventListener('keydown', handleKey); };
|
||||
}, [emblaApi, hasMultiple]);
|
||||
|
||||
if (!hasMultiple) {
|
||||
return (
|
||||
<img
|
||||
src={photos[0]}
|
||||
|
|
@ -100,7 +127,12 @@ function CardCarousel({ photos, altText }: { photos: string[]; altText?: string
|
|||
|
||||
return (
|
||||
<div className="relative w-full h-full" onClick={e => e.stopPropagation()}>
|
||||
<div className="overflow-hidden h-full" ref={emblaRef}>
|
||||
<div
|
||||
className="overflow-hidden h-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
||||
ref={emblaRef}
|
||||
aria-label="Property photos"
|
||||
role="region"
|
||||
>
|
||||
<div className="flex h-full">
|
||||
{photos.map((url, i) => (
|
||||
<div key={i} className="flex-[0_0_100%] min-w-0 h-full">
|
||||
|
|
@ -145,22 +177,28 @@ export function PropertyCard({
|
|||
allPOIs,
|
||||
onClick,
|
||||
}: PropertyCardProps) {
|
||||
// BUY listings may have null numeric / date fields; coerce so renders don't throw.
|
||||
// BUY listings may have null numeric / date fields; render "—" at the JSX leaf
|
||||
// when the source is null/undefined/non-finite so the user can't mistake a missing
|
||||
// value for a real £0 / 0 m².
|
||||
const lastSeenRaw = property.last_seen;
|
||||
const lastSeenDate = typeof lastSeenRaw === 'string' ? lastSeenRaw.split('T')[0] : null;
|
||||
const lastSeenTime = lastSeenDate ? new Date(lastSeenDate).getTime() : NaN;
|
||||
const lastSeenDays = Number.isFinite(lastSeenTime)
|
||||
const lastSeenDaysRaw = Number.isFinite(lastSeenTime)
|
||||
? Math.round((Date.now() - lastSeenTime) / (1000 * 60 * 60 * 24))
|
||||
: null;
|
||||
// Clamp future timestamps to 0 so we don't render "-7d ago" for stale BUY rows.
|
||||
const lastSeenDays = lastSeenDaysRaw !== null ? Math.max(0, lastSeenDaysRaw) : null;
|
||||
// Coerced numerics used only where a number is structurally required (alt text,
|
||||
// boolean comparisons). All visible numeric leaves use the format helpers.
|
||||
const safeNum = (v: unknown): number => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
|
||||
const safeTotalPrice = safeNum(property.total_price);
|
||||
const safeQm = safeNum(property.qm);
|
||||
const safeQmprice = safeNum(property.qmprice);
|
||||
const safeRooms = safeNum(property.rooms);
|
||||
|
||||
// Determine if this is a good deal
|
||||
const isGoodDeal = avgPricePerSqm && property.qmprice > 0 && property.qmprice < avgPricePerSqm * 0.9;
|
||||
const isExpensive = avgPricePerSqm && property.qmprice > avgPricePerSqm * 1.1;
|
||||
// Determine if this is a good deal (guard requires a finite qmprice > 0)
|
||||
const qmpriceForCompare = isFiniteNumber(property.qmprice) ? property.qmprice : null;
|
||||
const isGoodDeal = avgPricePerSqm && qmpriceForCompare !== null && qmpriceForCompare > 0 && qmpriceForCompare < avgPricePerSqm * 0.9;
|
||||
const isExpensive = avgPricePerSqm && qmpriceForCompare !== null && qmpriceForCompare > avgPricePerSqm * 1.1;
|
||||
|
||||
const priceIndicator = isGoodDeal
|
||||
? { dotColor: 'bg-[var(--deal-good)]', label: 'Good deal' }
|
||||
|
|
@ -195,8 +233,8 @@ export function PropertyCard({
|
|||
{/* Price */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-lg font-bold tracking-tight">
|
||||
£{safeTotalPrice.toLocaleString()}
|
||||
{property.listing_type !== 'BUY' && (
|
||||
{formatPrice(property.total_price)}
|
||||
{property.listing_type !== 'BUY' && isFiniteNumber(property.total_price) && (
|
||||
<span className="text-muted-foreground font-normal text-sm">/mo</span>
|
||||
)}
|
||||
</span>
|
||||
|
|
@ -210,11 +248,11 @@ export function PropertyCard({
|
|||
|
||||
{/* Key metrics on one line */}
|
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground mt-0.5">
|
||||
<span>{safeRooms}</span><span>bed</span>
|
||||
<span>{formatInteger(property.rooms)}</span><span>bed</span>
|
||||
<span>·</span>
|
||||
<span>{safeQm} m²</span>
|
||||
<span>{formatInteger(property.qm)} m²</span>
|
||||
<span>·</span>
|
||||
<span>£{safeQmprice}/m²</span>
|
||||
<span>{formatPricePerSqmShort(property.qmprice)}</span>
|
||||
</div>
|
||||
|
||||
{/* Agency + freshness */}
|
||||
|
|
@ -271,8 +309,8 @@ export function PropertyCard({
|
|||
{/* Price as dominant element */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-lg font-bold tracking-tight">
|
||||
£{safeTotalPrice.toLocaleString()}
|
||||
{property.listing_type !== 'BUY' && (
|
||||
{formatPrice(property.total_price)}
|
||||
{property.listing_type !== 'BUY' && isFiniteNumber(property.total_price) && (
|
||||
<span className="text-muted-foreground font-normal text-sm">/mo</span>
|
||||
)}
|
||||
</span>
|
||||
|
|
@ -286,11 +324,11 @@ export function PropertyCard({
|
|||
|
||||
{/* Key metrics on one line */}
|
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground">
|
||||
<span>{safeRooms}</span><span>bed</span>
|
||||
<span>{formatInteger(property.rooms)}</span><span>bed</span>
|
||||
<span>·</span>
|
||||
<span>{safeQm} m²</span>
|
||||
<span>{formatInteger(property.qm)} m²</span>
|
||||
<span>·</span>
|
||||
<span>£{safeQmprice}/m²</span>
|
||||
<span>{formatPricePerSqmShort(property.qmprice)}</span>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue