diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx index 6a1800e..7c36453 100644 --- a/src/components/Map/MapView.jsx +++ b/src/components/Map/MapView.jsx @@ -1,7 +1,8 @@ import React, { useEffect, useState } from "react"; import "maplibre-gl/dist/maplibre-gl.css"; import "../../styles/mapMarkers.css"; -import "../../styles/mapLayout.css"; +import "../../styles/overlays.css"; +import "../../styles/posts.css"; import { createPost } from "../../api/client"; import { @@ -15,7 +16,6 @@ import { usePostsEngine } from "./usePostsEngine"; import PostList from "../Posts/PostList"; export default function MapView() { - // MAP + refs const { containerRef, mapRef, @@ -25,15 +25,12 @@ export default function MapView() { hasLastView, } = useMapCore(); - // FILTRES const [mainFilter, setMainFilter] = useState("All"); const [timeFilter, setTimeFilter] = useState("RECENT"); const [subFilter, setSubFilter] = useState("All"); - // USER POSITION const userPosition = useUserPosition(mapRef, hasLastView); - // POSTS ENGINE (markers + Sociowall) const { status, visiblePosts, @@ -50,10 +47,8 @@ export default function MapView() { expandedElRef, }); - // SOCIOWALL selection const [selectedPost, setSelectedPost] = useState(null); - // NEW POST (overlay) const [isCreating, setIsCreating] = useState(false); const [draftTitle, setDraftTitle] = useState(""); const [draftBody, setDraftBody] = useState(""); @@ -65,8 +60,6 @@ export default function MapView() { const [isSaving, setIsSaving] = useState(false); const [saveError, setSaveError] = useState(""); - /* ================= FILTRES (bas) ================= */ - const bottomCategories = FILTER_CATEGORY_MAP[mainFilter] || ["All"]; useEffect(() => { @@ -76,59 +69,34 @@ export default function MapView() { } }, [mainFilter, bottomCategories, subFilter]); - /* ================= WEBSOCKET ================= */ - useEffect(() => { const proto = window.location.protocol === "https:" ? "wss" : "ws"; const host = window.location.port === "5173" ? `${window.location.hostname}:8081` : window.location.host; - const wsUrl = `${proto}://${host}/ws`; let ws; - try { ws = new WebSocket(wsUrl); - } catch (e) { - console.warn("WebSocket init error:", e); + } catch { return; } - ws.onmessage = (ev) => { try { const msg = JSON.parse(ev.data); if (msg.type === "new_post" && msg.post) { handleIncomingPost(msg.post); } - } catch { - // ignore - } - }; - - ws.onerror = (e) => { - console.warn("WebSocket error:", e); - }; - - return () => { - if (ws && ws.readyState === WebSocket.OPEN) { - ws.close(); - } + } catch {} }; + return () => ws && ws.close(); }, [handleIncomingPost]); - /* ================= ACTIONS UI ================= */ - const handleFlyToMe = () => { const map = mapRef.current; if (!map || !userPosition) return; - map.flyTo({ - center: userPosition, - zoom: 9, - speed: 1.2, - curve: 1.5, - essential: true, - }); + map.flyTo({ center: userPosition, zoom: 9, speed: 1.2 }); }; const handlePickCenter = () => { @@ -140,10 +108,8 @@ export default function MapView() { const handleOpenCreate = () => { setIsCreating(true); - setSaveError(""); setDraftTitle(""); setDraftBody(""); - const main = mainFilter === "All" ? "News" : mainFilter; setDraftCategory(main); const list = CREATE_CATEGORY_MAP[main] || CREATE_CATEGORY_MAP.News; @@ -151,55 +117,37 @@ export default function MapView() { setDraftCoords(null); }; + const handleSearchClick = () => { + alert("🔍 Search feature coming soon!"); + }; + const handleSubmitPost = async () => { if (isSaving) return; setSaveError(""); - const map = mapRef.current; if (!map) return; - - let coords = draftCoords; - if (!coords) { - const center = map.getCenter(); - coords = [center.lng, center.lat]; - } - - if (!coords) { - setSaveError("Position inconnue. Déplace la carte et tap sur la cible."); - return; - } - + let coords = draftCoords || [map.getCenter().lng, map.getCenter().lat]; const [lng, lat] = coords; - if (!draftTitle.trim()) { - setSaveError("Le titre est requis."); + setSaveError("Title required."); return; } - - const categoryUpper = - draftCategory && draftCategory.toUpperCase() !== "DEFAULT" - ? draftCategory.toUpperCase() - : "NEWS"; - - const payload = { - title: draftTitle.trim(), - snippet: draftBody.trim() || draftTitle.trim(), - category: categoryUpper, - sub_category: draftSubCategory || "ALL", - lat, - lon: lng, - author: "tommy", - }; - try { setIsSaving(true); - await createPost(payload); + await createPost({ + title: draftTitle.trim(), + snippet: draftBody.trim() || draftTitle.trim(), + category: draftCategory.toUpperCase(), + sub_category: draftSubCategory || "ALL", + lat, + lon: lng, + author: "tommy", + }); setIsSaving(false); setIsCreating(false); - } catch (e) { - console.error("createPost error:", e); + } catch { setIsSaving(false); - setSaveError("Erreur lors de la création du post."); + setSaveError("Error creating post."); } }; @@ -207,59 +155,27 @@ export default function MapView() { setSelectedPost(post); const map = mapRef.current; if (!map) return; - - const lng = - post.lon ?? - post.lng ?? - (Array.isArray(post.coords) ? post.coords[0] : null); - const lat = - post.lat ?? - post.latitude ?? - (Array.isArray(post.coords) ? post.coords[1] : null); - - if (typeof lng === "number" && typeof lat === "number") { - map.flyTo({ - center: [lng, lat], - zoom: Math.max(map.getZoom(), 8), - speed: 1.4, - curve: 1.6, - essential: true, - }); - } - - // ouvre le gros post si on a le marker - const markerEntry = markersRef.current.find((m) => m.id === post.id); - if (markerEntry && markerEntry.el) { - const root = markerEntry.el; - const isExpanded = root.classList.contains("post-pin--expanded"); - if (!isExpanded) { - root.click(); - } - } + const lng = post.lon ?? post.lng; + const lat = post.lat ?? post.latitude; + if (lng && lat) map.flyTo({ center: [lng, lat], zoom: 8, speed: 1.4 }); }; - /* ================= RENDER ================= */ - return (
{status &&
{status}
} - {/* TOP */} + {/* TOP BAR SIMPLIFIÉE */}
-
Look at…
-
Place your wire
-
- - - -
- +
- {/* LEFT — time filters */} + {/* LEFT */}
{[ ["NOW", "Now"], @@ -279,7 +195,7 @@ export default function MapView() { ))}
- {/* RIGHT — main categories */} + {/* RIGHT */}
{FILTER_MAIN_CATEGORIES.map((cat) => (
- {/* CROSSHAIR */} - {isCreating && ( -
-
-
- )} - - {/* CREATE POST PANEL */} + {/* CREATE POST */} {isCreating && (
Create wire -
- -
- - DĂ©place la carte sous la cible, puis tap sur la cible pour fixer - la position. - {draftCoords ? " âś“ Position choisie" : ""} - -
- + + Move the map, then tap to fix the position. +
-
- setDraftTitle(e.target.value)} /> -