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