function MainComponent() { const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const [isLoading, setIsLoading] = useState(true); const [isSubmitting, setIsSubmitting] = useState(false); const [error, setError] = useState(null); const [loadingError, setLoadingError] = useState(null); const { data: user } = useUser(); const [validationError, setValidationError] = useState(""); const [sessionUrl, setSessionUrl] = useState(""); const [showUrlInput, setShowUrlInput] = useState(false); const [replyingTo, setReplyingTo] = useState(null); const [replyContent, setReplyContent] = useState(""); const [likes, setLikes] = useState({}); const [replies, setReplies] = useState({}); const [isSubmittingReply, setIsSubmittingReply] = useState(false); const [isSubmittingLike, setIsSubmittingLike] = useState(false); const [lastUpdate, setLastUpdate] = useState(Date.now()); const loadMessages = useCallback(async ()=>{ try { const lastMessageTimestamp = messages[0]?.timestamp; const query = lastMessageTimestamp ? "SELECT * FROM `messages` WHERE `timestamp` > ? ORDER BY `timestamp` DESC" : "SELECT * FROM `messages` ORDER BY `timestamp` DESC LIMIT 50"; const values = lastMessageTimestamp ? [ lastMessageTimestamp ] : []; const likesQuery = "SELECT * FROM `likes`"; const [messagesResponse, likesResponse, repliesResponse] = await Promise.all([ fetch("/api/db/messages-31", { method: "POST", body: JSON.stringify({ query, values }) }), fetch("/api/db/messages-31", { method: "POST", body: JSON.stringify({ query: likesQuery }) }), fetch("/api/db/messages-31", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `replies` WHERE `timestamp` > ? ORDER BY `timestamp` ASC", values: [ lastMessageTimestamp || new Date(0).toISOString() ] }) }) ]); if (!messagesResponse.ok || !likesResponse.ok || !repliesResponse.ok) { throw new Error("Failed to fetch data"); } const [newMessages, newLikes, newReplies] = await Promise.all([ messagesResponse.json(), likesResponse.json(), repliesResponse.json() ]); if (newMessages.length > 0) { setMessages((prev)=>{ const messageMap = new Map(prev.map((msg)=>[ msg.id, msg ])); newMessages.forEach((msg)=>messageMap.set(msg.id, msg)); return Array.from(messageMap.values()).sort((a, b)=>new Date(b.timestamp) - new Date(a.timestamp)); }); } const likesByMessage = {}; newLikes.forEach((like)=>{ if (!likesByMessage[like.message_id]) { likesByMessage[like.message_id] = []; } likesByMessage[like.message_id].push(like); }); setLikes(likesByMessage); setReplies((prev)=>{ const updatedReplies = { ...prev }; newReplies.forEach((reply)=>{ if (!updatedReplies[reply.parent_id]) { updatedReplies[reply.parent_id] = []; } if (!updatedReplies[reply.parent_id].some((r)=>r.id === reply.id)) { updatedReplies[reply.parent_id].push(reply); } }); return updatedReplies; }); setIsLoading(false); setLoadingError(null); } catch (error) { console.error("Error loading messages:", error); setLoadingError("Failed to load messages. Please try again later."); setIsLoading(false); } }, [ messages ]); useEffect(()=>{ loadMessages(); const interval = setInterval(()=>{ setLastUpdate(Date.now()); }, 10000); return ()=>clearInterval(interval); }, [ loadMessages ]); useEffect(()=>{ loadMessages(); }, [ lastUpdate, loadMessages ]); const handleSubmit = async (e)=>{ e.preventDefault(); if (!user) { setError("You must be signed in to post a message."); return; } if (!newMessage.trim()) { setValidationError("Message cannot be empty"); return; } if (newMessage.length > 500) { setValidationError("Message is too long (maximum 500 characters)"); return; } setIsSubmitting(true); setError(null); setValidationError(""); try { const timestamp = new Date().toISOString(); const response = await fetch("/api/db/messages-31", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `messages` (content, timestamp, user_id, username) VALUES (?, ?, ?, ?)", values: [ newMessage.trim(), timestamp, user.id, user.name ] }) }); if (!response.ok) { throw new Error("Failed to post message"); } const newMessageObj = { content: newMessage.trim(), timestamp, user_id: user.id, username: user.name }; setMessages((prev)=>[ newMessageObj, ...prev ]); setNewMessage(""); setValidationError(""); setLastUpdate(Date.now()); } catch (error) { setError("Failed to post message. Please try again."); } finally{ setIsSubmitting(false); } }; const handleLike = async (messageId)=>{ if (!user) return; const messageCurrentLikes = likes[messageId] || []; const hasLiked = messageCurrentLikes.some((like)=>like.user_id === user.id); if (hasLiked) return; setIsSubmittingLike(true); try { const timestamp = new Date().toISOString(); const response = await fetch("/api/db/messages-31", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `likes` (message_id, user_id, timestamp) VALUES (?, ?, ?)", values: [ messageId, user.id, timestamp ] }) }); if (response.ok) { const newLike = { id: Date.now().toString(), message_id: messageId, user_id: user.id, timestamp }; setLikes((prev)=>({ ...prev, [messageId]: [ ...prev[messageId] || [], newLike ] })); } } catch (error) { console.error("Error liking message:", error); } finally{ setIsSubmittingLike(false); } }; const handleReply = async (e)=>{ e.preventDefault(); if (!user || !replyingTo || !replyContent.trim()) return; setIsSubmittingReply(true); try { const timestamp = new Date().toISOString(); const response = await fetch("/api/db/messages-31", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `replies` (parent_id, content, user_id, username, timestamp) VALUES (?, ?, ?, ?, ?)", values: [ replyingTo, replyContent.trim(), user.id, user.name, timestamp ] }) }); if (response.ok) { const newReply = { parent_id: replyingTo, content: replyContent.trim(), user_id: user.id, username: user.name, timestamp }; setReplies((prev)=>({ ...prev, [replyingTo]: [ ...prev[replyingTo] || [], newReply ] })); setReplyContent(""); setReplyingTo(null); setLastUpdate(Date.now()); } } catch (error) { console.error("Error posting reply:", error); } finally{ setIsSubmittingReply(false); } }; const formatDateTime = (timestamp)=>{ const date = new Date(timestamp); return date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true, month: "long", day: "numeric", year: "numeric" }); }; const formatDate = (timestamp)=>{ const date = new Date(timestamp); return date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" }); }; const groupedMessages = messages.reduce((groups, message)=>{ const date = formatDate(message.timestamp); if (!groups[date]) { groups[date] = []; } groups[date].push(message); return groups; }, {}); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "data:image/svg+xml,", __source: { fileName: "", lineNumber: 290, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] p-4 flex flex-col", __source: { fileName: "", lineNumber: 294, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto flex-grow", __source: { fileName: "", lineNumber: 295, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-center mb-6 space-y-4 md:space-y-0", __source: { fileName: "", lineNumber: 296, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-flex items-center bg-[#9c27b0] text-white px-6 py-2 rounded-lg hover:bg-[#7b1fa2] transition-colors", __source: { fileName: "", lineNumber: 297, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 301, columnNumber: 15 }, __self: this }), "Back to Home"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-2 w-full md:w-auto", __source: { fileName: "", lineNumber: 304, columnNumber: 13 }, __self: this }, showUrlInput ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-2 w-full md:w-auto", __source: { fileName: "", lineNumber: 306, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "url", value: sessionUrl, onChange: (e)=>setSessionUrl(e.target.value), placeholder: "Enter session URL", className: "w-full md:w-auto px-4 py-2 border rounded-lg focus:border-[#9c27b0] focus:ring-2 focus:ring-[#9c27b0] outline-none", __source: { fileName: "", lineNumber: 307, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: sessionUrl, target: "_blank", rel: "noopener noreferrer", className: "w-full md:w-auto inline-flex items-center justify-center bg-[#7b1fa2] text-white px-6 py-2 rounded-lg hover:bg-[#6a1b9a] transition-colors", __source: { fileName: "", lineNumber: 314, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video mr-2", __source: { fileName: "", lineNumber: 320, columnNumber: 21 }, __self: this }), "Join")) : /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowUrlInput(true), className: "w-full md:w-auto inline-flex items-center justify-center bg-[#7b1fa2] text-white px-6 py-2 rounded-lg hover:bg-[#6a1b9a] transition-colors", __source: { fileName: "", lineNumber: 325, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video mr-2", __source: { fileName: "", lineNumber: 329, columnNumber: 19 }, __self: this }), "Join Live Session"), /*#__PURE__*/ React.createElement("a", { href: "https://fivestarbibledreams.created.app", target: "_blank", rel: "noopener noreferrer", className: "w-full md:w-auto inline-flex items-center justify-center bg-[#7b1fa2] text-white px-6 py-2 rounded-lg hover:bg-[#6a1b9a] transition-colors", __source: { fileName: "", lineNumber: 333, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-moon mr-2", __source: { fileName: "", lineNumber: 339, columnNumber: 17 }, __self: this }), "Dream Interpreter"), /*#__PURE__*/ React.createElement("a", { href: "https://play.google.com/store/apps/details?id=com.hccp.biblegatewayaudio", target: "_blank", rel: "noopener noreferrer", className: "w-full md:w-auto inline-flex items-center justify-center bg-[#7b1fa2] text-white px-6 py-2 rounded-lg hover:bg-[#6a1b9a] transition-colors", __source: { fileName: "", lineNumber: 342, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book-bible mr-2", __source: { fileName: "", lineNumber: 348, columnNumber: 17 }, __self: this }), "Audio Bible"))), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-[#2c3e50] mb-4", __source: { fileName: "", lineNumber: 353, columnNumber: 11 }, __self: this }, "goDDess Rants Forum"), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] mb-8 font-crimson-text", __source: { fileName: "", lineNumber: 356, columnNumber: 11 }, __self: this }, "Welcome to the goDDess Rants podcast forum! Join our community in discussing faith, divine downloads and spiritual growth. Share your thoughts on our latest episodes and connect with fellow listeners."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-8", __source: { fileName: "", lineNumber: 361, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "mailto:admin@fivestarsappsolutions.com?subject=Live%20Show%20Invitation%20Request&body=I%20would%20like%20to%20request%20an%20invitation%20to%20join%20the%20live%20podcast%20shows.", className: "inline-flex items-center bg-[#6a1b9a] text-white px-6 py-3 rounded-lg hover:bg-[#4a148c] transition-colors shadow-md", __source: { fileName: "", lineNumber: 362, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope mr-2", __source: { fileName: "", lineNumber: 366, columnNumber: 15 }, __self: this }), "Request Live Show Invitation")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8 bg-white rounded-lg p-6 shadow-md", __source: { fileName: "", lineNumber: 370, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "message", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), className: "w-full p-4 border rounded-lg mb-4 min-h-[120px] focus:border-[#9c27b0] focus:ring-2 focus:ring-[#9c27b0] outline-none resize-none font-crimson-text", placeholder: "Share your thoughts about the latest episode...", maxLength: 500, disabled: isSubmitting, __source: { fileName: "", lineNumber: 374, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 383, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 384, columnNumber: 15 }, __self: this }, newMessage.length, "/500 characters"), !user ? /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-sm text-[#9c27b0] hover:text-[#7b1fa2] transition-colors", __source: { fileName: "", lineNumber: 388, columnNumber: 17 }, __self: this }, "Sign in to post a message") : validationError ? /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#dc3545]", __source: { fileName: "", lineNumber: 395, columnNumber: 17 }, __self: this }, validationError) : error ? /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#dc3545]", __source: { fileName: "", lineNumber: 399, columnNumber: 17 }, __self: this }, error) : null), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmitting || !newMessage.trim() || !user, className: "w-full bg-[#9c27b0] text-white px-6 py-3 rounded-lg hover:bg-[#7b1fa2] active:bg-[#6a1b9a] transition-colors disabled:opacity-50 disabled:cursor-not-allowed enabled:hover:shadow-md font-crimson-text text-lg", __source: { fileName: "", lineNumber: 402, columnNumber: 13 }, __self: this }, isSubmitting ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 408, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 409, columnNumber: 19 }, __self: this }), "Posting...") : /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 413, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-2", __source: { fileName: "", lineNumber: 414, columnNumber: 19 }, __self: this }), "Post Message"))), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 422, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl text-[#9c27b0]", __source: { fileName: "", lineNumber: 423, columnNumber: 15 }, __self: this })) : loadingError ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 426, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#dc3545] mb-4", __source: { fileName: "", lineNumber: 427, columnNumber: 15 }, __self: this }, loadingError), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setIsLoading(true); loadMessages(); }, className: "bg-[#9c27b0] text-white px-4 py-2 rounded-lg hover:bg-[#7b1fa2] transition-colors", __source: { fileName: "", lineNumber: 428, columnNumber: 15 }, __self: this }, "Try Again")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 439, columnNumber: 13 }, __self: this }, Object.entries(groupedMessages).map(([date, dateMessages])=>/*#__PURE__*/ React.createElement("div", { key: date, __source: { fileName: "", lineNumber: 441, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-crimson-text text-[#9c27b0] mb-4 border-b border-[#9c27b0] pb-2", __source: { fileName: "", lineNumber: 442, columnNumber: 19 }, __self: this }, date), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 445, columnNumber: 19 }, __self: this }, dateMessages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: "bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow border-l-4 border-[#9c27b0]", __source: { fileName: "", lineNumber: 447, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 451, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 452, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-[#9c27b0] mr-2", __source: { fileName: "", lineNumber: 453, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-[#9c27b0]", __source: { fileName: "", lineNumber: 454, columnNumber: 29 }, __self: this }, message.username)), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#666] italic", __source: { fileName: "", lineNumber: 458, columnNumber: 27 }, __self: this }, formatDateTime(message.timestamp))), /*#__PURE__*/ React.createElement("p", { className: "text-[#2c3e50] font-crimson-text mb-4", __source: { fileName: "", lineNumber: 462, columnNumber: 25 }, __self: this }, message.content), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 mt-2 mb-4", __source: { fileName: "", lineNumber: 466, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLike(message.id), disabled: !user || isSubmittingLike, className: "flex items-center gap-2 text-[#9c27b0] hover:text-[#7b1fa2] transition-colors", __source: { fileName: "", lineNumber: 467, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart", __source: { fileName: "", lineNumber: 472, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 473, columnNumber: 29 }, __self: this }, likes[message.id]?.length || 0, " likes")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setReplyingTo(message.id), disabled: !user, className: "flex items-center gap-2 text-[#9c27b0] hover:text-[#7b1fa2] transition-colors", __source: { fileName: "", lineNumber: 476, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-reply", __source: { fileName: "", lineNumber: 481, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 482, columnNumber: 29 }, __self: this }, replies[message.id]?.length || 0, " replies"))), replies[message.id]?.map((reply)=>/*#__PURE__*/ React.createElement("div", { key: reply.id, className: "ml-8 mb-2 p-3 bg-[#f3e5f5] rounded-lg", __source: { fileName: "", lineNumber: 489, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-1", __source: { fileName: "", lineNumber: 493, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 494, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-[#9c27b0] mr-2", __source: { fileName: "", lineNumber: 495, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-[#9c27b0]", __source: { fileName: "", lineNumber: 496, columnNumber: 33 }, __self: this }, reply.username)), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#666] italic", __source: { fileName: "", lineNumber: 500, columnNumber: 31 }, __self: this }, formatDateTime(reply.timestamp))), /*#__PURE__*/ React.createElement("p", { className: "text-[#2c3e50] font-crimson-text", __source: { fileName: "", lineNumber: 504, columnNumber: 29 }, __self: this }, reply.content))), replyingTo === message.id && /*#__PURE__*/ React.createElement("form", { onSubmit: handleReply, className: "ml-8 mt-4", __source: { fileName: "", lineNumber: 511, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: replyContent, onChange: (e)=>setReplyContent(e.target.value), placeholder: "Write a reply...", className: "w-full p-3 border rounded-lg mb-2 focus:border-[#9c27b0] focus:ring-2 focus:ring-[#9c27b0] outline-none resize-none font-crimson-text", maxLength: 200, __source: { fileName: "", lineNumber: 512, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-2", __source: { fileName: "", lineNumber: 519, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>{ setReplyingTo(null); setReplyContent(""); }, className: "px-4 py-2 text-[#666] hover:text-[#333] transition-colors", __source: { fileName: "", lineNumber: 520, columnNumber: 31 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmittingReply || !replyContent.trim(), className: "bg-[#9c27b0] text-white px-4 py-2 rounded-lg hover:bg-[#7b1fa2] transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 530, columnNumber: 31 }, __self: this }, isSubmittingReply ? "Posting..." : "Post Reply")))))))))), /*#__PURE__*/ React.createElement("footer", { className: "text-center py-4 text-[#666] font-crimson-text mt-8", __source: { fileName: "", lineNumber: 552, columnNumber: 9 }, __self: this }, "Powered by Five Stars App Solutions Tulsa"))); }