function MainComponent() { const [content, setContent] = useState(""); const [memos, setMemos] = useState([]); const [error, setError] = useState(null); const [search, setSearch] = useState(""); const [editingMemo, setEditingMemo] = useState(null); const [successMessage, setSuccessMessage] = useState(null); const fetchMemos = async ()=>{ try { const response = await fetch("/api/get-memos", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ search: search.trim() }) }); if (!response.ok) { throw new Error("メモの取得に失敗しました"); } const data = await response.json(); setMemos(data.memos); } catch (err) { console.error(err); setError("メモの取得中にエラーが発生しました"); } }; useEffect(()=>{ const timer = setTimeout(()=>{ fetchMemos(); }, 300); return ()=>clearTimeout(timer); }, [ search ]); useEffect(()=>{ if (!search.trim()) return; const handleClickOutside = ()=>{ setSearch(""); }; document.addEventListener("click", handleClickOutside); return ()=>{ document.removeEventListener("click", handleClickOutside); }; }, [ search ]); const handleSubmit = async (e)=>{ e?.preventDefault(); if (!content.trim()) return; try { if (editingMemo) { const response = await fetch("/api/update-memo", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: editingMemo.id, content }) }); if (!response.ok) { throw new Error("メモの更新に失敗しました"); } setEditingMemo(null); } else { const response = await fetch("/api/create-memo", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content }) }); if (!response.ok) { throw new Error("メモの保存に失敗しました"); } } setContent(""); fetchMemos(); } catch (err) { console.error(err); setError("メモの保存中にエラーが発生しました"); } }; const handleKeyDown = (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSubmit(); } }; const handleDelete = async (id)=>{ try { const response = await fetch("/api/delete-memo", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id }) }); if (!response.ok) { throw new Error("メモの削除に失敗しました"); } setSuccessMessage("メモを削除しました"); setTimeout(()=>{ setSuccessMessage(null); }, 3000); fetchMemos(); } catch (err) { console.error(err); setError("メモの削除中にエラーが発生しました"); } }; const handleEdit = (memo)=>{ setEditingMemo(memo); setContent(memo.content); }; const handleCancelEdit = ()=>{ setEditingMemo(null); setContent(""); }; const formatDate = (dateString)=>{ const date = new Date(dateString); return new Intl.DateTimeFormat("ja-JP", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }).format(date); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto p-4", __source: { fileName: "", lineNumber: 138, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, "Memo"), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, error), successMessage && /*#__PURE__*/ React.createElement("div", { className: "bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, successMessage), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: content, onChange: (e)=>setContent(e.target.value), onKeyDown: handleKeyDown, className: "w-full p-2 border rounded-lg mb-2 bg-gray-50", rows: "3", placeholder: "メモを入力してください", __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", disabled: !content.trim(), __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, editingMemo ? "更新" : "保存"), editingMemo && /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleCancelEdit, className: "bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "キャンセル"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 mb-8", __source: { fileName: "", lineNumber: 182, columnNumber: 7 }, __self: this }, memos.map((memo)=>/*#__PURE__*/ React.createElement("div", { key: memo.id, className: "border rounded-lg p-4", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-wrap mb-3", __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }, memo.content), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, formatDate(memo.created_at)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEdit(memo), className: "bg-green-100 text-green-700 px-3 py-1 rounded hover:bg-green-200 transition-colors", __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }, "編集"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(memo.id), className: "bg-red-100 text-red-700 px-3 py-1 rounded hover:bg-red-200 transition-colors", __source: { fileName: "", lineNumber: 198, columnNumber: 19 }, __self: this }, "削除"))))))), /*#__PURE__*/ React.createElement("div", { className: "sticky bottom-4 bg-white p-4 border rounded-lg shadow-lg", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 211, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: search, onChange: (e)=>setSearch(e.target.value), placeholder: "メモを検索...", className: "w-full p-2 border rounded-lg", __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }))); }