feat: add SwipeCard and SwipeReviewMode components with gesture support
This commit is contained in:
Viktor Barzin
parent
4877a5fc9f
commit
d350b806ba
2 changed files with 327 additions and 0 deletions
145
frontend/src/components/SwipeCard.tsx
Normal file
145
frontend/src/components/SwipeCard.tsx
Normal file
|
|
@ -0,0 +1,145 @@
|
||||||
|
import { useRef } from 'react';
|
||||||
|
import { animated, useSpring } from '@react-spring/web';
|
||||||
|
import { useDrag } from '@use-gesture/react';
|
||||||
|
import { Bed, Maximize2, ExternalLink } from 'lucide-react';
|
||||||
|
import type { PropertyFeature } from '@/types';
|
||||||
|
|
||||||
|
interface SwipeCardProps {
|
||||||
|
feature: PropertyFeature;
|
||||||
|
onSwipe: (direction: 'left' | 'right' | 'up') => void;
|
||||||
|
isTop: boolean;
|
||||||
|
stackIndex: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SWIPE_THRESHOLD = 100;
|
||||||
|
|
||||||
|
export function SwipeCard({ feature, onSwipe, isTop, stackIndex }: SwipeCardProps) {
|
||||||
|
const hasSwiped = useRef(false);
|
||||||
|
const p = feature.properties;
|
||||||
|
|
||||||
|
const [style, api] = useSpring(() => ({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
rotate: 0,
|
||||||
|
scale: 1 - stackIndex * 0.05,
|
||||||
|
opacity: stackIndex <= 2 ? 1 : 0,
|
||||||
|
config: { tension: 300, friction: 25 },
|
||||||
|
}));
|
||||||
|
|
||||||
|
const bind = useDrag(
|
||||||
|
({ active, movement: [mx, my], velocity: [vx, vy], direction: [dx, dy] }) => {
|
||||||
|
if (!isTop || hasSwiped.current) return;
|
||||||
|
|
||||||
|
if (!active) {
|
||||||
|
const isSwipeRight = mx > SWIPE_THRESHOLD || (vx > 0.5 && dx > 0);
|
||||||
|
const isSwipeLeft = mx < -SWIPE_THRESHOLD || (vx > 0.5 && dx < 0);
|
||||||
|
const isSwipeUp = my < -SWIPE_THRESHOLD || (vy > 0.5 && dy < 0);
|
||||||
|
|
||||||
|
if (isSwipeRight || isSwipeLeft || isSwipeUp) {
|
||||||
|
hasSwiped.current = true;
|
||||||
|
const direction = isSwipeRight ? 'right' : isSwipeLeft ? 'left' : 'up';
|
||||||
|
const flyOutX = isSwipeRight ? 500 : isSwipeLeft ? -500 : 0;
|
||||||
|
const flyOutY = isSwipeUp ? -500 : 0;
|
||||||
|
api.start({
|
||||||
|
x: flyOutX,
|
||||||
|
y: flyOutY,
|
||||||
|
rotate: isSwipeRight ? 15 : isSwipeLeft ? -15 : 0,
|
||||||
|
opacity: 0,
|
||||||
|
onRest: () => onSwipe(direction),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
api.start({ x: 0, y: 0, rotate: 0 });
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
api.start({
|
||||||
|
x: mx,
|
||||||
|
y: my,
|
||||||
|
rotate: mx / 20,
|
||||||
|
immediate: true,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ filterTaps: true, enabled: isTop },
|
||||||
|
);
|
||||||
|
|
||||||
|
const overlayOpacity = style.x.to((x: number) => Math.min(Math.abs(x) / 150, 0.4));
|
||||||
|
const overlayColor = style.x.to((x: number) =>
|
||||||
|
x > 0 ? 'rgba(34,197,94,1)' : 'rgba(239,68,68,1)',
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<animated.div
|
||||||
|
{...(isTop ? bind() : {})}
|
||||||
|
style={{
|
||||||
|
...style,
|
||||||
|
touchAction: 'none',
|
||||||
|
position: 'absolute' as const,
|
||||||
|
width: '100%',
|
||||||
|
zIndex: 10 - stackIndex,
|
||||||
|
top: stackIndex * 8,
|
||||||
|
}}
|
||||||
|
className="cursor-grab active:cursor-grabbing"
|
||||||
|
>
|
||||||
|
<div className="bg-background rounded-2xl border shadow-lg overflow-hidden mx-4">
|
||||||
|
{/* Color overlay */}
|
||||||
|
{isTop && (
|
||||||
|
<animated.div
|
||||||
|
className="absolute inset-0 z-10 rounded-2xl pointer-events-none"
|
||||||
|
style={{ backgroundColor: overlayColor, opacity: overlayOpacity }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Photo */}
|
||||||
|
<div className="h-48 bg-muted relative">
|
||||||
|
{p.photo_thumbnail && (
|
||||||
|
<img src={p.photo_thumbnail} alt="Property" className="w-full h-full object-cover" />
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="absolute top-3 right-3 bg-background/80 backdrop-blur-sm rounded-full p-2 z-20"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
window.open(p.url, '_blank', 'noopener,noreferrer');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ExternalLink className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Details */}
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="text-xl font-semibold">
|
||||||
|
£{p.total_price.toLocaleString()}
|
||||||
|
{p.listing_type !== 'BUY' && (
|
||||||
|
<span className="text-muted-foreground font-normal text-sm">/mo</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 mt-2 text-sm text-muted-foreground">
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Bed className="h-4 w-4" /> {p.rooms} bed
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Maximize2 className="h-4 w-4" /> {p.qm} m²
|
||||||
|
</span>
|
||||||
|
<span>£{p.qmprice}/m²</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* POI distances */}
|
||||||
|
{p.poi_distances && p.poi_distances.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-1.5 mt-3">
|
||||||
|
{p.poi_distances.slice(0, 4).map((d) => (
|
||||||
|
<span
|
||||||
|
key={`${d.poi_id}_${d.travel_mode}`}
|
||||||
|
className="text-xs bg-muted px-2 py-0.5 rounded"
|
||||||
|
>
|
||||||
|
{d.poi_name}: {Math.round(d.duration_seconds / 60)}m
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</animated.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
182
frontend/src/components/SwipeReviewMode.tsx
Normal file
182
frontend/src/components/SwipeReviewMode.tsx
Normal file
|
|
@ -0,0 +1,182 @@
|
||||||
|
import { useState, useCallback, useEffect } from 'react';
|
||||||
|
import { X, Heart, ArrowUp, Undo2, ArrowLeft } from 'lucide-react';
|
||||||
|
import { Button } from './ui/button';
|
||||||
|
import { SwipeCard } from './SwipeCard';
|
||||||
|
import type { PropertyFeature, DecisionType } from '@/types';
|
||||||
|
|
||||||
|
interface SwipeReviewModeProps {
|
||||||
|
features: PropertyFeature[];
|
||||||
|
onDecide: (listingId: number, decision: DecisionType, listingType?: 'RENT' | 'BUY') => void;
|
||||||
|
onClear: (listingId: number, listingType?: 'RENT' | 'BUY') => void;
|
||||||
|
onClose: () => void;
|
||||||
|
getDecision: (listingId: number, listingType?: string) => DecisionType | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HistoryEntry {
|
||||||
|
index: number;
|
||||||
|
listingId: number;
|
||||||
|
listingType: string;
|
||||||
|
action: 'liked' | 'disliked' | 'skipped';
|
||||||
|
}
|
||||||
|
|
||||||
|
function getListingId(feature: PropertyFeature): number {
|
||||||
|
const parts = feature.properties.url.split('/');
|
||||||
|
return parseInt(parts[parts.length - 1], 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getListingType(feature: PropertyFeature): 'RENT' | 'BUY' {
|
||||||
|
return feature.properties.listing_type === 'BUY' ? 'BUY' : 'RENT';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SwipeReviewMode({
|
||||||
|
features,
|
||||||
|
onDecide,
|
||||||
|
onClear,
|
||||||
|
onClose,
|
||||||
|
getDecision,
|
||||||
|
}: SwipeReviewModeProps) {
|
||||||
|
// Filter to only undecided features
|
||||||
|
const undecided = features.filter((f) => {
|
||||||
|
const id = getListingId(f);
|
||||||
|
const type = getListingType(f);
|
||||||
|
return getDecision(id, type) === undefined;
|
||||||
|
});
|
||||||
|
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
|
const [history, setHistory] = useState<HistoryEntry[]>([]);
|
||||||
|
|
||||||
|
const handleSwipe = useCallback(
|
||||||
|
(direction: 'left' | 'right' | 'up') => {
|
||||||
|
const feature = undecided[currentIndex];
|
||||||
|
if (!feature) return;
|
||||||
|
|
||||||
|
const listingId = getListingId(feature);
|
||||||
|
const listingType = getListingType(feature);
|
||||||
|
|
||||||
|
let action: HistoryEntry['action'];
|
||||||
|
if (direction === 'right') {
|
||||||
|
action = 'liked';
|
||||||
|
onDecide(listingId, 'liked', listingType);
|
||||||
|
} else if (direction === 'left') {
|
||||||
|
action = 'disliked';
|
||||||
|
onDecide(listingId, 'disliked', listingType);
|
||||||
|
} else {
|
||||||
|
action = 'skipped';
|
||||||
|
}
|
||||||
|
|
||||||
|
setHistory((prev) => [...prev, { index: currentIndex, listingId, listingType, action }]);
|
||||||
|
setCurrentIndex((prev) => prev + 1);
|
||||||
|
},
|
||||||
|
[currentIndex, undecided, onDecide],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleUndo = useCallback(() => {
|
||||||
|
const lastEntry = history[history.length - 1];
|
||||||
|
if (!lastEntry) return;
|
||||||
|
|
||||||
|
if (lastEntry.action !== 'skipped') {
|
||||||
|
onClear(lastEntry.listingId, lastEntry.listingType as 'RENT' | 'BUY');
|
||||||
|
}
|
||||||
|
setHistory((prev) => prev.slice(0, -1));
|
||||||
|
setCurrentIndex((prev) => prev - 1);
|
||||||
|
}, [history, onClear]);
|
||||||
|
|
||||||
|
// Keyboard shortcuts
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'ArrowRight') handleSwipe('right');
|
||||||
|
else if (e.key === 'ArrowLeft') handleSwipe('left');
|
||||||
|
else if (e.key === 'ArrowUp') handleSwipe('up');
|
||||||
|
else if ((e.ctrlKey || e.metaKey) && e.key === 'z') handleUndo();
|
||||||
|
else if (e.key === 'Escape') onClose();
|
||||||
|
};
|
||||||
|
window.addEventListener('keydown', handler);
|
||||||
|
return () => window.removeEventListener('keydown', handler);
|
||||||
|
}, [handleSwipe, handleUndo, onClose]);
|
||||||
|
|
||||||
|
const isFinished = currentIndex >= undecided.length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 bg-background flex flex-col">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between px-4 py-3 border-b">
|
||||||
|
<Button variant="ghost" size="sm" onClick={onClose}>
|
||||||
|
<ArrowLeft className="h-4 w-4 mr-1" /> Back
|
||||||
|
</Button>
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{Math.min(currentIndex + 1, undecided.length)} / {undecided.length}
|
||||||
|
</span>
|
||||||
|
<div className="w-16" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card stack */}
|
||||||
|
<div className="flex-1 relative overflow-hidden flex items-start justify-center pt-4">
|
||||||
|
{isFinished ? (
|
||||||
|
<div className="flex items-center justify-center h-full">
|
||||||
|
<div className="text-center p-8">
|
||||||
|
<p className="text-xl font-semibold mb-2">All done!</p>
|
||||||
|
<p className="text-muted-foreground mb-4">
|
||||||
|
You've reviewed all {undecided.length} properties.
|
||||||
|
</p>
|
||||||
|
<Button onClick={onClose}>Back to listings</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="relative w-full max-w-md h-full">
|
||||||
|
{undecided.slice(currentIndex, currentIndex + 3).map((feature, i) => (
|
||||||
|
<SwipeCard
|
||||||
|
key={feature.properties.url}
|
||||||
|
feature={feature}
|
||||||
|
onSwipe={handleSwipe}
|
||||||
|
isTop={i === 0}
|
||||||
|
stackIndex={i}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action buttons */}
|
||||||
|
{!isFinished && (
|
||||||
|
<div className="flex items-center justify-center gap-6 py-6 px-4">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="lg"
|
||||||
|
className="rounded-full h-14 w-14 border-red-300 text-red-500 hover:bg-red-50"
|
||||||
|
onClick={() => handleSwipe('left')}
|
||||||
|
>
|
||||||
|
<X className="h-6 w-6" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="rounded-full h-10 w-10"
|
||||||
|
onClick={handleUndo}
|
||||||
|
disabled={history.length === 0}
|
||||||
|
>
|
||||||
|
<Undo2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="rounded-full h-10 w-10"
|
||||||
|
onClick={() => handleSwipe('up')}
|
||||||
|
>
|
||||||
|
<ArrowUp className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="lg"
|
||||||
|
className="rounded-full h-14 w-14 border-green-300 text-green-500 hover:bg-green-50"
|
||||||
|
onClick={() => handleSwipe('right')}
|
||||||
|
>
|
||||||
|
<Heart className="h-6 w-6" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue