54 lines
1.4 KiB
React
54 lines
1.4 KiB
React
import React, { useState, useMemo } from "react";
|
|
import PostCard from "./PostCard";
|
|
|
|
function getKmFromPost(post) {
|
|
return post.km ?? post.distance_km ?? post.distanceKm ?? post.dist_km ?? null;
|
|
}
|
|
|
|
export default function PostList({ posts, loading, error, selectedPost, onSelectPost }) {
|
|
const [kmFilter, setKmFilter] = useState(1000);
|
|
|
|
const filtered = useMemo(
|
|
() =>
|
|
posts.filter((p) => {
|
|
const km = getKmFromPost(p);
|
|
if (km == null) return true;
|
|
return km <= kmFilter;
|
|
}),
|
|
[posts, kmFilter]
|
|
);
|
|
|
|
return (
|
|
<div className="post-list">
|
|
<div className="post-list-header">
|
|
<div className="km-filter">
|
|
<label>
|
|
Rayon : <span>{kmFilter} km</span>
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={1000}
|
|
value={kmFilter}
|
|
onChange={(e) => setKmFilter(Number(e.target.value))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{loading && <p className="status-text">Chargement...</p>}
|
|
{error && <p className="status-text status-error">{error}</p>}
|
|
|
|
{filtered.map((p) => (
|
|
<PostCard
|
|
key={p.id ?? p._id}
|
|
post={p}
|
|
selected={selectedPost && (selectedPost.id ?? selectedPost._id) === (p.id ?? p._id)}
|
|
onSelect={onSelectPost}
|
|
/>
|
|
))}
|
|
|
|
{!loading && filtered.length === 0 && <p className="status-text">Aucun post dans ce rayon.</p>}
|
|
</div>
|
|
);
|
|
}
|