function MainComponent() { const [questions, setQuestions] = React.useState([]); const [answers, setAnswers] = React.useState([]); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [activeQuestionId, setActiveQuestionId] = React.useState(null); const [searchTerm, setSearchTerm] = React.useState(''); const [title, setTitle] = React.useState(''); const [body, setBody] = React.useState(''); const [answer, setAnswer] = React.useState(''); React.useEffect(()=>{ fetch('/api/db/testdata', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `questions` ORDER BY id DESC' }) }).then((response)=>response.json()).then((data)=>setQuestions(data)); }, []); const handleLoginChange = (event)=>{ if (event.target.name === 'email') { setEmail(event.target.value); } else if (event.target.name === 'password') { setPassword(event.target.value); } }; const handleLoginSubmit = (event)=>{ event.preventDefault(); setIsLoggedIn(true); }; const handleTitleChange = (event)=>setTitle(event.target.value); const handleBodyChange = (event)=>setBody(event.target.value); const handleAnswerChange = (event)=>setAnswer(event.target.value); const handleSearchTermChange = (event)=>setSearchTerm(event.target.value); const handleSubmitQuestion = (event)=>{ event.preventDefault(); if (!isLoggedIn) { alert("Please log in to submit a question."); return; } fetch('/api/db/testdata', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `questions` (title, body) VALUES (?, ?)", values: [ title, body.replace(/'/g, "\\'") ] }) }).then(()=>{ setQuestions([ { title, body, id: questions.length + 1 }, ...questions ]); setTitle(''); setBody(''); }); }; const handleSubmitAnswer = (event, questionId)=>{ event.preventDefault(); if (!isLoggedIn) { alert("Please log in to submit an answer."); return; } fetch('/api/db/testdata', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `answers` (question_id, body) VALUES (?, ?)", values: [ questionId, answer.replace(/'/g, "\\'") ] }) }).then(()=>{ setAnswers([ ...answers, { questionId, body: answer } ]); setAnswer(''); }); }; const filteredQuestions = questions.filter((question)=>question.title.toLowerCase().includes(searchTerm.toLowerCase()) || question.body.toLowerCase().includes(searchTerm.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-red-500 py-4", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-sans text-center text-white text-3xl", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "質問掲示板")), /*#__PURE__*/ React.createElement("main", { className: "py-8 px-4", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "mb-6", onSubmit: handleLoginSubmit, __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Email", className: "p-2 rounded border border-gray-300 w-full mb-2", onChange: handleLoginChange, value: email, __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", className: "p-2 rounded border border-gray-300 w-full mb-2", onChange: handleLoginChange, value: password, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white font-bold py-2 rounded hover:bg-blue-600 transition w-full", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "ログイン")), /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "質問を検索", className: "mb-6 p-2 rounded border border-gray-300 w-full", value: searchTerm, onChange: handleSearchTermChange, __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4 mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "questionTitle", placeholder: "質問のタイトル", className: "p-2 rounded border border-gray-300", value: title, onChange: handleTitleChange, disabled: !isLoggedIn, __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "questionBody", placeholder: "質問の詳細", rows: "4", className: "p-2 rounded border border-gray-300", value: body, onChange: handleBodyChange, disabled: !isLoggedIn, __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-red-500 text-white font-bold py-2 rounded hover:bg-red-600 transition", onClick: handleSubmitQuestion, disabled: !isLoggedIn, __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "質問を投稿"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-sans text-2xl text-gray-800 mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "質問リスト"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, filteredQuestions.map((question, index)=>/*#__PURE__*/ React.createElement("article", { key: index, className: "bg-white shadow-md rounded p-4", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg text-gray-800", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, question.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, question.body), /*#__PURE__*/ React.createElement("a", { href: `/questions/${question.id}`, className: "text-blue-500 hover:text-blue-600 transition", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, "read more"), /*#__PURE__*/ React.createElement("form", { onSubmit: (event)=>handleSubmitAnswer(event, question.id), __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "answerBody", placeholder: "回答を書く", rows: "2", className: "mt-4 p-2 rounded border border-gray-300 w-full", onChange: handleAnswerChange, disabled: !isLoggedIn, __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 text-white font-bold py-2 rounded hover:bg-green-600 transition mt-2", disabled: !isLoggedIn, __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this }, "回答する")))))))); }