function MainComponent() { const [postContent, setPostContent] = React.useState(""); const [currentUser, setCurrentUser] = React.useState(""); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [posts, setPosts] = React.useState([]); const generateRandomName = ()=>{ const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; let result = ""; for(let i = 0; i < 16; i++){ result += characters.charAt(Math.floor(Math.random() * characters.length)); } return result; }; const handleInputChange = (setter)=>(e)=>setter(e.target.value); React.useEffect(()=>{ fetch("/api/db/minnnanohanasiai", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `posts` ORDER BY `created_at` DESC" }) }).then((response)=>response.json()).then((data)=>setPosts(data.map((post)=>({ ...post, comments: [] })))); if (!isLoggedIn) { setCurrentUser(generateRandomName()); } }, [ isLoggedIn ]); const handleSubmit = (e)=>{ e.preventDefault(); if (postContent) { fetch("/api/db/minnnanohanasiai", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `posts` (user, content, created_at) VALUES (?, ?, ?)", values: [ currentUser, postContent.replace(/(NGワード1|NGワード2)/g, "***"), new Date().toISOString() ] }) }).then(()=>{ setPostContent(""); fetch("/api/db/minnnanohanasiai", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `posts` ORDER BY `created_at` DESC" }) }).then((response)=>response.json()).then((data)=>setPosts(data.map((post)=>({ ...post, comments: [] })))); }); } }; const handleCommentSubmit = (postId, comment)=>{ if (comment && isLoggedIn) { fetch("/api/db/minnnanohanasiaicomment", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `comments` (post_id, user, text) VALUES (?, ?, ?)", values: [ postId, currentUser, comment.replace(/(NGワード1|NGワード2)/g, "***") ] }) }).then(()=>{ fetch("/api/db/minnnanohanasiaicomment", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `comments` WHERE `post_id` = ?", values: [ postId ] }) }).then((response)=>response.json()).then((data)=>{ setPosts(posts.map((post)=>post.id === postId ? { ...post, comments: data } : post)); }); }); } }; const handleDelete = (postId)=>{ fetch("/api/db/minnnanohanasiai", { method: "POST", body: JSON.stringify({ query: "DELETE FROM `posts` WHERE `id` = ? AND `user` = ?", values: [ postId, currentUser ] }) }).then(()=>{ setPosts(posts.filter((post)=>post.id !== postId)); }); }; const handleCommentDelete = (commentId, postId)=>{ fetch("/api/db/minnnanohanasiaicomment", { method: "POST", body: JSON.stringify({ query: "DELETE FROM `comments` WHERE `id` = ? AND `user` = ?", values: [ commentId, currentUser ] }) }).then(()=>{ setPosts(posts.map((post)=>post.id === postId ? { ...post, comments: post.comments.filter((comment)=>comment.id !== commentId) } : post)); }); }; const handleLogin = (e)=>{ e.preventDefault(); setIsLoggedIn(true); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 139, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-sans mb-4", __source: { fileName: "", lineNumber: 140, columnNumber: 7 }, __self: this }, "みんなの話し合い掲示板"), !isLoggedIn ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "mb-4", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "userName", type: "text", value: currentUser, onChange: handleInputChange(setCurrentUser), placeholder: "名前を編集", className: "w-full p-2 border rounded border-gray-300 mb-2", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, "ログイン")) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "postContent", value: postContent, onChange: handleInputChange(setPostContent), className: "w-full p-2 border rounded border-gray-300 mb-2", placeholder: "議題を投稿する", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, "投稿する")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 171, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-sans", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, "議題一覧")), posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "border p-4 mb-4 rounded", id: post.id, __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-sans text-lg", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("p", { className: "font-sans text-sm text-gray-500", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, "投稿者: ", post.user), /*#__PURE__*/ React.createElement("p", { className: "font-sans text-sm text-gray-500", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, "投稿日時: ", new Date(post.created_at).toLocaleString()), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-2", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, post.user === currentUser && /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(post.id), className: "text-red-500", __source: { fileName: "", lineNumber: 184, columnNumber: 17 }, __self: this }, "削除"))), post.comments && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, post.comments.map((comment)=>/*#__PURE__*/ React.createElement("div", { key: comment.id, className: "ml-4 text-sm text-gray-700 flex justify-between", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-sans", __source: { fileName: "", lineNumber: 200, columnNumber: 19 }, __self: this }, comment.user, ": ", comment.text), comment.user === currentUser && /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleCommentDelete(comment.id, post.id), className: "text-red-500 ml-2", __source: { fileName: "", lineNumber: 204, columnNumber: 21 }, __self: this }, "削除"))), isLoggedIn && /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); const comment = e.target.elements[`comment-${post.id}`].value; handleCommentSubmit(post.id, comment); e.target.reset(); }, className: "ml-4 mt-2", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: `comment-${post.id}`, type: "text", placeholder: "コメントを追加", className: "w-full p-2 border rounded border-gray-300 mb-2", __source: { fileName: "", lineNumber: 224, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-1 p-1 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 230, columnNumber: 19 }, __self: this }, "送信")))))); }