update frontend
This commit is contained in:
Your Name
parent
f6957f347f
commit
666ca2bc1d
|
|
@ -1,39 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
function getKmFromPost(post) {
|
||||
return (
|
||||
post.km ??
|
||||
post.distance_km ??
|
||||
post.distanceKm ??
|
||||
post.dist_km ??
|
||||
null
|
||||
);
|
||||
}
|
||||
|
||||
export default function PostCard({ post, selected, onSelect }) {
|
||||
const title = post.title || post.name || "Post";
|
||||
|
||||
const fullBody =
|
||||
post.body || post.content || post.text || "";
|
||||
|
||||
// texte court dans le Sociowall
|
||||
const body =
|
||||
fullBody.length > 80 ? fullBody.slice(0, 77) + "..." : fullBody;
|
||||
|
||||
const km = getKmFromPost(post);
|
||||
|
||||
function handleClick() {
|
||||
if (onSelect) onSelect(post);
|
||||
}
|
||||
|
||||
return (
|
||||
<article
|
||||
className={"post-card" + (selected ? " selected" : "")}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<h3>{title}</h3>
|
||||
<p>{body}</p>
|
||||
{km != null && <span className="post-km">{km} km</span>}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { fetchPosts } from "../../api/client";
|
||||
|
||||
function useHashParams() {
|
||||
const [hash, setHash] = useState(window.location.hash || "");
|
||||
useEffect(() => {
|
||||
const onHash = () => setHash(window.location.hash || "");
|
||||
window.addEventListener("hashchange", onHash);
|
||||
return () => window.removeEventListener("hashchange", onHash);
|
||||
}, []);
|
||||
const q = new URLSearchParams(hash.replace(/^#wall\??/, ""));
|
||||
return { hash, params: q };
|
||||
}
|
||||
|
||||
export default function WallPage() {
|
||||
const { params } = useHashParams();
|
||||
const [posts, setPosts] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const filters = useMemo(() => {
|
||||
const f = {};
|
||||
if (params.get("category")) f.category = params.get("category");
|
||||
if (params.get("sub")) f.subCategory = params.get("sub");
|
||||
if (params.get("time")) f.time = params.get("time");
|
||||
if (params.get("lat")) f.lat = Number(params.get("lat"));
|
||||
if (params.get("lon")) f.lon = Number(params.get("lon"));
|
||||
if (params.get("r")) f.radiusKm = Number(params.get("r"));
|
||||
return f;
|
||||
}, [params]);
|
||||
|
||||
useEffect(() => {
|
||||
let off = false;
|
||||
(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await fetchPosts(filters);
|
||||
if (!off) setPosts(Array.isArray(data) ? data : []);
|
||||
} finally {
|
||||
if (!off) setLoading(false);
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
off = true;
|
||||
};
|
||||
}, [filters]);
|
||||
|
||||
return (
|
||||
<section className="wall-page">
|
||||
<div className="wall-header">
|
||||
<button className="wall-back" onClick={() => (window.location.hash = "")}>
|
||||
← Back to map
|
||||
</button>
|
||||
<div className="wall-title">SOCIOWALL — full view</div>
|
||||
</div>
|
||||
|
||||
<div className="wall-content">
|
||||
{loading && <div>Loading…</div>}
|
||||
{!loading && posts.length === 0 && <div>No posts with these filters.</div>}
|
||||
{posts.map((p) => (
|
||||
<article key={p.id ?? p._id} className="wall-post">
|
||||
<h3>{p.title || "Post"}</h3>
|
||||
<p>{p.snippet || p.body || p.text || ""}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue