function MainComponent() { const [originalUrl, setOriginalUrl] = React.useState(""); const [shortUrl, setShortUrl] = React.useState(""); const [error, setError] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [urlHistory, setUrlHistory] = React.useState([]); React.useEffect(()=>{ const path = window.location.pathname.substring(1); if (path) { redirectToOriginalUrl(path); } loadUrlHistory(); }, []); const loadUrlHistory = async ()=>{ try { const response = await fetch("/api/db/shorturl", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT original_url, short_code, created_at FROM `urls` ORDER BY created_at DESC LIMIT 10", values: [] }) }); const data = await response.json(); if (data && data.length > 0) { setUrlHistory(data); } } catch (err) { console.error("履歴取得エラー:", err); } }; const redirectToOriginalUrl = async (code)=>{ try { const response = await fetch("/api/db/shorturl", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT original_url FROM `urls` WHERE short_code = ? LIMIT 1", values: [ code ] }) }); const data = await response.json(); if (data && data.length > 0) { window.location.replace(data[0].original_url); } } catch (err) { console.error("リダイレクトエラー:", err); } }; const handleDelete = async (shortCode)=>{ try { await fetch("/api/db/shorturl", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "DELETE FROM `urls` WHERE short_code = ?", values: [ shortCode ] }) }); loadUrlHistory(); } catch (err) { console.error("削除エラー:", err); } }; const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); setError(""); setShortUrl(""); try { let url = originalUrl; if (!url.startsWith("http://") && !url.startsWith("https://")) { url = "https://" + url; } const code = Math.random().toString(36).substring(2, 8); await fetch("/api/db/shorturl", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "INSERT INTO `urls` (original_url, short_code, created_at) VALUES (?, ?, ?)", values: [ url, code, new Date().toISOString() ] }) }); const checkResponse = await fetch("/api/db/shorturl", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT original_url FROM `urls` WHERE short_code = ? LIMIT 1", values: [ code ] }) }); const data = await checkResponse.json(); if (data && data.length > 0) { setShortUrl(`https://king-url.site/${code}`); loadUrlHistory(); } else { setError("URLの短縮に失敗しました"); } } catch (err) { console.error("エラー詳細:", err); setError("エラーが発生しました"); } setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 129, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, "URL短縮サービス"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "url", name: "url", value: originalUrl, onChange: (e)=>setOriginalUrl(e.target.value), placeholder: "https://example.com", required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isLoading, className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, isLoading ? "処理中..." : "URLを短縮")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-red-600 text-center", __source: { fileName: "", lineNumber: 156, columnNumber: 19 }, __self: this }, error), shortUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-gray-50 rounded-md", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-2", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, "短縮されたURL:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", readOnly: true, value: shortUrl, className: "flex-1 p-2 bg-white border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigator.clipboard.writeText(shortUrl), className: "p-2 text-blue-600 hover:text-blue-800", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this })))), urlHistory.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, "最近の短縮URL"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, urlHistory.map((url, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between p-3 bg-gray-50 rounded-md", __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-900 truncate", __source: { fileName: "", lineNumber: 188, columnNumber: 21 }, __self: this }, url.original_url), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 191, columnNumber: 21 }, __self: this }, new Date(url.created_at).toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "ml-4 flex items-center space-x-2", __source: { fileName: "", lineNumber: 195, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `https://king-url.site/${url.short_code}`, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:text-blue-800", __source: { fileName: "", lineNumber: 196, columnNumber: 21 }, __self: this }, url.short_code), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(url.short_code), className: "p-1 text-red-600 hover:text-red-800", title: "削除", __source: { fileName: "", lineNumber: 204, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 209, columnNumber: 23 }, __self: this }))))))))); }