function PostCarousel({ posts, onPostUpdated = ()=>{}, onPostDeleted = ()=>{} }) { const [current, setCurrent] = React.useState(0); const containerRef = React.useRef(null); const [isMobile, setIsMobile] = React.useState(false); // Nieuw: cache voor opgehaalde landcodes const [countryCodes, setCountryCodes] = React.useState({}); const { data: user } = useUser(); const [likeState, setLikeState] = React.useState({}); // { [postId]: { liked, totalLikes, users: [] } } const [likeListOpen, setLikeListOpen] = React.useState(null); // postId of null const [likeLoading, setLikeLoading] = React.useState({}); const [likeListHover, setLikeListHover] = React.useState(false); const [commentsOpen, setCommentsOpen] = React.useState({}); React.useEffect(()=>{ function handleResize() { setIsMobile(window.innerWidth < 768); } handleResize(); window.addEventListener("resize", handleResize); return ()=>window.removeEventListener("resize", handleResize); }, []); // Haal landcode op als nodig React.useEffect(()=>{ async function fetchCodes() { const missing = posts.filter((post)=>!post.code && !post.landcode && post.landnaam && !countryCodes[post.landnaam]); for (const post of missing){ try { const response = await fetch("/api/getcountrycodebyname", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: post.landnaam }) }); if (response.ok) { const data = await response.json(); if (data.code) { setCountryCodes((prev)=>({ ...prev, [post.landnaam]: data.code })); } } } catch (e) { // geen probleem, gewoon geen vlag console.error(e); } } } if (posts && posts.length > 0) { fetchCodes(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [ posts ]); React.useEffect(()=>{ async function fetchLikes() { if (!posts) return; for (const post of posts){ if (!post.id) continue; // Haal like status en lijst op try { const [likeRes, usersRes] = await Promise.all([ fetch("/api/has-liked-post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ post_id: post.id }) }), fetch("/api/list-post-likes", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ post_id: post.id }) }) ]); const likeData = likeRes.ok ? await likeRes.json() : { liked: false }; const usersData = usersRes.ok ? await usersRes.json() : []; setLikeState((prev)=>({ ...prev, [post.id]: { liked: likeData.liked, totalLikes: usersData.length, users: usersData } })); } catch (e) { // geen probleem } } } fetchLikes(); }, [ posts, user ]); async function handleLike(postId) { if (!user) return; setLikeLoading((prev)=>({ ...prev, [postId]: true })); try { const res = await fetch("/api/like-post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ post_id: postId }) }); const data = await res.json(); if (res.ok && data) { // Haal nieuwe lijst op const usersRes = await fetch("/api/list-post-likes", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ post_id: postId }) }); const usersData = usersRes.ok ? await usersRes.json() : []; setLikeState((prev)=>({ ...prev, [postId]: { liked: data.liked, totalLikes: data.totalLikes, users: usersData } })); } } catch (e) {} setLikeLoading((prev)=>({ ...prev, [postId]: false })); } function handlePrev() { setCurrent((prev)=>prev > 0 ? prev - 1 : 0); if (containerRef.current) { const width = containerRef.current.offsetWidth; containerRef.current.scrollTo({ left: (current - 1) * width, behavior: "smooth" }); } } function handleNext() { setCurrent((prev)=>prev < posts.length - 1 ? prev + 1 : prev); if (containerRef.current) { const width = containerRef.current.offsetWidth; containerRef.current.scrollTo({ left: (current + 1) * width, behavior: "smooth" }); } } React.useEffect(()=>{ if (containerRef.current) { const width = containerRef.current.offsetWidth; containerRef.current.scrollTo({ left: current * width, behavior: "smooth" }); } }, [ current ]); const touchStartX = React.useRef(null); const touchEndX = React.useRef(null); function handleTouchStart(e) { if (e.touches && e.touches.length > 0) { touchStartX.current = e.touches[0].clientX; } } function handleTouchMove(e) { if (e.touches && e.touches.length > 0) { touchEndX.current = e.touches[0].clientX; } } function handleTouchEnd() { if (touchStartX.current !== null && touchEndX.current !== null && Math.abs(touchStartX.current - touchEndX.current) > 50) { if (touchStartX.current > touchEndX.current) { handleNext(); } else { handlePrev(); } } touchStartX.current = null; touchEndX.current = null; } function getShortContent(text) { if (!text) return ""; const plain = text.replace(/<[^>]+>/g, ""); const words = plain.split(/\s+/).filter(Boolean); const short = words.slice(0, 24).join(" "); return short + (words.length > 24 ? "..." : ""); } // Update getFlagUrl to use alleen de landcode (post.code of post.landcode) function getFlagUrl(code) { if (!code) return null; if (code.toLowerCase() === "eu") { return "https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg"; } return `https://flagcdn.com/w40/${code.toLowerCase()}.png`; } // Dummy rating stars function RatingStars({ rating = 0 }) { const stars = []; for(let i = 1; i <= 5; i++){ stars.push(/*#__PURE__*/ React.createElement("i", { key: i, className: i <= rating ? "fas fa-star text-yellow-400" : "far fa-star text-gray-300", __source: { fileName: "", lineNumber: 218, columnNumber: 9 }, __self: this })); } return /*#__PURE__*/ React.createElement("div", { className: "flex gap-1", __source: { fileName: "", lineNumber: 228, columnNumber: 12 }, __self: this }, stars); } // Dummy like and comment state const [likes, setLikes] = React.useState({}); const [comments, setComments] = React.useState({}); // { [postId]: [comments] } const [commentCounts, setCommentCounts] = React.useState({}); // { [postId]: count } const [commentInputs, setCommentInputs] = React.useState({}); // { [postId]: { content, emoji, image, imageUrl, error, loading } } const [emojiList, setEmojiList] = React.useState([ // Travel "✈️", "🌍", "🗺️", "🏝️", "🏔️", "🏖️", "🏜️", "🏕️", "🏛️", "🏟️", "🏞️", "🗽", "🗼", "🏯", "🏰", "⛩️", "🕌", "🕍", "⛲", "⛺", "🚢", "🚆", "🚄", "🚅", "🚇", "🚉", "🚊", "🚠", "🚡", "🚟", "🚲", "🛴", "🛵", "🏍️", "🚗", "🚙", "🚕", "🚓", "🚑", "🚒", "🚚", "🚛", "🚜", "🛺", "🚁", "🛩️", "🛫", "🛬", "🛰️", "🚀", // People "👨‍👩‍👧‍👦", "👫", "👬", "👭", "🧑‍🤝‍🧑", "👨", "👩", "🧑", "👦", "👧", "🧒", "👶", "🧓", "👴", "👵", // Food & Drink "🍕", "🍔", "🍟", "🌭", "🍿", "🥗", "🍣", "🍱", "🍜", "🍲", "🍛", "🍚", "🍙", "🍤", "🍦", "🍧", "🍨", "🍩", "🍪", "🎂", "🍰", "🧁", "🍫", "🍬", "🍭", "🍮", "🍯", "🥛", "🧃", "🥤", "🍺", "🍻", "🍷", "🥂", "🍸", "🍹", "🍾", "🍵", "☕", // Flags (enkele voorbeelden, kan uitgebreid worden) "🇳🇱", "🇧🇪", "🇫🇷", "🇩🇪", "🇪🇸", "🇮🇹", "🇬🇧", "🇺🇸", "🇨🇦", "🇦🇺", "🇯🇵", "🇨🇳", "🇧🇷", "🇿🇦", "🇹🇷", "🇮🇳", "🇷🇺", "🇲🇽", "🇬🇷", "🇪🇬", "🇹🇭", "🇻🇳", "🇰🇷", "🇸🇪", "🇳🇴", "🇩🇰", "🇫🇮", "🇨🇭", "🇦🇹", "🇵🇹", "🇵🇱", "🇨🇿", "🇸🇰", "🇭🇺", "🇷🇴", "🇧🇬", "🇭🇷", "🇸🇮", "🇷🇸", "🇺🇦", "🇬🇪", "🇦🇲", "🇦🇿", "🇸🇦", "🇦🇪", "🇶🇦", "🇮🇱", "🇯🇴", "🇱🇧", "🇸🇾", "🇮🇶", "🇮🇷", "🇵🇰", "🇧🇩", "🇱🇰", "🇳🇵", "🇲🇲", "🇰🇭", "🇱🇦", "🇲🇾", "🇸🇬", "🇮🇩", "🇵🇭", "🇳🇿", // Animals "🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮", "🐷", "🐸", "🐵", "🐔", "🐧", "🐦", "🐤", "🦆", "🦅", "🦉", "🦇", "🐺", "🐗", "🐴", "🦄", "🐝", "🐛", "🦋", "🐌", "🐞", "🐜", "🦟", "🦗", "🕷️", "🦂", "🐢", "🐍", "🦎", "🦖", "🦕", "🐙", "🦑", "🦐", "🦞", "🦀", "🐡", "🐠", "🐟", "🐬", "🐳", "🐋", "🦈", "🐊", "🐅", "🐆", "🦓", "🦍", "🦧", "🐘", "🦛", "🦏", "🐪", "🐫", "🦒", "🦘", "🦬", "🐃", "🐂", "🐄", "🐎", "🐖", "🐏", "🐑", "🦙", "🐐", "🦌", "🐕", "🐩", "🦮", "🐕‍🦺", "🐈", "🐓", "🦃", "🦚", "🦜", "🦢", "🦩", "🕊️", "🐇", "🦝", "🦨", "🦡", "🦦", "🐁", "🐀", "🐿️", "🦔", // Vehicles "🚗", "🚕", "🚙", "🚌", "🚎", "🏎️", "🚓", "🚑", "🚒", "🚐", "🚚", "🚛", "🚜", "🛺", "🚲", "🛴", "🚏", "🛣️", "🛤️", "⛽", "🚨", "🚔", "🚍", "🚘", "🚖", "🚡", "🚠", "🚟", "🚃", "🚋", "🚞", "🚝", "🚄", "🚅", "🚈", "🚂", "🚆", "🚇", "🚊", "🚉", "🚁", "🛩️", "🛫", "🛬", "🛸", "🚀", "🛶", "⛵", "🚤", "🛥️", "🛳️", "⛴️", "🚢" ]); // Haal comment count op voor elke post React.useEffect(()=>{ async function fetchCounts() { if (!posts) return; const counts = {}; for (const post of posts){ if (!post.id) continue; try { const res = await fetch("/api/comment-count", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ post_id: Number(post.id) }) }); const data = res.ok ? await res.json() : { count: 0 }; counts[post.id] = data.count; } catch (e) { counts[post.id] = 0; } } setCommentCounts(counts); } fetchCounts(); // Toegevoegd: ook opnieuw ophalen als comments veranderen }, [ posts, comments ]); // Haal comments op als commentsOpen[post.id] true wordt React.useEffect(()=>{ async function fetchComments(postId) { try { const res = await fetch("/api/list-post-comments", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ post_id: Number(postId) }) }); const data = res.ok ? await res.json() : { comments: [] }; setComments((prev)=>({ ...prev, [postId]: data.comments })); } catch (e) {} } Object.keys(commentsOpen).forEach((postId)=>{ if (commentsOpen[postId]) fetchComments(Number(postId)); }); }, [ commentsOpen ]); function handleToggleComments(postId) { setCommentsOpen((prev)=>({ ...prev, [postId]: !prev[postId] })); } // Voeg toe: detecteer klik buiten de like-lijst op mobiel React.useEffect(()=>{ if (!isMobile || likeListOpen === null) return; function handleTouch(e) { // Check of de popup open is en of er buiten de popup wordt getikt const popup = document.getElementById("like-list-popup"); if (popup && !popup.contains(e.target)) { setLikeListOpen(null); } } document.addEventListener("touchstart", handleTouch); return ()=>document.removeEventListener("touchstart", handleTouch); }, [ isMobile, likeListOpen ]); React.useEffect(()=>{ if (!posts) return; posts.forEach((post)=>{ if (post.lat && post.lng && post.id) { // Clean up any previous script const container = document.getElementById(`hotel-widget-${post.id}`); if (container) { container.innerHTML = ""; const script = document.createElement("script"); script.async = true; script.src = `https://tpwgts.com/content?currency=usd&trs=433407&shmarker=505899&search_host=search.hotellook.com&locale=en&powered_by=false&draggable=true&disable_zoom=false&show_logo=false&scrollwheel=true&color=%2307AF61&contrast_color=%23ffffff&width=1000&height=400&lat=${post.lat}&lng=${post.lng}&zoom=12&radius=27&stars=0&rating_from=0&rating_to=10&promo_id=4285&campaign_id=101`; script.charset = "utf-8"; container.appendChild(script); } } }); // Cleanup: verwijder script bij unmount of post change return ()=>{ if (!posts || !posts.length) return; const post = posts[current]; if (post) { const container = document.getElementById(`hotel-widget-${post.id}`); if (container) container.innerHTML = ""; } }; }, [ posts, current ]); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-[700px] font-roboto", __source: { fileName: "", lineNumber: 654, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#0077b6] mb-2 text-center", __source: { fileName: "", lineNumber: 656, columnNumber: 7 }, __self: this }, "My Trips"), !isMobile && /*#__PURE__*/ React.createElement("button", { type: "button", className: "absolute left-[-10px] top-1/2 -translate-y-1/2 z-10 bg-[#0099c6] text-white rounded-full w-10 h-10 flex items-center justify-center shadow hover:bg-[#0077b6] transition disabled:opacity-50", onClick: handlePrev, disabled: current === 0, name: "carousel-prev", "aria-label": "Previous", __source: { fileName: "", lineNumber: 660, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 668, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center items-center min-h-[400px]", __source: { fileName: "", lineNumber: 672, columnNumber: 7 }, __self: this }, posts && posts.length > 0 ? (()=>{ const post = posts[current]; if (!post) return null; const flagCode = post.code || post.landcode || countryCodes[post.landnaam]; const flagUrl = getFlagUrl(flagCode); const postId = post.id ? `post-${post.id}` : undefined; return /*#__PURE__*/ React.createElement("div", { key: post.id || current, className: "w-full max-w-[700px] px-2 py-4", style: { minWidth: "100%", transition: "opacity 0.3s" }, id: postId, __source: { fileName: "", lineNumber: 682, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 flex flex-col items-stretch h-full", __source: { fileName: "", lineNumber: 688, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 mb-3", __source: { fileName: "", lineNumber: 690, columnNumber: 19 }, __self: this }, flagUrl ? /*#__PURE__*/ React.createElement("img", { src: flagUrl, alt: flagCode ? `Flag of ${flagCode}` : "Flag", className: "w-8 h-6 object-cover rounded shadow", style: { background: "#e0f7fa" }, __source: { fileName: "", lineNumber: 692, columnNumber: 23 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: "w-8 h-6 bg-[#e0f7fa] rounded shadow", __source: { fileName: "", lineNumber: 699, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#0077b6] text-lg", __source: { fileName: "", lineNumber: 701, columnNumber: 21 }, __self: this }, post.plaatsnaam && post.landnaam ? `${post.plaatsnaam}, ${post.landnaam}` : post.plaatsnaam || post.landnaam || "Unknown location")), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 710, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[160px] rounded overflow-hidden", __source: { fileName: "", lineNumber: 711, columnNumber: 21 }, __self: this }, post.lat && post.lng ? /*#__PURE__*/ React.createElement("iframe", { title: "Map", width: "100%", height: "160", frameBorder: "0", style: { border: 0 }, src: `https://www.openstreetmap.org/export/embed.html?bbox=${post.lng - 0.01}%2C${post.lat - 0.01}%2C${post.lng + 0.01}%2C${post.lat + 0.01}&layer=mapnik&marker=${post.lat}%2C${post.lng}`, allowFullScreen: true, __source: { fileName: "", lineNumber: 713, columnNumber: 25 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-[#e0f7fa] flex items-center justify-center text-[#0077b6]", __source: { fileName: "", lineNumber: 723, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-2xl mr-2", __source: { fileName: "", lineNumber: 724, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 725, columnNumber: 27 }, __self: this }, "Map (", post.lat, ", ", post.lng, ")")))), (post.youtube_url || post.image_urls && post.image_urls.length > 0 || post.image_url) && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-3 mb-3", __source: { fileName: "", lineNumber: 736, columnNumber: 21 }, __self: this }, post.youtube_url && /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 738, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[180px] rounded-lg overflow-hidden bg-black", __source: { fileName: "", lineNumber: 739, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: `https://www.youtube.com/embed/${getYoutubeId(post.youtube_url)}`, title: "YouTube video", className: "w-full h-full absolute top-0 left-0", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, __source: { fileName: "", lineNumber: 740, columnNumber: 29 }, __self: this }))), post.image_urls && post.image_urls.length > 0 ? /*#__PURE__*/ React.createElement(ImageSlider, { images: post.image_urls, __source: { fileName: "", lineNumber: 752, columnNumber: 25 }, __self: this }) : post.image_url ? /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 754, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.image_url, alt: `Post image for ${post.title || "post"}`, className: "w-full h-[180px] object-cover rounded-lg", style: { background: "#e0f7fa" }, __source: { fileName: "", lineNumber: 755, columnNumber: 27 }, __self: this })) : null), post.title && /*#__PURE__*/ React.createElement("div", { className: "text-[#222] text-xl font-bold mb-1", __source: { fileName: "", lineNumber: 767, columnNumber: 21 }, __self: this }, post.title), (post.start_date || post.end_date) && /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] text-sm mb-1 font-bold", __source: { fileName: "", lineNumber: 772, columnNumber: 21 }, __self: this }, post.start_date ? `From: ${new Date(post.start_date).toLocaleDateString("en-US", { year: "numeric", month: "2-digit", day: "2-digit" })}` : "", post.start_date && post.end_date ? " Till: " : "", post.end_date ? new Date(post.end_date).toLocaleDateString("en-US", { year: "numeric", month: "2-digit", day: "2-digit" }) : ""), /*#__PURE__*/ React.createElement("div", { className: "text-[#444] text-base mb-3", style: { whiteSpace: "pre-line" }, __source: { fileName: "", lineNumber: 786, columnNumber: 19 }, __self: this }, post.content), (post.keyword1 || post.keyword2 || post.keyword3) && /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-2", __source: { fileName: "", lineNumber: 793, columnNumber: 21 }, __self: this }, [ post.keyword1, post.keyword2, post.keyword3 ].filter(Boolean).map((kw, i)=>/*#__PURE__*/ React.createElement("a", { key: i, href: `/explore?searchType=hashtag&searchQuery=${encodeURIComponent(kw)}`, className: "text-[#0099c6] font-bold text-sm bg-[#e0f7fa] rounded-full px-3 py-1 hover:bg-[#b2ebf2] transition cursor-pointer", style: { textDecoration: "none" }, __source: { fileName: "", lineNumber: 797, columnNumber: 27 }, __self: this }, "#", kw))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-3", __source: { fileName: "", lineNumber: 808, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#0077b6] font-bold", __source: { fileName: "", lineNumber: 809, columnNumber: 21 }, __self: this }, "Recommended:"), /*#__PURE__*/ React.createElement(RatingStars, { rating: post.rating || 0, __source: { fileName: "", lineNumber: 812, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-auto pt-2 border-t border-[#e0e0e0]", __source: { fileName: "", lineNumber: 814, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 items-center", __source: { fileName: "", lineNumber: 815, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 817, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `text-[#e63946] text-xl focus:outline-none flex items-center gap-1 ${likeState[post.id]?.liked ? "font-bold" : ""}`, onClick: ()=>handleLike(post.id), "aria-label": "Like", disabled: !user || likeLoading[post.id], onMouseEnter: ()=>{ setLikeListOpen(post.id); setLikeListHover(true); }, onMouseLeave: ()=>setTimeout(()=>{ if (!likeListHover) setLikeListOpen(null); }, 100), onFocus: ()=>{ setLikeListOpen(post.id); setLikeListHover(true); }, onBlur: ()=>setTimeout(()=>{ if (!likeListHover) setLikeListOpen(null); }, 100), style: { position: "relative" }, __source: { fileName: "", lineNumber: 818, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: likeState[post.id]?.liked ? "fas fa-heart" : "far fa-heart", __source: { fileName: "", lineNumber: 843, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-1 text-base text-[#222]", __source: { fileName: "", lineNumber: 850, columnNumber: 27 }, __self: this }, likeState[post.id]?.totalLikes || 0)), likeListOpen === post.id && likeState[post.id]?.users?.length > 0 && /*#__PURE__*/ React.createElement("div", { id: isMobile ? "like-list-popup" : undefined, className: "absolute left-0 bottom-10 z-50 bg-white border border-[#e0e0e0] rounded shadow-lg p-2 min-w-[220px] flex flex-col-reverse gap-2 animate-fadein max-h-[320px] overflow-y-auto no-scrollbar", style: { minWidth: 220, maxHeight: 320, boxShadow: "0 4px 16px rgba(0,0,0,0.10)", right: "auto" }, onMouseEnter: !isMobile ? ()=>setLikeListHover(true) : undefined, onMouseLeave: !isMobile ? ()=>{ setLikeListHover(false); setTimeout(()=>{ setLikeListOpen(null); }, 100); } : undefined, __source: { fileName: "", lineNumber: 856, columnNumber: 29 }, __self: this }, likeState[post.id].users.map((u)=>/*#__PURE__*/ React.createElement("div", { key: u.user_id, className: "flex items-center gap-2 p-1 hover:bg-[#f1f8fb] rounded cursor-pointer", onClick: ()=>{ window.location.href = `/user?username=${encodeURIComponent(u.username || u.user_id)}`; }, __source: { fileName: "", lineNumber: 882, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: u.profile_image || "https://ui-avatars.com/api/?name=" + encodeURIComponent(u.name || u.username || "User"), alt: u.name || u.username, className: "w-8 h-8 rounded-full object-cover border", __source: { fileName: "", lineNumber: 889, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 900, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#0077b6] text-sm", __source: { fileName: "", lineNumber: 901, columnNumber: 37 }, __self: this }, u.name || "Unknown"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#888]", __source: { fileName: "", lineNumber: 904, columnNumber: 37 }, __self: this }, "@", u.username || u.user_id)))))), /*#__PURE__*/ React.createElement("button", { className: "text-[#0077b6] text-xl focus:outline-none", onClick: ()=>handleToggleComments(post.id), "aria-label": "Comments", __source: { fileName: "", lineNumber: 913, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-comment", __source: { fileName: "", lineNumber: 918, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-1 text-base text-[#222]", __source: { fileName: "", lineNumber: 919, columnNumber: 25 }, __self: this }, commentCounts[post.id] || 0))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 924, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-[#0099c6] text-white rounded-full w-8 h-8 flex items-center justify-center shadow hover:bg-[#0077b6] transition disabled:opacity-50", onClick: handlePrev, disabled: current === 0, name: "carousel-prev", "aria-label": "Previous", __source: { fileName: "", lineNumber: 925, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 933, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-[#0099c6] text-white rounded-full w-8 h-8 flex items-center justify-center shadow hover:bg-[#0077b6] transition disabled:opacity-50", onClick: handleNext, disabled: current === posts.length - 1 || posts.length === 0, name: "carousel-next", "aria-label": "Next", __source: { fileName: "", lineNumber: 935, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 945, columnNumber: 25 }, __self: this })))), /*#__PURE__*/ React.createElement(EditDeleteButtons, { post: post, onPostUpdated: onPostUpdated, onPostDeleted: onPostDeleted, __source: { fileName: "", lineNumber: 950, columnNumber: 19 }, __self: this }), commentsOpen[post.id] && /*#__PURE__*/ React.createElement("div", { className: "mt-3 p-3 bg-[#f1f8fb] rounded", __source: { fileName: "", lineNumber: 957, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold mb-2", __source: { fileName: "", lineNumber: 958, columnNumber: 23 }, __self: this }, "Comments"), user && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2 mb-3", __source: { fileName: "", lineNumber: 962, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "border rounded px-2 py-1", value: commentInputs[post.id]?.content || "", onChange: (e)=>setCommentInputs((prev)=>({ ...prev, [post.id]: { ...prev[post.id], content: e.target.value } })), placeholder: "Your comment...", rows: 2, maxLength: 500, __source: { fileName: "", lineNumber: 963, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-1", __source: { fileName: "", lineNumber: 979, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-sm px-2 py-1 bg-[#e0f7fa] rounded hover:bg-[#b2ebf2] font-bold", onClick: ()=>setCommentInputs((prev)=>({ ...prev, [post.id]: { ...prev[post.id], showEmojis: !prev[post.id]?.showEmojis } })), __source: { fileName: "", lineNumber: 980, columnNumber: 29 }, __self: this }, "Add Emoji"), commentInputs[post.id]?.showEmojis && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-1 mt-2 p-2 bg-[#f1f8fb] rounded border border-[#e0e0e0] animate-fadein overflow-x-auto no-scrollbar", style: { maxWidth: "100%", whiteSpace: "nowrap", flexWrap: "nowrap", flexDirection: "row", display: "flex" }, __source: { fileName: "", lineNumber: 996, columnNumber: 31 }, __self: this }, emojiList.map((emoji)=>/*#__PURE__*/ React.createElement("button", { key: emoji, type: "button", className: "text-xl hover:bg-[#e0f7fa] rounded px-1", onClick: ()=>setCommentInputs((prev)=>({ ...prev, [post.id]: { ...prev[post.id], content: (prev[post.id]?.content || "") + emoji } })), __source: { fileName: "", lineNumber: 1007, columnNumber: 35 }, __self: this }, emoji)))), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 bg-[#0099c6] text-white rounded hover:bg-[#0077b6] text-sm font-bold", disabled: commentInputs[post.id]?.loading || !(commentInputs[post.id]?.content && commentInputs[post.id]?.content.trim()), onClick: async ()=>{ setCommentInputs((prev)=>({ ...prev, [post.id]: { ...prev[post.id], loading: true, error: null } })); try { const res = await fetch("/api/create-comment", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ post_id: post.id, content: commentInputs[post.id]?.content || "" }) }); const data = await res.json(); if (res.ok && data) { const newComment = data; setComments((prev)=>({ ...prev, [post.id]: [ newComment, ...prev[post.id] || [] ] })); setCommentInputs((prev)=>({ ...prev, [post.id]: { content: "", error: null, loading: false } })); } else { setCommentInputs((prev)=>({ ...prev, [post.id]: { ...prev[post.id], error: "Error posting comment" } })); } } catch (e) { setCommentInputs((prev)=>({ ...prev, [post.id]: { ...prev[post.id], error: "Error posting comment" } })); } }, __source: { fileName: "", lineNumber: 1029, columnNumber: 27 }, __self: this }, "Post comment"), commentInputs[post.id]?.error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-xs", __source: { fileName: "", lineNumber: 1100, columnNumber: 29 }, __self: this }, commentInputs[post.id].error)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 1106, columnNumber: 23 }, __self: this }, comments[post.id]?.length > 0 ? comments[post.id].map((c)=>/*#__PURE__*/ React.createElement("div", { key: c.id, className: "flex items-start gap-2 p-2 bg-white rounded shadow-sm", __source: { fileName: "", lineNumber: 1109, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: c.profile_image || "https://ui-avatars.com/api/?name=" + encodeURIComponent(c.name || c.username || "User"), alt: c.name || c.username, className: "w-10 h-10 rounded-full object-cover border cursor-pointer", onClick: ()=>window.location.href = `/user?username=${encodeURIComponent(c.username || c.user_id)}`, __source: { fileName: "", lineNumber: 1113, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-1", __source: { fileName: "", lineNumber: 1129, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1130, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#0077b6] text-sm cursor-pointer", onClick: ()=>window.location.href = `/user?username=${encodeURIComponent(c.username || c.user_id)}`, __source: { fileName: "", lineNumber: 1131, columnNumber: 35 }, __self: this }, c.name || "Unknown"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#888]", __source: { fileName: "", lineNumber: 1141, columnNumber: 35 }, __self: this }, "@", c.username || c.user_id), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#bbb] ml-2", __source: { fileName: "", lineNumber: 1144, columnNumber: 35 }, __self: this }, new Date(c.created_at).toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "text-[#222] text-base whitespace-pre-line", __source: { fileName: "", lineNumber: 1148, columnNumber: 33 }, __self: this }, c.content)))) : /*#__PURE__*/ React.createElement("div", { className: "text-[#888]", __source: { fileName: "", lineNumber: 1155, columnNumber: 27 }, __self: this }, "No comments yet."))), post.lat && post.lng && /*#__PURE__*/ React.createElement("div", { className: "w-full mt-4", __source: { fileName: "", lineNumber: 1162, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#0077b6] mb-2", __source: { fileName: "", lineNumber: 1163, columnNumber: 23 }, __self: this }, "Best Hotels in ", post.plaatsnaam || "this location"), /*#__PURE__*/ React.createElement("div", { id: `hotel-widget-${post.id}`, __source: { fileName: "", lineNumber: 1166, columnNumber: 23 }, __self: this })))); })() : /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 w-full max-w-[700px] snap-center px-2 py-4", __source: { fileName: "", lineNumber: 1174, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 flex flex-col items-center justify-center h-full min-h-[180px] text-[#888] text-lg font-bold", __source: { fileName: "", lineNumber: 1175, columnNumber: 13 }, __self: this }, "No posts to show."))), !isMobile && /*#__PURE__*/ React.createElement("button", { type: "button", className: "absolute right-[-10px] top-1/2 -translate-y-1/2 z-10 bg-[#0099c6] text-white rounded-full w-10 h-10 flex items-center justify-center shadow hover:bg-[#0077b6] transition disabled:opacity-50", onClick: handleNext, disabled: current === posts.length - 1 || posts.length === 0, name: "carousel-next", "aria-label": "Next", __source: { fileName: "", lineNumber: 1182, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 1190, columnNumber: 11 }, __self: this }))); } // Nieuw: EditDeleteButtons component function EditDeleteButtons({ post, onPostUpdated = ()=>{}, onPostDeleted = ()=>{} }) { const { data: user } = useUser(); const [editMode, setEditMode] = React.useState(false); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); // Nieuw: image_urls array voor meerdere afbeeldingen const [form, setForm] = React.useState({ title: post.title || "", content: post.content || "", image_urls: post.image_urls && Array.isArray(post.image_urls) ? post.image_urls : post.image_url ? [ post.image_url ] : [], rating: post.rating || 0, youtube_url: post.youtube_url || "" }); const [uploading, setUploading] = React.useState(false); const [uploadError, setUploadError] = React.useState(null); const [upload, { loading: uploadLoading }] = useUpload(); // Alleen tonen als ingelogd en eigenaar van de post if (!user || !post.user_id || user.id !== post.user_id) return null; // Edit form if (editMode) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2 mt-3 bg-[#f1f8fb] p-3 rounded", __source: { fileName: "", lineNumber: 1230, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#0077b6] mb-1", __source: { fileName: "", lineNumber: 1231, columnNumber: 9 }, __self: this }, "Edit post"), /*#__PURE__*/ React.createElement("input", { className: "border rounded px-2 py-1 mb-1", value: form.title, onChange: (e)=>setForm((f)=>({ ...f, title: e.target.value })), placeholder: "Title", __source: { fileName: "", lineNumber: 1232, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "border rounded px-2 py-1 mb-1", value: form.content, onChange: (e)=>setForm((f)=>({ ...f, content: e.target.value })), placeholder: "Content", rows: 3, __source: { fileName: "", lineNumber: 1238, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-1 mb-1", __source: { fileName: "", lineNumber: 1246, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-bold text-sm", __source: { fileName: "", lineNumber: 1247, columnNumber: 11 }, __self: this }, "Images (max 5, max 2MB per image)"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 flex-wrap mb-1", __source: { fileName: "", lineNumber: 1250, columnNumber: 11 }, __self: this }, form.image_urls && form.image_urls.map((url, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "relative group", __source: { fileName: "", lineNumber: 1253, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: url, alt: `Image ${idx + 1}`, className: "w-20 h-14 object-cover rounded border", __source: { fileName: "", lineNumber: 1254, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "absolute top-0 right-0 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold shadow hover:bg-red-700", style: { transform: "translate(40%,-40%)" }, onClick: ()=>setForm((f)=>({ ...f, image_urls: f.image_urls.filter((_, i)=>i !== idx) })), "aria-label": "Remove image", __source: { fileName: "", lineNumber: 1259, columnNumber: 19 }, __self: this }, "×")))), form.image_urls.length < 5 && /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: async (e)=>{ setUploadError(null); setUploading(true); const file = e.target.files && e.target.files[0]; if (!file) { setUploading(false); return; } if (file.size > 2 * 1024 * 1024) { setUploadError("Maximum image size is 2MB"); setUploading(false); return; } try { const { url, error } = await upload({ file }); if (error) { setUploadError("Error uploading image"); } else { setForm((f)=>({ ...f, image_urls: [ ...f.image_urls, url ] })); } } catch (err) { setUploadError("Error uploading image"); } setUploading(false); }, disabled: uploading || uploadLoading || form.image_urls.length >= 5, __source: { fileName: "", lineNumber: 1277, columnNumber: 13 }, __self: this }), uploadError && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-xs", __source: { fileName: "", lineNumber: 1314, columnNumber: 13 }, __self: this }, uploadError)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-1 mb-1", __source: { fileName: "", lineNumber: 1318, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-bold text-sm", __source: { fileName: "", lineNumber: 1319, columnNumber: 11 }, __self: this }, "YouTube URL"), /*#__PURE__*/ React.createElement("input", { className: "border rounded px-2 py-1", value: form.youtube_url, onChange: (e)=>setForm((f)=>({ ...f, youtube_url: e.target.value })), placeholder: "YouTube video URL", __source: { fileName: "", lineNumber: 1320, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-1", __source: { fileName: "", lineNumber: 1330, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-bold text-sm", __source: { fileName: "", lineNumber: 1331, columnNumber: 11 }, __self: this }, "Rating:"), /*#__PURE__*/ React.createElement("select", { className: "border rounded px-2 py-1", value: form.rating, onChange: (e)=>setForm((f)=>({ ...f, rating: Number(e.target.value) })), __source: { fileName: "", lineNumber: 1332, columnNumber: 11 }, __self: this }, [ 0, 1, 2, 3, 4, 5 ].map((r)=>/*#__PURE__*/ React.createElement("option", { key: r, value: r, __source: { fileName: "", lineNumber: 1340, columnNumber: 15 }, __self: this }, r)))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 1346, columnNumber: 19 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mt-1", __source: { fileName: "", lineNumber: 1347, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 bg-[#0099c6] text-white rounded hover:bg-[#0077b6] text-sm font-bold", disabled: loading || uploading || uploadLoading, onClick: async ()=>{ setLoading(true); setError(null); try { const response = await fetch("/api/updatepost", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: post.id, title: form.title, content: form.content, image_urls: form.image_urls, rating: form.rating, youtube_url: form.youtube_url }) }); const data = await response.json(); if (!response.ok || data.error) { setError(data.error || "Error saving post"); } else { setEditMode(false); if (onPostUpdated) onPostUpdated(data); } } catch (e) { setError("Error saving post"); } setLoading(false); }, __source: { fileName: "", lineNumber: 1348, columnNumber: 11 }, __self: this }, "Save"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 bg-[#e0e0e0] text-[#222] rounded hover:bg-[#bdbdbd] text-sm font-bold", disabled: loading || uploading || uploadLoading, onClick: ()=>setEditMode(false), __source: { fileName: "", lineNumber: 1382, columnNumber: 11 }, __self: this }, "Cancel"))); } // Normal buttons return /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mt-3", __source: { fileName: "", lineNumber: 1396, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-1 px-3 py-1 bg-[#f1c40f] text-[#222] rounded hover:bg-[#f39c12] transition text-sm font-bold", onClick: ()=>setEditMode(true), __source: { fileName: "", lineNumber: 1397, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 1401, columnNumber: 9 }, __self: this }), " Edit"), /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-1 px-3 py-1 bg-[#e63946] text-white rounded hover:bg-[#c82333] transition text-sm font-bold", onClick: async ()=>{ if (!window.confirm("Are you sure you want to delete this post?")) return; setLoading(true); setError(null); try { const response = await fetch("/api/deletepost", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: post.id }) }); const data = await response.json(); if (!response.ok || data.error) { setError(data.error || "Error deleting post"); } else { if (onPostDeleted) onPostDeleted(post.id); } } catch (e) { setError("Error deleting post"); } setLoading(false); }, __source: { fileName: "", lineNumber: 1403, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 1428, columnNumber: 9 }, __self: this }), " Delete"), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm ml-2", __source: { fileName: "", lineNumber: 1430, columnNumber: 17 }, __self: this }, error)); } function PostCarouselStory() { const posts = [ { id: 1, title: "My Trip to Paris", image_url: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80", content: "Paris is a beautiful city with so much to see and do. I loved visiting the Eiffel Tower, walking along the Seine, and enjoying delicious pastries at local cafes. The art museums are world-class and the atmosphere is truly romantic." }, { id: 2, title: "Exploring Tokyo", image_url: "https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=400&q=80", content: "Tokyo is a city that never sleeps. From the bustling streets of Shibuya to the peaceful gardens of the Imperial Palace, there's something for everyone. The food is incredible and the culture is fascinating." }, { id: 3, title: "Hiking in the Alps", image_url: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=400&q=80", content: "The Alps offer some of the most breathtaking scenery in the world. Hiking through the mountains, I encountered crystal-clear lakes, wildflowers, and stunning views at every turn. It's a paradise for nature lovers." }, { id: 4, title: "No Image Post", image_url: "", content: "This post does not have an image, but it still has a story to tell. Sometimes words are enough to paint a picture." } ]; const emptyPosts = []; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-8", __source: { fileName: "", lineNumber: 1471, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1472, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold mb-2 font-roboto text-[#0077b6]", __source: { fileName: "", lineNumber: 1473, columnNumber: 9 }, __self: this }, "Example with posts:"), /*#__PURE__*/ React.createElement(PostCarousel, { posts: posts, __source: { fileName: "", lineNumber: 1476, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1478, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold mb-2 font-roboto text-[#0077b6]", __source: { fileName: "", lineNumber: 1479, columnNumber: 9 }, __self: this }, "Example with no posts:"), /*#__PURE__*/ React.createElement(PostCarousel, { posts: emptyPosts, __source: { fileName: "", lineNumber: 1482, columnNumber: 9 }, __self: this }))); } // Helper to extract YouTube video ID function getYoutubeId(url) { if (!url) return ""; const regExp = /(?:youtube[.-]com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?|shorts)\/|.*[?&]v=)|youtu\.be\/)([\w-]{11})/; const match = url.match(regExp); return match && match[1] ? match[1] : ""; } function ImageSlider({ images }) { const [current, setCurrent] = React.useState(0); const [fullscreen, setFullscreen] = React.useState(false); function handlePrev(e) { e && e.stopPropagation(); setCurrent((prev)=>prev > 0 ? prev - 1 : images.length - 1); } function handleNext(e) { e && e.stopPropagation(); setCurrent((prev)=>prev < images.length - 1 ? prev + 1 : 0); } function handleImageClick() { setFullscreen(true); } function handleCloseFullscreen(e) { e.stopPropagation(); setFullscreen(false); } return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[180px] rounded-lg overflow-hidden bg-[#e0f7fa] flex items-center justify-center cursor-pointer", onClick: handleImageClick, __source: { fileName: "", lineNumber: 1517, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: images[current], alt: `Foto ${current + 1}`, className: "w-full h-[180px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 1521, columnNumber: 9 }, __self: this }), images.length > 1 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { className: "absolute left-2 top-1/2 -translate-y-1/2 bg-[#0099c6] text-white rounded-full w-8 h-8 flex items-center justify-center shadow hover:bg-[#0077b6] transition", onClick: handlePrev, style: { zIndex: 2 }, "aria-label": "Vorige foto", __source: { fileName: "", lineNumber: 1528, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 1534, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "absolute right-2 top-1/2 -translate-y-1/2 bg-[#0099c6] text-white rounded-full w-8 h-8 flex items-center justify-center shadow hover:bg-[#0077b6] transition", onClick: handleNext, style: { zIndex: 2 }, "aria-label": "Volgende foto", __source: { fileName: "", lineNumber: 1536, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 1542, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1", __source: { fileName: "", lineNumber: 1544, columnNumber: 13 }, __self: this }, images.map((_, idx)=>/*#__PURE__*/ React.createElement("span", { key: idx, className: `inline-block w-2 h-2 rounded-full ${idx === current ? "bg-[#0099c6]" : "bg-[#b2ebf2]"}`, __source: { fileName: "", lineNumber: 1546, columnNumber: 17 }, __self: this }))))), fullscreen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center", onClick: handleCloseFullscreen, __source: { fileName: "", lineNumber: 1556, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 text-white text-3xl font-bold z-60", onClick: handleCloseFullscreen, "aria-label": "Sluit fullscreen", __source: { fileName: "", lineNumber: 1560, columnNumber: 11 }, __self: this }, "×"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-2xl flex flex-col items-center", __source: { fileName: "", lineNumber: 1567, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: images[current], alt: `Foto ${current + 1}`, className: "w-full max-h-[80vh] object-contain rounded-lg", style: { background: "#e0f7fa" }, __source: { fileName: "", lineNumber: 1568, columnNumber: 13 }, __self: this }), images.length > 1 && /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-0 right-0 flex justify-between items-center px-4", style: { pointerEvents: "none" }, __source: { fileName: "", lineNumber: 1575, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#0099c6] text-white rounded-full w-10 h-10 flex items-center justify-center shadow hover:bg-[#0077b6] transition", onClick: (e)=>{ e.stopPropagation(); handlePrev(); }, style: { pointerEvents: "auto" }, "aria-label": "Vorige foto", __source: { fileName: "", lineNumber: 1579, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 1588, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0099c6] text-white rounded-full w-10 h-10 flex items-center justify-center shadow hover:bg-[#0077b6] transition", onClick: (e)=>{ e.stopPropagation(); handleNext(); }, style: { pointerEvents: "auto" }, "aria-label": "Volgende foto", __source: { fileName: "", lineNumber: 1590, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 1599, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-1", __source: { fileName: "", lineNumber: 1603, columnNumber: 13 }, __self: this }, images.map((_, idx)=>/*#__PURE__*/ React.createElement("span", { key: idx, className: `inline-block w-3 h-3 rounded-full ${idx === current ? "bg-[#0099c6]" : "bg-[#b2ebf2]"}`, __source: { fileName: "", lineNumber: 1605, columnNumber: 17 }, __self: this })))))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 1618, columnNumber: 1 }, __self: this }, ` @keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fadein { animation: fadein 0.2s ease; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } `); function LeafletMap({ lat, lng, onChange }) { const mapRef = React.useRef(null); const markerRef = React.useRef(null); const [mapLoaded, setMapLoaded] = React.useState(false); const [position, setPosition] = React.useState(typeof lat === "number" && typeof lng === "number" ? { lat, lng } : { lat: 52.3702, lng: 4.8952 }); React.useEffect(()=>{ if (typeof lat === "number" && typeof lng === "number") { setPosition({ lat, lng }); } }, [ lat, lng ]); React.useEffect(()=>{ let leafletScript; let leafletMap; let marker; function initMap() { if (mapRef.current && window.L && !leafletMap) { leafletMap = window.L.map(mapRef.current, { center: [ position.lat, position.lng ], zoom: 4, zoomControl: true, attributionControl: false, dragging: true, scrollWheelZoom: true, doubleClickZoom: true, boxZoom: true, keyboard: true }); window.L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, minZoom: 2, noWrap: true }).addTo(leafletMap); marker = window.L.marker([ position.lat, position.lng ], { draggable: true }).addTo(leafletMap); marker.on("dragend", function(e) { const newPos = e.target.getLatLng(); setPosition({ lat: newPos.lat, lng: newPos.lng }); if (onChange) { onChange({ lat: newPos.lat, lng: newPos.lng }); } }); markerRef.current = marker; leafletMap.on("click", function(e) { marker.setLatLng(e.latlng); setPosition({ lat: e.latlng.lat, lng: e.latlng.lng }); if (onChange) { onChange({ lat: e.latlng.lat, lng: e.latlng.lng }); } }); setMapLoaded(true); } } if (!window.L) { leafletScript = document.createElement("script"); leafletScript.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"; leafletScript.async = true; leafletScript.onload = initMap; document.body.appendChild(leafletScript); } else { initMap(); } return ()=>{ if (leafletMap) { leafletMap.remove(); } if (leafletScript) { leafletScript.remove(); } }; }, []); React.useEffect(()=>{ if (markerRef.current && mapLoaded) { markerRef.current.setLatLng([ position.lat, position.lng ]); if (markerRef.current._map) { markerRef.current._map.setView([ position.lat, position.lng ]); } } }, [ position.lat, position.lng, mapLoaded ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full", style: { height: 180, minHeight: 180, maxWidth: "100%", borderRadius: 12, overflow: "hidden", background: "#e0f7fa", marginTop: -9 }, __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: mapRef, style: { width: "100%", height: "100%", minHeight: 180 }, __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("link", { rel: "stylesheet", href: "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css", crossOrigin: "", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this })); } function LeafletMapStory() { const [pos, setPos] = React.useState({ lat: 52.3702, lng: 4.8952 }); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 w-full max-w-[400px]", __source: { fileName: "", lineNumber: 129, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold mb-2 font-roboto text-[#0077b6]", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, "Default (Amsterdam)"), /*#__PURE__*/ React.createElement(LeafletMap, { lat: 52.3702, lng: 4.8952, onChange: (p)=>setPos(p), __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-sm text-[#0077b6] font-roboto", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, "Selected: ", pos.lat.toFixed(5), ", ", pos.lng.toFixed(5))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold mb-2 font-roboto text-[#0077b6]", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, "With initial Paris"), /*#__PURE__*/ React.createElement(LeafletMap, { lat: 48.8566, lng: 2.3522, onChange: ()=>{}, __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold mb-2 font-roboto text-[#0077b6]", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, "No initial location (defaults to Amsterdam)"), /*#__PURE__*/ React.createElement(LeafletMap, { onChange: ()=>{}, __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }))); } function Footer() { const year = 2025; return /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#00a3cf] py-2 px-2 flex flex-row items-center justify-between font-roboto", style: { borderRight: "1px solid #fff", borderBottom: "1px solid #fff" }, __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-row items-center gap-3", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#ffffff] text-base font-roboto mr-2", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "© ", year, " Travel Darts."), /*#__PURE__*/ React.createElement("a", { href: "https://tiktok.com/@traveldarts", target: "_blank", rel: "noopener noreferrer", "aria-label": "Facebook", className: "text-[#ffffff] hover:text-[#005f8a] text-2xl", style: { display: "inline-block" }, __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-tiktok", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://x.com/TravelDart", target: "_blank", rel: "noopener noreferrer", "aria-label": "Twitter", className: "text-[#ffffff] hover:text-[#005f8a] text-2xl", style: { display: "inline-block" }, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/terms-of-service", className: "text-[#ffffff] hover:text-[#005f8a] text-base font-roboto", style: { textDecoration: "underline" }, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Terms of Service"), /*#__PURE__*/ React.createElement("a", { href: "/privacy-policy", className: "text-[#ffffff] hover:text-[#005f8a] text-base font-roboto", style: { textDecoration: "underline" }, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Privacy Policy"))); } function FooterStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function HeaderNoSeatchBar() { return /*#__PURE__*/ React.createElement("header", { className: "w-full h-[85px] bg-[#0099c6] flex items-center justify-between shadow-md mb-6 px-4 md:px-12 relative", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/bbdc65e9-2490-44d8-8342-92dcce50d364/-/format/auto/", alt: "Travel Darts Logo", className: "h-[60px] w-auto md:h-[70px]", style: { display: "block" }, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }))); } function HeaderNoSeatchBarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(HeaderNoSeatchBar, { __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function SocialNavigationBar({ user, profilePhotoUrl, notifications, active, setShowChatPopup }) { const [notificationCount, setNotificationCount] = React.useState(0); const [showNotifications, setShowNotifications] = React.useState(false); const [notificationsList, setNotificationsList] = React.useState([]); const [notificationsLoading, setNotificationsLoading] = React.useState(false); const [notificationsError, setNotificationsError] = React.useState(null); const [blockToggles1, setBlockToggles] = React.useState({}); const [notificationToggles1, setNotificationToggles] = React.useState({}); const [floatingMenuIdx, setFloatingMenuIdx1] = React.useState(null); const [floatingMenuPos, setFloatingMenuPos] = React.useState({ top: 0, left: 0 }); const menuButtonRefs = React.useRef({}); const [profileImage, setProfileImage] = React.useState(null); React.useEffect(()=>{ async function fetchProfileImage() { try { const res = await fetch("/api/getcurrentuserprofileimage", { method: "POST" }); if (!res.ok) throw new Error(); const data = await res.json(); setProfileImage(data && data.profile_image ? data.profile_image : null); } catch { setProfileImage(null); } } if (user && user.id) fetchProfileImage(); }, [ user ]); const isMobile = typeof window !== "undefined" ? window.innerWidth < 768 : false; // Pas navItems aan op basis van of user is ingelogd const navItems = React.useMemo(()=>{ if (user && user.id) { return [ { key: "profile", href: "/profile", icon: profileImage ? /*#__PURE__*/ React.createElement("img", { src: profileImage, alt: "User profile photo", className: "w-7 h-7 rounded-full object-cover", style: { display: "inline-block" }, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user text-xl", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }), label: "Profile" }, { key: "users", href: "/users", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user text-xl", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }), label: "Users" }, { key: "explore", href: "/explore", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-map-location-dot text-xl", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }), label: "Explore" }, { key: "message", href: "#", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-comment text-xl", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }), label: "Message" }, { key: "dart", href: "/draaiende-kaart", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-light fa-earth-americas text-xl", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }), label: "Dart" }, { key: "notifications", href: "#", icon: /*#__PURE__*/ React.createElement("span", { className: "relative", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-bell text-xl", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }), notificationCount > 0 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-1 -right-2 bg-[#d32f2f] text-white text-xs rounded-full px-1.5 font-bold min-w-[18px] text-center", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, notificationCount > 9 ? "9+" : notificationCount)), label: "Notifications" } ]; } else { return [ { key: "signin", href: "/sign-in", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user text-xl", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }), label: "Sign-in" }, { key: "users", href: "/users", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user text-xl", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }), label: "Users" }, { key: "explore", href: "/explore", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-map-location-dot text-xl", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }), label: "Explore" }, { key: "dart", href: "/", icon: /*#__PURE__*/ React.createElement("i", { className: "fa-light fa-earth-americas text-xl", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }), label: "Dart" } ]; } }, [ user, profileImage, notificationCount ]); const [showChatPopup, setShowChatPopupLocal] = React.useState(false); const [chatList, setChatList] = React.useState([]); const [chatLoading, setChatLoading] = React.useState(false); const [chatError, setChatError] = React.useState(null); const [menuOpen, setMenuOpen] = React.useState(null); const [newChatUsers, setNewChatUsers] = React.useState([]); const [newChatLoading, setNewChatLoading] = React.useState(false); const [newChatError, setNewChatError] = React.useState(null); const [newChatSearch, setNewChatSearch] = React.useState(""); const [showNewChat, setShowNewChat] = React.useState(false); const [search, setSearch] = React.useState(""); const [following, setFollowing] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [activeChatUser, setActiveChatUser1] = React.useState(null); const [blockedUsers, setBlockedUsers] = React.useState([]); // State for message privacy const [messagePrivacy, setMessagePrivacy] = React.useState("Everyone"); const [savingPrivacy, setSavingPrivacy] = React.useState(false); const [privacyError, setPrivacyError] = React.useState(null); // Load current privacy setting on mount (if user is logged in) React.useEffect(()=>{ if (!user || !user.id) return; fetch("/api/getmessageprivacy", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then(async (res)=>{ if (!res.ok) throw new Error("Could not get privacy settings"); return res.json(); }).then((data)=>{ if (data && data.message_privacy) setMessagePrivacy(data.message_privacy); }).catch(()=>{}); }, [ user ]); React.useEffect(()=>{ if (!user || !user.id) return; fetch("/api/countunreadnotifications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then((res)=>res.json()).then((data)=>setNotificationCount(data.aantal || 0)).catch(()=>setNotificationCount(0)); }, [ user ]); React.useEffect(()=>{ if (!showNotifications || !user || !user.id) return; setNotificationsLoading(true); setNotificationsError(null); fetch("/api/listnotifications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then((res)=>res.json()).then((data)=>setNotificationsList(data.notifications || [])).catch(()=>setNotificationsError("Kon notificaties niet laden")).finally(()=>setNotificationsLoading(false)); }, [ showNotifications, user ]); React.useEffect(()=>{ if (!showChatPopup || !user || !user.id) return; setChatLoading(true); setChatError(null); // Haal eerst de lijst met chats op fetch("/api/listuserchats", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then(async (res)=>{ if (!res.ok) throw new Error("Could not fetch chat list"); return res.json(); }).then(async (data)=>{ let chats = []; if (Array.isArray(data)) { chats = data; } else if (data && Array.isArray(data.chats)) { chats = data.chats; } else if (data && Array.isArray(data.conversations)) { chats = data.conversations; } else if (data && data.conversations === undefined && data.chats === undefined && data.length === 0) { chats = []; } // Direct setten, geen extra filtering meer setChatList(chats); }).catch(()=>{ setChatError("Could not load chat list"); setChatList([]); }).finally(()=>setChatLoading(false)); }, [ showChatPopup, user ]); React.useEffect(()=>{ if (!showNewChat || !user || !user.id) return; setLoading(true); setError(null); fetch("/api/messageableusers", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id, search }) }).then(async (res)=>{ if (!res.ok) throw new Error("Kon lijst niet ophalen"); return res.json(); }).then((data)=>{ setFollowing((data.users || []).filter((u)=>u && (u.user_id || u.id) && u.name && u.username)); setLoading(false); }).catch((err)=>{ setError("Kon lijst niet ophalen"); setFollowing([]); setLoading(false); }); }, [ showNewChat, user, search ]); React.useEffect(()=>{ if (menuOpen !== "new-chat" || !user || !user.id) return; setNewChatLoading(true); setNewChatError(null); fetch("/api/messageableusers", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id, search: newChatSearch }) }).then(async (res)=>{ if (!res.ok) throw new Error("Kon gebruikers niet ophalen"); return res.json(); }).then((data)=>{ // Toon ALTIJD alle users, ook geblokkeerde setNewChatUsers((data.users || []).filter((u)=>u && (u.user_id || u.id) && u.name && u.username)); setNewChatLoading(false); }).catch((err)=>{ setNewChatError("Kon gebruikers niet ophalen"); setNewChatUsers([]); setNewChatLoading(false); }); }, [ menuOpen, user, newChatSearch ]); React.useEffect(()=>{ if (!showNewChat || !user || !user.id) return; setLoading(true); setError(null); fetch("/api/listblockedusers", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then((res)=>res.json()).then((data)=>{ if (Array.isArray(data.blocked)) { setBlockedUsers(data.blocked); const toggles = {}; data.blocked.forEach((u)=>{ toggles[u.blocked_id || u.user_id || u.id] = true; }); setBlockToggles((prev)=>({ ...prev, ...toggles })); } }).catch(()=>{}); }, [ showNewChat, user ]); // Toggle blokkeer status async function handleToggleBlock(chat) { const chatId = chat.other_user_id || chat.id || chat.username; const isBlocked = blockToggles1[chatId] || false; if (!isBlocked) { // Blokkeren try { await fetch("/api/blockuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: chatId }) }); setBlockToggles((prev)=>({ ...prev, [chatId]: true })); } catch (e) { alert("Kon gebruiker niet blokkeren"); } } else { // Deblokkeren try { await fetch("/api/unblockuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: chatId }) }); setBlockToggles((prev)=>({ ...prev, [chatId]: false })); } catch (e) { alert("Kon gebruiker niet deblokkeren"); } } } // Toggle notificaties per chat async function handleToggleNotifications1(chat) { const chatId = chat.other_user_id || chat.id || chat.username; const current = notificationToggles1[chatId] || false; setNotificationToggles((prev)=>({ ...prev, [chatId]: !current })); try { const endpoint = !current ? "/api/enablenotificationsforuser" : "/api/disablenotificationsforuser"; await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id, other_user_id: chatId }) }); } catch (e) { alert("Kon notificatie-instelling niet wijzigen"); } } // Profiel bekijken function handleViewProfile(chat) { const username = chat.other_username || chat.username || ""; window.location.href = `/user?username=${encodeURIComponent(username)}`; } function handleNavClick(item) { if (item.key === "message" && user && user.id) { setShowChatPopupLocal(true); } else if (item.key === "notifications" && user && user.id) { setShowNotifications(true); } else if (item.key === "signin") { window.location.href = "/account/signin"; } else if (item.href && item.href !== "#") { window.location.href = item.href; } } React.useEffect(()=>{ function handleClick(e) { if (floatingMenuIdx !== null) setFloatingMenuIdx1(null); } if (floatingMenuIdx !== null) { window.addEventListener("click", handleClick); return ()=>window.removeEventListener("click", handleClick); } }, [ floatingMenuIdx ]); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("nav", { className: "fixed bottom-0 left-0 w-full z-[9999] bg-[#0099c6] border-t border-[#0077b6] flex flex-row items-center justify-between px-1 md:px-8", style: { minHeight: 60, boxShadow: "0 -2px 8px 0 rgba(0,0,0,0.07)" }, __source: { fileName: "", lineNumber: 397, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-row w-full justify-between items-center", style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 404, columnNumber: 9 }, __self: this }, navItems.map((item, idx)=>{ const isActive = active === item.key; const baseClasses = "flex flex-col md:flex-row items-center justify-center gap-0.5 md:gap-2 px-2 py-2 md:px-4 md:py-2 rounded-lg font-roboto transition text-white hover:bg-[#0077b6] focus:bg-[#0077b6] cursor-pointer"; const activeClasses = isActive ? "bg-[#0077b6] font-bold" : ""; if (item.key === "message" || item.key === "notifications") { return /*#__PURE__*/ React.createElement("li", { key: item.key, className: "flex-1 flex justify-center min-w-0", style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 417, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: `${baseClasses} ${active === item.key ? "bg-[#0077b6] font-bold" : ""}`, style: { minWidth: 0, width: isMobile ? "100%" : undefined, maxWidth: isMobile ? "100%" : undefined, flex: 1, textAlign: "center", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: isMobile ? 0 : 8, fontSize: 16, padding: isMobile ? "8px 0" : "10px 0" }, "aria-label": item.label, onClick: ()=>handleNavClick(item), __source: { fileName: "", lineNumber: 422, columnNumber: 19 }, __self: this }, item.icon, /*#__PURE__*/ React.createElement("span", { className: `hidden md:inline font-roboto text-base ml-2`, style: { color: "#fff", fontWeight: active === item.key ? 700 : 500, letterSpacing: 0.1 }, __source: { fileName: "", lineNumber: 444, columnNumber: 21 }, __self: this }, item.label))); } return /*#__PURE__*/ React.createElement("li", { key: item.key, className: "flex-1 flex justify-center min-w-0", style: { minWidth: 0 }, __source: { fileName: "", lineNumber: 459, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.href, className: `${baseClasses} ${active === item.key ? "bg-[#0077b6] font-bold" : ""}`, style: { minWidth: 0, width: isMobile ? "100%" : undefined, maxWidth: isMobile ? "100%" : undefined, flex: 1, textAlign: "center", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: isMobile ? 0 : 8, fontSize: 16, padding: isMobile ? "8px 0" : "10px 0" }, "aria-label": item.label, __source: { fileName: "", lineNumber: 464, columnNumber: 17 }, __self: this }, item.icon, /*#__PURE__*/ React.createElement("span", { className: `hidden md:inline font-roboto text-base ml-2`, style: { color: "#fff", fontWeight: active === item.key ? 700 : 500, letterSpacing: 0.1 }, __source: { fileName: "", lineNumber: 485, columnNumber: 19 }, __self: this }, item.label))); }))), showChatPopup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-60 flex items-center justify-center bg-black bg-opacity-40", __source: { fileName: "", lineNumber: 502, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg w-full max-w-[400px] mx-2 p-0 font-roboto relative", __source: { fileName: "", lineNumber: 503, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 pt-4 pb-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 504, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 ml-auto", __source: { fileName: "", lineNumber: 505, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-xl mr-2", "aria-label": "Start new chat", onClick: ()=>{ setMenuOpen("new-chat"); }, __source: { fileName: "", lineNumber: 506, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-pen-to-square", __source: { fileName: "", lineNumber: 513, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-2xl", onClick: ()=>setShowChatPopupLocal(false), "aria-label": "Close chat popup", __source: { fileName: "", lineNumber: 515, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-xmark", __source: { fileName: "", lineNumber: 520, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "px-4 pt-3", __source: { fileName: "", lineNumber: 524, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 525, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search in chats", className: "w-full border border-[#eee] rounded-md px-9 py-2 mb-3 focus:outline-none focus:border-[#0099c6] font-roboto bg-[#f7fafd]", style: { fontSize: 15 }, __source: { fileName: "", lineNumber: 526, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-[#aaa] text-base", __source: { fileName: "", lineNumber: 532, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4 mb-2", __source: { fileName: "", lineNumber: 535, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#444] text-sm mb-1 mt-1", __source: { fileName: "", lineNumber: 536, columnNumber: 15 }, __self: this }, "Who can message me?"), /*#__PURE__*/ React.createElement("select", { className: "w-full border border-[#eee] rounded-md px-3 py-2 font-roboto bg-[#e9eefd] text-[#444] text-sm", value: messagePrivacy, onChange: async (e)=>{ const newValue = e.target.value; setMessagePrivacy(newValue); setSavingPrivacy(true); setPrivacyError(null); try { const res = await fetch("/api/updatemessageprivacy", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id, message_privacy: newValue }) }); if (!res.ok) throw new Error("Kon privacy-instelling niet opslaan"); } catch (err) { setPrivacyError("Kon privacy-instelling niet opslaan"); } finally{ setSavingPrivacy(false); } }, disabled: savingPrivacy, __source: { fileName: "", lineNumber: 539, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Everyone", __source: { fileName: "", lineNumber: 566, columnNumber: 17 }, __self: this }, "Everyone"), /*#__PURE__*/ React.createElement("option", { value: "No one", __source: { fileName: "", lineNumber: 567, columnNumber: 17 }, __self: this }, "No one"), /*#__PURE__*/ React.createElement("option", { value: "People who follow me", __source: { fileName: "", lineNumber: 568, columnNumber: 17 }, __self: this }, "People who follow me"), /*#__PURE__*/ React.createElement("option", { value: "People I follow", __source: { fileName: "", lineNumber: 571, columnNumber: 17 }, __self: this }, "People I follow")), privacyError && /*#__PURE__*/ React.createElement("div", { className: "text-red-600 text-xs mt-1", __source: { fileName: "", lineNumber: 574, columnNumber: 17 }, __self: this }, privacyError)), blockedUsers.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 578, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#d32f2f] text-sm mb-1", __source: { fileName: "", lineNumber: 579, columnNumber: 17 }, __self: this }, "Blocked users"), blockedUsers.map((blockedUser)=>/*#__PURE__*/ React.createElement("div", { key: blockedUser.blocked_id || blockedUser.user_id || blockedUser.id, className: "flex items-center gap-3 py-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 583, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: blockedUser.profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: "Blocked user", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 591, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 599, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 600, columnNumber: 23 }, __self: this }, blockedUser.name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 602, columnNumber: 25 }, __self: this }, "@", blockedUser.username))), /*#__PURE__*/ React.createElement("button", { className: "ml-2 px-3 py-1 bg-[#0099c6] text-white rounded-full text-xs font-bold hover:bg-[#0077b6] transition", onClick: async (e)=>{ e.stopPropagation(); try { await fetch("/api/unblockuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: blockedUser.blocked_id || blockedUser.user_id || blockedUser.id }) }); setBlockToggles((prev)=>({ ...prev, [blockedUser.blocked_id || blockedUser.user_id || blockedUser.id]: false })); setBlockedUsers((prev)=>prev.filter((u)=>(u.blocked_id || u.user_id || u.id) !== (blockedUser.blocked_id || blockedUser.user_id || blockedUser.id))); } catch (err) { alert("Could not unblock user"); } }, __source: { fileName: "", lineNumber: 607, columnNumber: 21 }, __self: this }, "Unblock")))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-[300px] px-2 pb-4", __source: { fileName: "", lineNumber: 648, columnNumber: 13 }, __self: this }, chatLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-6", __source: { fileName: "", lineNumber: 650, columnNumber: 17 }, __self: this }, "Loading...") : chatError ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-6", __source: { fileName: "", lineNumber: 654, columnNumber: 17 }, __self: this }, chatError) : Array.isArray(chatList) && chatList.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-6", __source: { fileName: "", lineNumber: 658, columnNumber: 17 }, __self: this }, "No chats found.") : Array.isArray(chatList) && chatList.length > 0 ? chatList.map((chat, idx)=>/*#__PURE__*/ React.createElement("div", { key: chat.other_user_id || chat.id || idx, className: "flex items-center gap-3 py-2 border-b border-[#eee] cursor-pointer hover:bg-[#f7fafd] group relative", onClick: ()=>{ if (floatingMenuIdx !== idx) { setActiveChatUser1(chat.other_user_id || chat.username || chat.id); } }, __source: { fileName: "", lineNumber: 663, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: chat.other_profile_image || chat.img || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: "User", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 674, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 683, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 684, columnNumber: 23 }, __self: this }, chat.other_name || chat.name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 686, columnNumber: 25 }, __self: this }, "@", chat.other_username || chat.username)), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666] truncate", __source: { fileName: "", lineNumber: 690, columnNumber: 23 }, __self: this }, chat.last_message ? chat.last_message.slice(0, 40) : chat.message || "(geen berichten)", chat.last_message_time && /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#aaa] ml-2", __source: { fileName: "", lineNumber: 695, columnNumber: 27 }, __self: this }, "· ", chat.last_message_time))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center ml-2", __source: { fileName: "", lineNumber: 701, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 702, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { ref: (el)=>menuButtonRefs.current[idx] = el, className: "bg-[#0099c6] w-7 h-7 rounded-full flex items-center justify-center focus:outline-none", onClick: (e)=>{ e.stopPropagation(); const rect = menuButtonRefs.current[idx]?.getBoundingClientRect(); setFloatingMenuPos({ top: rect ? rect.bottom + window.scrollY : 100, left: rect ? rect.left + window.scrollX : 100 }); setFloatingMenuIdx1(idx); }, tabIndex: 0, "aria-label": "More options", __source: { fileName: "", lineNumber: 703, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg", style: { lineHeight: 0 }, __source: { fileName: "", lineNumber: 721, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-ellipsis-vertical", __source: { fileName: "", lineNumber: 725, columnNumber: 29 }, __self: this }))), floatingMenuIdx === idx && /*#__PURE__*/ React.createElement("div", { className: "fixed z-[9999] bg-white border border-[#eee] rounded-lg shadow-lg min-w-[180px] text-left", style: { top: floatingMenuPos.top, left: (()=>{ const menuWidth = 200; const screenWidth = typeof window !== "undefined" ? window.innerWidth : 400; // Als het menu buiten het scherm valt, open naar links if (floatingMenuPos.left + menuWidth > screenWidth) { return Math.max(0, floatingMenuPos.left - menuWidth); } // Extra: als er weinig ruimte rechts is (bijv. op mobiel), altijd naar links openen if (screenWidth - floatingMenuPos.left < menuWidth + 20) { return Math.max(0, floatingMenuPos.left - menuWidth); } return floatingMenuPos.left; })(), boxShadow: "0 4px 16px 0 rgba(0,0,0,0.12)" }, onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 729, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-1 p-2", __source: { fileName: "", lineNumber: 765, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded text-[#d32f2f] font-roboto", onClick: async (e)=>{ e.stopPropagation(); if (window.confirm("Are you sure you want to delete this chat?")) { try { const sender_id = user.id; const receiver_id = chat.other_user_id || chat.id || chat.username; const res = await fetch("/api/deletechat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sender_id, receiver_id }) }); if (!res.ok) { const data = await res.json().catch(()=>({})); throw new Error(data.error || "Could not delete chat"); } setChatList((prev)=>prev.filter((c, i)=>i !== idx)); setFloatingMenuIdx1(null); } catch (err) { alert(err.message || "Could not delete chat"); } } }, __source: { fileName: "", lineNumber: 766, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-trash-can", __source: { fileName: "", lineNumber: 814, columnNumber: 33 }, __self: this }), " Delete chat"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded", __source: { fileName: "", lineNumber: 817, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: !!blockToggles1[chat.other_user_id || chat.id || chat.username], onChange: (e)=>{ e.stopPropagation(); handleToggleBlock(chat); }, className: "accent-[#d32f2f]", style: { width: 16, height: 16 }, __source: { fileName: "", lineNumber: 818, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#d32f2f] font-roboto", __source: { fileName: "", lineNumber: 834, columnNumber: 33 }, __self: this }, "Block")), /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded", __source: { fileName: "", lineNumber: 838, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: !!notificationToggles1[chat.other_user_id || chat.id || chat.username], onChange: (e)=>{ e.stopPropagation(); handleToggleNotifications1(chat); }, className: "accent-[#0099c6]", style: { width: 16, height: 16 }, __source: { fileName: "", lineNumber: 839, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#222] font-roboto", __source: { fileName: "", lineNumber: 855, columnNumber: 33 }, __self: this }, "Notifications")), /*#__PURE__*/ React.createElement("button", { className: "w-full text-left px-2 py-1 hover:bg-[#f7fafd] text-[#0099c6] font-roboto flex items-center gap-2 rounded", onClick: (e)=>{ e.stopPropagation(); handleViewProfile(chat); setFloatingMenuIdx1(null); }, __source: { fileName: "", lineNumber: 859, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user", __source: { fileName: "", lineNumber: 867, columnNumber: 33 }, __self: this }), " View profile"))))))) : null)), menuOpen === "new-chat" && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-white bg-opacity-95 flex flex-col items-center justify-center z-50 rounded-xl p-4", __source: { fileName: "", lineNumber: 881, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[320px]", __source: { fileName: "", lineNumber: 882, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 883, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-[#0099c6]", __source: { fileName: "", lineNumber: 884, columnNumber: 19 }, __self: this }, "Start new chat"), /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-xl", onClick: ()=>setMenuOpen(null), "aria-label": "Close search", __source: { fileName: "", lineNumber: 887, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-xmark", __source: { fileName: "", lineNumber: 892, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search user...", className: "w-full border border-[#eee] rounded-md px-3 py-2 mb-3 focus:outline-none focus:border-[#0099c6] font-roboto bg-[#f7fafd]", style: { fontSize: 15 }, value: newChatSearch, onChange: (e)=>setNewChatSearch(e.target.value), __source: { fileName: "", lineNumber: 895, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-[220px]", __source: { fileName: "", lineNumber: 903, columnNumber: 17 }, __self: this }, newChatLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-4", __source: { fileName: "", lineNumber: 905, columnNumber: 21 }, __self: this }, "Loading...") : newChatError ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-4", __source: { fileName: "", lineNumber: 909, columnNumber: 21 }, __self: this }, newChatError) : Array.isArray(newChatUsers) && newChatUsers.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-4", __source: { fileName: "", lineNumber: 914, columnNumber: 21 }, __self: this }, "No users found.") : Array.isArray(newChatUsers) && newChatUsers.length > 0 ? newChatUsers.filter((u)=>!newChatSearch || u.name && u.name.toLowerCase().includes(newChatSearch.toLowerCase()) || u.username && u.username.toLowerCase().includes(newChatSearch.toLowerCase())).map((otherUser, idx)=>{ // Gebruik de juiste blocked property van de API response const isBlocked = otherUser.blocked || otherUser.isBlocked; return /*#__PURE__*/ React.createElement("div", { key: otherUser.user_id || otherUser.id, className: "flex items-center gap-3 py-2 border-b border-[#eee] cursor-pointer hover:bg-[#f7fafd] group relative", __source: { fileName: "", lineNumber: 936, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: otherUser.profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: "User", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 940, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 948, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 949, columnNumber: 31 }, __self: this }, otherUser.name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 951, columnNumber: 33 }, __self: this }, "@", otherUser.username))), isBlocked ? /*#__PURE__*/ React.createElement("button", { className: "ml-2 px-3 py-1 bg-[#0099c6] text-white rounded-full text-xs font-bold hover:bg-[#0077b6] transition", onClick: async (e)=>{ e.stopPropagation(); try { await fetch("/api/unblockuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: otherUser.user_id || otherUser.id }) }); setBlockToggles((prev)=>({ ...prev, [otherUser.user_id || otherUser.id]: false })); setNewChatUsers((prev)=>prev.map((u)=>(u.user_id || u.id) === (otherUser.user_id || otherUser.id) ? { ...u, blocked: false, isBlocked: false } : u)); } catch (err) { alert("Could not unblock user"); } }, __source: { fileName: "", lineNumber: 957, columnNumber: 31 }, __self: this }, "Unblock") : /*#__PURE__*/ React.createElement("button", { className: "ml-2 px-3 py-1 bg-[#d32f2f] text-white rounded-full text-xs font-bold hover:bg-[#b71c1c] transition", onClick: async (e)=>{ e.stopPropagation(); try { await fetch("/api/blockuser", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: otherUser.user_id || otherUser.id }) }); setBlockToggles((prev)=>({ ...prev, [otherUser.user_id || otherUser.id]: true })); setNewChatUsers((prev)=>prev.map((u)=>(u.user_id || u.id) === (otherUser.user_id || otherUser.id) ? { ...u, blocked: true, isBlocked: true } : u)); } catch (err) { alert("Could not block user"); } }, __source: { fileName: "", lineNumber: 997, columnNumber: 31 }, __self: this }, "Block"), /*#__PURE__*/ React.createElement("button", { className: "ml-2 px-3 py-1 bg-[#0099c6] text-white rounded-full text-xs font-bold hover:bg-[#0077b6] transition", onClick: async ()=>{ setNewChatLoading(true); setNewChatError(null); try { setActiveChatUser1(otherUser.user_id || otherUser.id); setMenuOpen(null); } catch (e) { setNewChatError("Could not open chat"); } finally{ setNewChatLoading(false); } }, __source: { fileName: "", lineNumber: 1036, columnNumber: 29 }, __self: this }, "Chat")); }) : null)))), showNewChat && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-70 flex items-center justify-center bg-black bg-opacity-40", __source: { fileName: "", lineNumber: 1066, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg w-full max-w-[400px] mx-2 p-0 font-roboto relative", __source: { fileName: "", lineNumber: 1067, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 pt-4 pb-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 1068, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#0099c6]", __source: { fileName: "", lineNumber: 1069, columnNumber: 15 }, __self: this }, "Start new chat"), /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-2xl", onClick: ()=>setShowNewChat(false), "aria-label": "Close new chat popup", __source: { fileName: "", lineNumber: 1072, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-xmark", __source: { fileName: "", lineNumber: 1077, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4 pt-3", __source: { fileName: "", lineNumber: 1080, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1081, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search users you follow...", className: "w-full border border-[#eee] rounded-md px-9 py-2 mb-3 focus:outline-none focus:border-[#0099c6] font-roboto bg-[#f7fafd]", style: { fontSize: 15 }, value: search, onChange: (e)=>setSearch(e.target.value), __source: { fileName: "", lineNumber: 1082, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-[#aaa] text-base", __source: { fileName: "", lineNumber: 1090, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-[300px] px-2 pb-4", __source: { fileName: "", lineNumber: 1093, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1095, columnNumber: 17 }, __self: this }, "Loading...") : error ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1099, columnNumber: 17 }, __self: this }, error) : following.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-6", __source: { fileName: "", lineNumber: 1103, columnNumber: 17 }, __self: this }, "No users found you can message.") : following.map((u, idx)=>/*#__PURE__*/ React.createElement("div", { key: u.user_id || u.id, className: "flex items-center gap-3 py-2 border-b border-[#f0f0f0] cursor-pointer hover:bg-[#f7fafd] group", onClick: ()=>{ window.location.href = `/chat?user=${encodeURIComponent(u.username)}`; setShowNewChat(false); }, __source: { fileName: "", lineNumber: 1108, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: u.profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: u.name, className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 1118, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 1126, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 1127, columnNumber: 23 }, __self: this }, u.name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 1129, columnNumber: 25 }, __self: this }, "@", u.username)))))))), activeChatUser && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-80 flex items-center justify-center bg-black bg-opacity-60", __source: { fileName: "", lineNumber: 1142, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg w-full max-w-[400px] mx-2 p-0 font-roboto relative", __source: { fileName: "", lineNumber: 1143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(PopupChat, { userId: user.id, otherUserId: activeChatUser, onClose: ()=>setActiveChatUser1(null), __source: { fileName: "", lineNumber: 1144, columnNumber: 13 }, __self: this }))), showNotifications && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-70 flex items-center justify-center bg-black bg-opacity-40", __source: { fileName: "", lineNumber: 1153, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg w-full max-w-[400px] mx-2 p-0 font-roboto relative", __source: { fileName: "", lineNumber: 1154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 pt-4 pb-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 1155, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#0099c6]", __source: { fileName: "", lineNumber: 1156, columnNumber: 15 }, __self: this }, "Notifications"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1159, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#d32f2f] hover:text-[#b71c1c] text-base font-bold px-3 py-1 rounded transition border border-[#eee] mr-2", onClick: async ()=>{ if (!user || !user.id) return; if (!window.confirm("Weet je zeker dat je alle notificaties wilt verwijderen?")) return; try { const res = await fetch("/api/delete-all-notifications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }); if (!res.ok) throw new Error("Kon alle notificaties niet verwijderen"); setNotificationsList([]); setNotificationCount(0); } catch (err) { alert("Kon alle notificaties niet verwijderen"); } }, "aria-label": "Delete all notifications", __source: { fileName: "", lineNumber: 1160, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-trash-can mr-1", __source: { fileName: "", lineNumber: 1188, columnNumber: 19 }, __self: this }), " Delete all"), /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-2xl", onClick: ()=>setShowNotifications(false), "aria-label": "Close notifications", __source: { fileName: "", lineNumber: 1190, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-xmark", __source: { fileName: "", lineNumber: 1195, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-[400px] px-4 py-2", __source: { fileName: "", lineNumber: 1199, columnNumber: 13 }, __self: this }, notificationsLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1201, columnNumber: 17 }, __self: this }, "Loading...") : notificationsError ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1205, columnNumber: 17 }, __self: this }, notificationsError) : notificationsList.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-6", __source: { fileName: "", lineNumber: 1209, columnNumber: 17 }, __self: this }, "No notifications.") : notificationsList.map((n)=>/*#__PURE__*/ React.createElement("div", { key: n.id, className: "flex items-center gap-3 py-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 1214, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: n.actor_profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: n.actor_name, className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 1218, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 1226, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 1227, columnNumber: 23 }, __self: this }, n.actor_name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 1229, columnNumber: 25 }, __self: this }, "@", n.actor_username)), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666] truncate", __source: { fileName: "", lineNumber: 1233, columnNumber: 23 }, __self: this }, n.type === "like" && "Liked your post", n.type === "comment" && "Commented on your post", n.type === "chat" && "Sent you a chat message", n.message && /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1237, columnNumber: 39 }, __self: this }, ": ", n.message)), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-[#aaa]", __source: { fileName: "", lineNumber: 1239, columnNumber: 23 }, __self: this }, new Date(n.created_at).toLocaleString())), /*#__PURE__*/ React.createElement("button", { className: "text-[#d32f2f] hover:text-[#b71c1c] text-lg px-2 py-1 rounded transition border border-[#eee]", "aria-label": "Delete notification", onClick: async ()=>{ if (!user || !user.id) return; try { const res = await fetch("/api/delete-notification", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ notification_id: n.id, user_id: user.id }) }); if (!res.ok) throw new Error("Kon notificatie niet verwijderen"); setNotificationsList((prev)=>prev.filter((x)=>x.id !== n.id)); setNotificationCount((prev)=>Math.max(0, prev - 1)); } catch (err) { alert("Kon notificatie niet verwijderen"); } }, __source: { fileName: "", lineNumber: 1243, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-trash-can", __source: { fileName: "", lineNumber: 1268, columnNumber: 23 }, __self: this })))))))); } function SocialNavigationBarStory() { const { data: user, loading: userLoading } = useUser(); const [showChatPopup, setShowChatPopup] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(null); function handleBlockUser(chat) { setMenuOpen(null); alert(`User ${chat.name} blocked!`); } function handleDisableNotifications(chat) { handleToggleNotifications(chat); } function handleViewProfile(chat) { window.location.href = `/profile/${(chat.username || chat.other_username || "").replace("@", "")}`; } React.useEffect(()=>{ function handleClick(e) { if (menuOpen !== null) setMenuOpen(null); } if (menuOpen !== null) { window.addEventListener("click", handleClick); return ()=>window.removeEventListener("click", handleClick); } }, [ menuOpen ]); const [chatList, setChatList] = React.useState([]); const [chatLoading, setChatLoading] = React.useState(false); const [chatError, setChatError] = React.useState(null); React.useEffect(()=>{ if (!user || !user.id) return; setChatLoading(true); setChatError(null); fetch("/api/listuserchats", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then(async (res)=>{ if (!res.ok) throw new Error("Could not fetch chat list"); return res.json(); }).then(async (data)=>{ let chats = []; if (Array.isArray(data)) { chats = data; } else if (data && Array.isArray(data.chats)) { chats = data.chats; } else if (data && Array.isArray(data.conversations)) { chats = data.conversations; } else if (data && data.conversations === undefined && data.chats === undefined && data.length === 0) { chats = []; } // Direct setten, geen extra filtering meer setChatList(chats); }).catch(()=>{ setChatError("Could not load chat list"); setChatList([]); }).finally(()=>setChatLoading(false)); }, [ user ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-[300px] bg-[#fffbe9] flex flex-col justify-end", __source: { fileName: "", lineNumber: 1354, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 1355, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SocialNavigationBar, { user: { name: "Jane Doe" }, profilePhotoUrl: "https://randomuser.me/api/portraits/women/44.jpg", notifications: 3, active: "explore", setShowChatPopup: setShowChatPopup, __source: { fileName: "", lineNumber: 1356, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-[80px]", __source: { fileName: "", lineNumber: 1363, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 1364, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SocialNavigationBar, { user: { name: "John Smith" }, profilePhotoUrl: "", notifications: 0, active: "profile", setShowChatPopup: setShowChatPopup, __source: { fileName: "", lineNumber: 1365, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-[80px]", __source: { fileName: "", lineNumber: 1372, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 1373, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SocialNavigationBar, { user: { name: "No Photo" }, profilePhotoUrl: null, notifications: 12, active: "notifications", setShowChatPopup: setShowChatPopup, __source: { fileName: "", lineNumber: 1374, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-[80px]", __source: { fileName: "", lineNumber: 1381, columnNumber: 7 }, __self: this }), showChatPopup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-60 flex items-center justify-center bg-black bg-opacity-40", __source: { fileName: "", lineNumber: 1383, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg w-full max-w-[400px] mx-2 p-0 font-roboto relative", __source: { fileName: "", lineNumber: 1384, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 pt-4 pb-2 border-b border-[#eee]", __source: { fileName: "", lineNumber: 1385, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 ml-auto", __source: { fileName: "", lineNumber: 1386, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-xl mr-2", "aria-label": "Start new chat", onClick: ()=>{ setMenuOpen("new-chat"); }, __source: { fileName: "", lineNumber: 1387, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-pen-to-square", __source: { fileName: "", lineNumber: 1394, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#0099c6] hover:text-[#0077b6] text-2xl", onClick: ()=>setShowChatPopup(false), "aria-label": "Close chat popup", __source: { fileName: "", lineNumber: 1396, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-xmark", __source: { fileName: "", lineNumber: 1401, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "px-4 pt-3", __source: { fileName: "", lineNumber: 1405, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1406, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search in chats", className: "w-full border border-[#eee] rounded-md px-9 py-2 mb-3 focus:outline-none focus:border-[#0099c6] font-roboto bg-[#f7fafd]", style: { fontSize: 15 }, __source: { fileName: "", lineNumber: 1407, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-[#aaa] text-base", __source: { fileName: "", lineNumber: 1413, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4 mb-2", __source: { fileName: "", lineNumber: 1416, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#444] text-sm mb-1 mt-1", __source: { fileName: "", lineNumber: 1417, columnNumber: 15 }, __self: this }, "Who can message me?"), /*#__PURE__*/ React.createElement("select", { className: "w-full border border-[#eee] rounded-md px-3 py-2 font-roboto bg-[#e9eefd] text-[#444] text-sm", __source: { fileName: "", lineNumber: 1420, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Everyone", __source: { fileName: "", lineNumber: 1421, columnNumber: 17 }, __self: this }, "Everyone"), /*#__PURE__*/ React.createElement("option", { value: "No one", __source: { fileName: "", lineNumber: 1422, columnNumber: 17 }, __self: this }, "No one"), /*#__PURE__*/ React.createElement("option", { value: "People who follow me", __source: { fileName: "", lineNumber: 1423, columnNumber: 17 }, __self: this }, "People who follow me"), /*#__PURE__*/ React.createElement("option", { value: "People I follow", __source: { fileName: "", lineNumber: 1426, columnNumber: 17 }, __self: this }, "People I follow"))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-[300px] px-2 pb-4", __source: { fileName: "", lineNumber: 1429, columnNumber: 13 }, __self: this }, chatLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1431, columnNumber: 17 }, __self: this }, "Loading...") : chatError ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1435, columnNumber: 17 }, __self: this }, chatError) : Array.isArray(chatList) && chatList.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-6", __source: { fileName: "", lineNumber: 1439, columnNumber: 17 }, __self: this }, "No chats found.") : Array.isArray(chatList) && chatList.length > 0 ? chatList.map((chat, idx)=>/*#__PURE__*/ React.createElement("div", { key: chat.other_user_id || idx, className: "flex items-center gap-3 py-2 border-b border-[#f0f0f0] cursor-pointer hover:bg-[#f7fafd] group relative", onClick: ()=>{ setActiveChatUser(chat.other_user_id || chat.username || chat.id); }, __source: { fileName: "", lineNumber: 1444, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: chat.other_profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: "User", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 1453, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 1461, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#222] truncate", __source: { fileName: "", lineNumber: 1462, columnNumber: 23 }, __self: this }, chat.other_name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#888] font-normal", __source: { fileName: "", lineNumber: 1464, columnNumber: 25 }, __self: this }, "@", chat.other_username)), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666] truncate", __source: { fileName: "", lineNumber: 1468, columnNumber: 23 }, __self: this }, chat.last_message ? chat.last_message.slice(0, 40) : "(geen berichten)", chat.last_message_time && /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#aaa] ml-2", __source: { fileName: "", lineNumber: 1473, columnNumber: 27 }, __self: this }, "· ", chat.last_message_time))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center ml-2", __source: { fileName: "", lineNumber: 1479, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1480, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#0099c6] w-7 h-7 rounded-full flex items-center justify-center focus:outline-none", onClick: (e)=>{ e.stopPropagation(); setMenuOpen(idx); }, __source: { fileName: "", lineNumber: 1481, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg", style: { lineHeight: 0 }, __source: { fileName: "", lineNumber: 1488, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-ellipsis-vertical", __source: { fileName: "", lineNumber: 1492, columnNumber: 29 }, __self: this }))), menuOpen === idx && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-1 bg-white border border-[#eee] rounded-lg shadow-lg z-10 min-w-[180px] text-left", __source: { fileName: "", lineNumber: 1496, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-1 p-2", __source: { fileName: "", lineNumber: 1497, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded text-[#d32f2f] font-roboto", onClick: async (e)=>{ e.stopPropagation(); if (window.confirm("Are you sure you want to delete this chat?")) { try { const sender_id = user.id; const receiver_id = chat.other_user_id || chat.id || chat.username; const res = await fetch("/api/delete-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sender_id, receiver_id }) }); if (!res.ok) { const data = await res.json().catch(()=>({})); throw new Error(data.error || "Could not delete chat"); } setChatList((prev)=>prev.filter((c, i)=>i !== idx)); setFloatingMenuIdx(null); } catch (err) { alert(err.message || "Could not delete chat"); } } }, __source: { fileName: "", lineNumber: 1498, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-trash-can", __source: { fileName: "", lineNumber: 1546, columnNumber: 33 }, __self: this }), " Delete chat"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded", __source: { fileName: "", lineNumber: 1549, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: !!blockToggles[chat.other_user_id || chat.id || chat.username], onChange: (e)=>{ e.stopPropagation(); handleBlockUser(chat); }, className: "accent-[#d32f2f]", style: { width: 16, height: 16 }, __source: { fileName: "", lineNumber: 1550, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#d32f2f] font-roboto", __source: { fileName: "", lineNumber: 1566, columnNumber: 33 }, __self: this }, "Block")), /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2 cursor-pointer px-2 py-1 hover:bg-[#f7fafd] rounded", __source: { fileName: "", lineNumber: 1570, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: !!notificationToggles[chat.other_user_id || chat.id || chat.username], onChange: ()=>handleDisableNotifications(chat), className: "accent-[#0099c6]", style: { width: 16, height: 16 }, __source: { fileName: "", lineNumber: 1571, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#222] font-roboto", __source: { fileName: "", lineNumber: 1586, columnNumber: 33 }, __self: this }, "Notifications")), /*#__PURE__*/ React.createElement("button", { className: "w-full text-left px-2 py-1 hover:bg-[#f7fafd] text-[#0099c6] font-roboto flex items-center gap-2 rounded", onClick: (e)=>{ e.stopPropagation(); handleViewProfile(chat); }, __source: { fileName: "", lineNumber: 1590, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-regular fa-user", __source: { fileName: "", lineNumber: 1597, columnNumber: 33 }, __self: this }), " View profile"))))))) : null)))); } function PopupChat({ userId, otherUserId, onClose }) { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [sending, setSending] = React.useState(false); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [otherUser, setOtherUser] = React.useState(null); const chatBottomRef = React.useRef(null); React.useEffect(()=>{ if (!userId || !otherUserId) return; let isMounted = true; fetch("/api/getuserprofile", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: otherUserId }) }).then((res)=>res.json()).then((data)=>{ if (isMounted && data && data.profile) setOtherUser(data.profile); }).catch(()=>{}); const fetchMessages = ()=>{ fetch("/api/listchatmessages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sender_id: userId, receiver_id: otherUserId }) }).then((res)=>res.json()).then((data)=>{ if (isMounted) setMessages(data.messages || []); }).catch(()=>isMounted && setError("Kon chatberichten niet laden")).finally(()=>isMounted && setLoading(false)); }; setLoading(true); setError(null); fetchMessages(); const interval = setInterval(fetchMessages, 3000); return ()=>{ isMounted = false; clearInterval(interval); }; }, [ userId, otherUserId ]); React.useEffect(()=>{ if (chatBottomRef.current) { chatBottomRef.current.scrollIntoView({ behavior: "smooth" }); } }, [ messages ]); async function handleSend() { if (!input.trim() || !otherUserId) return; setSending(true); setError(null); try { const res = await fetch("/api/sendchatmessage", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ receiver_id: otherUserId, message: input }) }); if (!res.ok) throw new Error("Kon bericht niet verzenden"); setInput(""); } catch (e) { setError("Kon bericht niet verzenden"); } finally{ setSending(false); } } function handleInputChange(e) { setInput(e.target.value); } function handleKeyDown(e) { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); } } return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] bg-white rounded-xl shadow-lg flex flex-col", style: { minHeight: 400, maxHeight: 600 }, __source: { fileName: "", lineNumber: 1698, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-[#f0f8ff] rounded-t-xl", __source: { fileName: "", lineNumber: 1702, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 min-w-0", __source: { fileName: "", lineNumber: 1703, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: otherUser && otherUser.profile_image || "https://ucarecdn.com/7e1e2e2b-2e2e-4e2e-8e2e-2e2e2e2e2e2e/-/resize/128x128/", alt: otherUser ? otherUser.name : "User", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 1704, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-w-0", __source: { fileName: "", lineNumber: 1712, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-lg text-[#0099c6] truncate", __source: { fileName: "", lineNumber: 1713, columnNumber: 13 }, __self: this }, otherUser ? otherUser.name : "..."), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#888] truncate", __source: { fileName: "", lineNumber: 1716, columnNumber: 13 }, __self: this }, "@", otherUser ? otherUser.username : "..."))), /*#__PURE__*/ React.createElement("button", { className: "text-[#888] hover:text-[#d32f2f] text-2xl font-bold bg-transparent border-none", style: { lineHeight: 1 }, onClick: onClose, "aria-label": "Close", name: "close-chat", __source: { fileName: "", lineNumber: 1721, columnNumber: 9 }, __self: this }, "×")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto px-3 py-4 bg-[#f8fafc]", __source: { fileName: "", lineNumber: 1731, columnNumber: 7 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#0077b6] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1733, columnNumber: 11 }, __self: this }, "Loading...") : error ? /*#__PURE__*/ React.createElement("div", { className: "text-[#d32f2f] font-bold text-center py-6", __source: { fileName: "", lineNumber: 1737, columnNumber: 11 }, __self: this }, error) : messages.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#888] text-center py-6", __source: { fileName: "", lineNumber: 1741, columnNumber: 11 }, __self: this }, "No messages.") : messages.map((msg, idx)=>{ const isMe = msg.sender_id === userId; const bubbleClasses = isMe ? "bg-[#0099c6] text-white self-end rounded-br-lg rounded-tl-lg rounded-bl-lg" : "bg-[#f0f8ff] text-[#222] self-start rounded-bl-lg rounded-tr-lg rounded-br-lg"; const align = isMe ? "items-end" : "items-start"; return /*#__PURE__*/ React.createElement("div", { key: idx, className: `flex flex-col mb-3 ${align}`, __source: { fileName: "", lineNumber: 1750, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[75%] px-4 py-2 text-base font-roboto ${bubbleClasses} shadow`, __source: { fileName: "", lineNumber: 1751, columnNumber: 17 }, __self: this }, msg.message)); }), /*#__PURE__*/ React.createElement("div", { ref: chatBottomRef, __source: { fileName: "", lineNumber: 1760, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-3 border-t bg-white flex items-center gap-2", __source: { fileName: "", lineNumber: 1762, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "flex-1 resize-none border border-[#e0e0e0] rounded-full px-4 py-2 font-roboto text-base focus:outline-none focus:border-[#0077b6] bg-[#f8fafc]", placeholder: "Type a message...", value: input, onChange: handleInputChange, onKeyDown: handleKeyDown, rows: 1, maxLength: 500, name: "chat-message", style: { minHeight: 40, maxHeight: 80 }, disabled: sending, __source: { fileName: "", lineNumber: 1763, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0099c6] text-white rounded-full px-5 py-2 font-bold text-base font-roboto hover:bg-[#0077b6] transition disabled:opacity-60", onClick: handleSend, disabled: sending || !input.trim(), name: "send-message", style: { minWidth: 80 }, __source: { fileName: "", lineNumber: 1775, columnNumber: 9 }, __self: this }, "Send"))); } function MainComponent() { const [searchType, setSearchType] = React.useState("hashtag"); const [searchQuery, setSearchQuery] = React.useState(""); const [searchResults, setSearchResults] = React.useState(null); const [searchLoading, setSearchLoading] = React.useState(false); const [searchError, setSearchError] = React.useState(null); const [menuOpen, setMenuOpen] = React.useState(null); const { data: user, loading: userLoading } = useUser(); const [exploreData, setExploreData] = React.useState(null); const [exploreLoading, setExploreLoading] = React.useState(true); const [exploreError, setExploreError] = React.useState(null); const [countryFlags, setCountryFlags] = React.useState([]); const [countryFlagsLoading, setCountryFlagsLoading] = React.useState(true); const [countryFlagsError, setCountryFlagsError] = React.useState(null); React.useEffect(()=>{ setCountryFlagsLoading(true); setCountryFlagsError(null); fetch("/api/listcountryflags", { method: "POST" }).then(async (res)=>{ if (!res.ok) throw new Error("Could not fetch country flags"); return res.json(); }).then((data)=>setCountryFlags(data.flags || [])).catch(()=>{ setCountryFlagsError("Could not load country flags"); setCountryFlags([]); }).finally(()=>setCountryFlagsLoading(false)); }, []); React.useEffect(()=>{ setExploreLoading(true); setExploreError(null); fetch("/api/explorefeed", { method: "POST" }).then(async (res)=>{ if (!res.ok) throw new Error("Could not fetch explore feed"); return res.json(); }).then((data)=>setExploreData(data)).catch(()=>{ setExploreError("Could not load explore feed"); setExploreData(null); }).finally(()=>setExploreLoading(false)); }, []); const [trendingHashtags, setTrendingHashtags] = React.useState([]); const [trendingLoading, setTrendingLoading] = React.useState(true); const [trendingError, setTrendingError] = React.useState(null); const [followedPosts, setFollowedPosts] = React.useState([]); const [followedTotal, setFollowedTotal] = React.useState(0); const [followedHasMore, setFollowedHasMore] = React.useState(true); const [followedLoadingMore, setFollowedLoadingMore] = React.useState(false); const [popularPosts, setPopularPosts] = React.useState([]); const [popularPage, setPopularPage] = React.useState(1); const [popularHasMore, setPopularHasMore] = React.useState(true); const [popularLoadingMore, setPopularLoadingMore] = React.useState(false); const [popularTotal, setPopularTotal] = React.useState(0); React.useEffect(()=>{ setFollowedLoadingMore(true); fetch("/api/listfollowedpostslazy", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ limit: 12, offset: 0 }) }).then(async (res)=>{ if (!res.ok) throw new Error("Could not fetch followed posts"); return res.json(); }).then((data)=>{ setFollowedPosts(data.posts || []); setFollowedTotal(data.total || 0); setFollowedHasMore((data.posts || []).length < (data.total || 0)); }).catch(()=>{ setFollowedPosts([]); setFollowedHasMore(false); setFollowedTotal(0); }).finally(()=>setFollowedLoadingMore(false)); }, [ user ]); React.useEffect(()=>{ async function fetchPopularPosts() { setPopularLoadingMore(true); try { const res = await fetch("/api/listpopularpostslazy", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ limit: 12, offset: 0 }) }); if (!res.ok) throw new Error("Could not fetch popular posts"); const data = await res.json(); setPopularPosts(data.posts || []); setPopularTotal(data.total || 0); setPopularHasMore((data.posts || []).length > 0 && (data.posts || []).length < data.total); } catch (e) { setPopularPosts([]); setPopularHasMore(false); setPopularTotal(0); } finally{ setPopularLoadingMore(false); } } fetchPopularPosts(); }, []); const [chatList, setChatList] = React.useState([]); const [chatLoading, setChatLoading] = React.useState(false); const [chatError, setChatError] = React.useState(null); React.useEffect(()=>{ if (userLoading || !user || !user.id) return; setChatLoading(true); setChatError(null); fetch("/api/listuserchats", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: user.id }) }).then(async (res)=>{ if (!res.ok) throw new Error("Could not fetch chat list"); return res.json(); }).then((data)=>{ setChatList(Array.isArray(data.conversations) ? data.conversations : []); }).catch(()=>{ setChatError("Could not load chat list"); setChatList([]); }).finally(()=>setChatLoading(false)); }, [ userLoading, user ]); const [selectedChat, setSelectedChat] = React.useState(null); const [messages, setMessages] = React.useState([]); const [messagesLoading, setMessagesLoading] = React.useState(false); const [messagesError, setMessagesError] = React.useState(null); const [newMessage, setNewMessage] = React.useState(""); const [sending, setSending] = React.useState(false); const [messagesPollInterval, setMessagesPollInterval] = React.useState(null); React.useEffect(()=>{ if (!selectedChat || !user || !user.id) return; setMessagesLoading(true); setMessagesError(null); let cancelled = false; let poller; async function fetchMessages() { try { const res = await fetch("/api/listchatmessages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sender_id: user.id, receiver_id: selectedChat.user_id }), cache: "no-store" }); if (!res.ok) throw new Error("Could not fetch messages"); const data = await res.json(); if (!cancelled) { setMessages(data.messages || []); } } catch (e) { if (!cancelled) { setMessagesError("Could not load messages"); setMessages([]); } } finally{ if (!cancelled) setMessagesLoading(false); } } fetchMessages(); poller = setInterval(fetchMessages, 1000); return ()=>{ cancelled = true; if (poller) clearInterval(poller); }; }, [ selectedChat && selectedChat.user_id, user && user.id ]); const [showNewChat, setShowNewChat] = React.useState(false); const [searchNewChat, setSearchNewChat] = React.useState(""); const [messageableFollowing, setMessageableFollowing] = React.useState([]); const [messageableLoading, setMessageableLoading] = React.useState(false); const [messageableError, setMessageableError] = React.useState(null); const [newChatLoading, setNewChatLoading] = React.useState(false); const [newChatError, setNewChatError] = React.useState(null); const [newChatUsers, setNewChatUsers] = React.useState([]); React.useEffect(()=>{ if (menuOpen !== "new-chat" || !user || !user.id) return; setNewChatLoading(true); setNewChatError(null); fetch("/api/listmessageablefollowing", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({}) }).then(async (res)=>{ if (!res.ok) throw new Error("Kon gebruikers niet laden"); return res.json(); }).then((data)=>{ if (data && Array.isArray(data.users)) { setNewChatUsers(data.users); } else { setNewChatUsers([]); } }).catch(()=>{ setNewChatError("Kon gebruikers niet laden"); setNewChatUsers([]); }).finally(()=>setNewChatLoading(false)); }, [ menuOpen, user ]); React.useEffect(()=>{ if (!showNewChat || !user || !user.id) return; setLoading(true); setError(null); fetch("/api/listmessageablefollowing", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({}) }).then(async (res)=>{ if (!res.ok) throw new Error("Kon lijst niet ophalen"); return res.json(); }).then((data)=>{ setFollowing((data.users || []).filter((u)=>u && u.id && u.name && u.username)); setLoading(false); }).catch((err)=>{ setError("Kon lijst niet ophalen"); setFollowing([]); setLoading(false); }); }, [ showNewChat, user ]); const [showUserCarousel, setShowUserCarousel] = React.useState(false); React.useEffect(()=>{ if (user && user.id) { setShowUserCarousel(true); } else { setShowUserCarousel(false); } }, [ user ]); React.useEffect(()=>{ if (typeof window === "undefined") return; const params = new URLSearchParams(window.location.search); const hash = params.get("searchQuery") || ""; const type = params.get("searchType") || ""; if (type === "hashtag" && hash) { setSearchType("hashtag"); setSearchQuery(hash.startsWith("#") ? hash : `#${hash}`); setTimeout(()=>handleSearch(), 100); } }, []); const handleSendMessage = async ()=>{ if (!newMessage.trim() || !selectedChat || !user || !user.id) return; setSending(true); try { const res = await fetch("/api/sendchatmessage", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sender_id: user.id, receiver_id: selectedChat.user_id, message: newMessage.trim() }) }); if (!res.ok) throw new Error("Could not send message"); setNewMessage(""); setMessagesLoading(true); setMessagesError(null); try { const res2 = await fetch("/api/listchatmessages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sender_id: user.id, receiver_id: selectedChat.user_id }), cache: "no-store" }); if (!res2.ok) throw new Error("Could not fetch messages"); const data = await res2.json(); setMessages(data.messages || []); } catch (e) { setMessagesError("Could not load messages"); setMessages([]); } finally{ setMessagesLoading(false); } } catch (e) { alert("Kon bericht niet verzenden"); } finally{ setSending(false); } }; const handleSearch = React.useCallback(async ()=>{ if (!searchQuery.trim()) { setSearchResults(null); setSearchError(null); return; } setSearchLoading(true); setSearchError(null); setSearchResults(null); try { let url = ""; let body = {}; if (searchType === "user") { url = "/api/listusers"; body = { search: searchQuery.trim().replace(/^@/, "") }; } else if (searchType === "hashtag" || searchType === "location") { url = "/api/listsearchresults"; body = { query: searchQuery.trim(), type: searchType }; } const res = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }); if (!res.ok) { throw new Error("Could not fetch search results."); } const data = await res.json(); setSearchResults(data); } catch (e) { setSearchError("No results found."); setSearchResults(null); } finally{ setSearchLoading(false); } }, [ searchType, searchQuery ]); React.useEffect(()=>{ setSearchResults(null); setSearchError(null); }, [ searchType ]); function handleInputKeyDown(e) { if (e.key === "Enter") { handleSearch(); } } function handleLoadMorePopular() { setPopularLoadingMore(true); fetch("/api/listpopularpostslazy", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ limit: 12, offset: popularPosts.length }) }).then(async (res)=>{ if (!res.ok) throw new Error("Could not fetch more popular posts"); return res.json(); }).then((data)=>{ const newPosts = data.posts || []; setPopularPosts((prev)=>[ ...prev, ...newPosts ]); setPopularTotal(data.total || 0); if (popularPosts.length + newPosts.length >= (data.total || 0)) { setPopularHasMore(false); } else { setPopularHasMore(true); } }).catch(()=>{ setPopularHasMore(false); }).finally(()=>setPopularLoadingMore(false)); } function handleLoadMoreFollowed() { setFollowedLoadingMore(true); fetch("/api/listfollowedpostslazy", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ limit: 12, offset: followedPosts.length }) }).then(async (res)=>{ if (!res.ok) throw new Error("Could not fetch more followed posts"); return res.json(); }).then((data)=>{ const newPosts = data.posts || []; setFollowedPosts((prev)=>[ ...prev, ...newPosts ]); setFollowedTotal(data.total || 0); if (followedPosts.length + newPosts.length >= (data.total || 0)) { setFollowedHasMore(false); } else { setFollowedHasMore(true); } }).catch(()=>{ setFollowedHasMore(false); }).finally(()=>setFollowedLoadingMore(false)); } React.useEffect(()=>{ if (typeof window === "undefined") return; // Google Analytics gtag.js loader if (!window.gtagScriptLoaded) { const script = document.createElement("script"); script.async = true; script.src = "https://www.googletagmanager.com/gtag/js?id=G-0N8W1GGD4J"; document.head.appendChild(script); window.gtagScriptLoaded = true; } if (!window.gtagInlineLoaded) { const inlineScript = document.createElement("script"); inlineScript.innerHTML = `window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-0N8W1GGD4J');`; document.head.appendChild(inlineScript); window.gtagInlineLoaded = true; } }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#fffbe9] font-roboto flex flex-col items-center py-8 px-2", __source: { fileName: "", lineNumber: 443, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full fixed top-0 left-0 z-50", __source: { fileName: "", lineNumber: 444, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(HeaderNoSeatchBar, { __source: { fileName: "", lineNumber: 445, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { style: { height: 85 }, __source: { fileName: "", lineNumber: 447, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-5xl font-bold text-[#0077b6] mb-2 mt-4 drop-shadow font-roboto mt-[90px] md:mt-4", __source: { fileName: "", lineNumber: 448, columnNumber: 7 }, __self: this }, "Explore"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] flex flex-col md:flex-row items-center gap-3 mt-6 mb-8", __source: { fileName: "", lineNumber: 451, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-row w-full gap-2", __source: { fileName: "", lineNumber: 452, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "rounded-lg border px-4 py-2 font-roboto bg-white text-[#0077b6] shadow w-[130px]", value: searchType, onChange: (e)=>setSearchType(e.target.value), name: "search-type", __source: { fileName: "", lineNumber: 453, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "hashtag", __source: { fileName: "", lineNumber: 459, columnNumber: 13 }, __self: this }, "#Hashtag"), /*#__PURE__*/ React.createElement("option", { value: "user", __source: { fileName: "", lineNumber: 460, columnNumber: 13 }, __self: this }, "@User"), /*#__PURE__*/ React.createElement("option", { value: "location", __source: { fileName: "", lineNumber: 461, columnNumber: 13 }, __self: this }, "Location")), /*#__PURE__*/ React.createElement("input", { type: "text", className: "border border-[#b2b2b2] rounded-lg px-4 py-2 w-full font-roboto text-base focus:outline-none focus:border-[#0077b6]", placeholder: searchType === "hashtag" ? "Search hashtags..." : searchType === "user" ? "Search users..." : "Search locations...", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), onKeyDown: handleInputKeyDown, name: "search", maxLength: 64, __source: { fileName: "", lineNumber: 463, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0099c6] text-white px-5 py-2 rounded-lg shadow font-bold text-base font-roboto hover:bg-[#0077b6] transition", onClick: handleSearch, disabled: searchLoading, name: "search-btn", style: { minWidth: 90 }, __source: { fileName: "", lineNumber: 479, columnNumber: 11 }, __self: this }, searchLoading ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 487, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "

Explore

Trending Hashtags (24h)

Most Popular Posts