function MainComponent() { const [isSignup, setIsSignup] = React.useState(false); const [loggedInUser, setLoggedInUser] = React.useState(null); const [postText, setPostText] = React.useState(""); const [image, setImage] = React.useState(null); const [tweets, setTweets] = React.useState([]); const [showMenu, setShowMenu] = React.useState({}); React.useEffect(()=>{ fetchPosts(); }, []); const fetchPosts = async ()=>{ const response = await fetch('/api/db/h-post', { method: 'POST', body: JSON.stringify({ query: 'SELECT `id`, `username`, `text`, `image` FROM `posts`', values: [] }) }); const data = await response.json(); setTweets(data); }; const handleSignup = async (e)=>{ e.preventDefault(); const email = e.target.email.value; const username = e.target.username.value; const password = e.target.password.value; const response = await fetch('/api/db/h-login', { method: 'POST', body: JSON.stringify({ query: "SELECT `id` FROM `users` WHERE `email` = ? OR `username` = ?", values: [ email, username ] }) }); const existingUser = await response.json(); if (existingUser.length > 0) { alert("同じメールアドレスまたはユーザー名が既に登録されています。"); return; } await fetch('/api/db/h-login', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `users` (`email`, `username`, `password`) VALUES (?, ?, ?)", values: [ email, username, password ] }) }); setLoggedInUser(username); }; const handleSignin = async (e)=>{ e.preventDefault(); const email = e.target.emailLogin.value; const password = e.target.passwordLogin.value; const response = await fetch('/api/db/h-login', { method: 'POST', body: JSON.stringify({ query: "SELECT `username` FROM `users` WHERE `email` = ? AND `password` = ?", values: [ email, password ] }) }); const user = await response.json(); if (user.length === 0) { alert("ユーザー情報が見つかりません。"); return; } setLoggedInUser(user[0].username); }; const handlePost = async ()=>{ if (image) { await fetch('/api/db/h-post', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `posts` (`username`, `image`) VALUES (?, ?)", values: [ loggedInUser, image ] }) }); } else { await fetch('/api/db/h-post', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `posts` (`username`, `text`) VALUES (?, ?)", values: [ loggedInUser, postText ] }) }); } setPostText(""); setImage(null); fetchPosts(); }; const handleImageChange = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setImage(reader.result); alert("画像を投稿するには、このまま【投稿】を押してください"); }; reader.readAsDataURL(file); }; const handleDelete = async (id)=>{ await fetch('/api/db/h-post', { method: 'POST', body: JSON.stringify({ query: "DELETE FROM `posts` WHERE `id` = ?", values: [ id ] }) }); fetchPosts(); }; const handleBan = async (username)=>{ await fetch('/api/db/h-login', { method: 'POST', body: JSON.stringify({ query: "DELETE FROM `users` WHERE `username` = ?", values: [ username ] }) }); fetchPosts(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center bg-gray-100", __source: { fileName: "", lineNumber: 130, columnNumber: 5 }, __self: this }, !loggedInUser && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] mt-10", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: isSignup ? handleSignup : handleSignin, __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "初回ログイン"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>setIsSignup(false), __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, "サインイン"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>setIsSignup(true), __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, "サインアップ")), isSignup ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "email", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", required: true, className: "border border-white w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:bg-white", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", required: true, className: "border border-white w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:bg-white", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", required: true, className: "border border-white w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:bg-white", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "emailLogin", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { name: "emailLogin", type: "email", required: true, className: "border border-white w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:bg-white", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "passwordLogin", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { name: "passwordLogin", type: "password", required: true, className: "border border-white w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:bg-white", __source: { fileName: "", lineNumber: 153, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 w-full", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, "ログイン"))), loggedInUser && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mt-10", __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-4 py-4 mb-4", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "postText", className: "border border-white w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:bg-white", placeholder: "投稿テキストを入力", value: postText, onChange: (e)=>setPostText(e.target.value), disabled: !!image, __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { id: "imageUpload", type: "file", accept: "image/*", className: "hidden", onChange: handleImageChange, disabled: !!postText, __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "imageUpload", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full ml-4 cursor-pointer", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, "＋")), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 w-full", onClick: handlePost, disabled: !postText && !image || postText && image, __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, "投稿")), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, tweets.map((tweet)=>/*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "bg-white shadow-md rounded px-4 py-4 mb-4", __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 193, columnNumber: 19 }, __self: this }, tweet.username), loggedInUser === 'kabo' && /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 195, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowMenu({ ...showMenu, [tweet.id]: !showMenu[tweet.id] }), __source: { fileName: "", lineNumber: 196, columnNumber: 23 }, __self: this }, "…"), showMenu[tweet.id] && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-[120px] bg-[#23272A] rounded-md shadow-lg py-2", __source: { fileName: "", lineNumber: 198, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "block px-4 py-2 text-white", onClick: ()=>handleDelete(tweet.id), __source: { fileName: "", lineNumber: 199, columnNumber: 27 }, __self: this }, "削除"), /*#__PURE__*/ React.createElement("button", { className: "block px-4 py-2 text-white", onClick: ()=>handleBan(tweet.username), __source: { fileName: "", lineNumber: 200, columnNumber: 27 }, __self: this }, "BAN")))), tweet.text ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this }, tweet.text) : /*#__PURE__*/ React.createElement("img", { src: tweet.image, className: "max-w-full h-auto max-h-[500px]", alt: "投稿プレビュー", __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this })))))); }