function MainComponent() { const [user, setUser] = React.useState(null); const [products, setProducts] = React.useState([]); const [cart, setCart] = React.useState([]); const [purchasedFractions, setPurchasedFractions] = React.useState([]); const [transactions, setTransactions] = React.useState([]); const [form, setForm] = React.useState({ email: "", password: "" }); const [users, setUsers] = React.useState([]); React.useEffect(()=>{ fetch('/api/products').then((response)=>response.json()).then((data)=>setProducts(data)); fetchUsers(); }, []); const handleLogin = ()=>{ fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form) }).then((response)=>response.json()).then((data)=>setUser(data.user)); }; const handleRegister = ()=>{ fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form) }).then((response)=>response.json()).then((data)=>{ setUser(data.user); saveUser(data.user); }); }; const handleInputChange = (e)=>{ const { name, value } = e.target; setForm({ ...form, [name]: value }); }; const handleFractionalPurchase = (product, fractionCount)=>{ fetch('/api/purchase', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ productId: product.id, fractionCount }) }).then((response)=>response.json()).then((data)=>setPurchasedFractions(data.fractions)); }; const handleCheckout = ()=>{ fetch('/api/checkout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ cart }) }).then((response)=>response.json()).then((data)=>setTransactions(data.transactions)); }; const fetchUsers = ()=>{ fetch('/api/db/users-740', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `users`' }) }).then((response)=>response.json()).then((data)=>setUsers(data)); }; const saveUser = (user)=>{ fetch('/api/db/users-740', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `users` (`email`, `password`) VALUES (?, ?)", values: [ user.email, user.password ] }) }).then(()=>fetchUsers()); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 89, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#010101] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-2xl font-semibold", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "Marketplace"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleLogin, className: "text-white", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "Login")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleRegister, className: "text-white", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, "Register"))))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "Product Listings"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow-md rounded p-4", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `${product.name} thumbnail`, className: "w-full h-[200px] object-cover mb-4", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("p", { className: "text-green-500 font-semibold", __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }, "$", product.pricePerFraction, " per Fraction"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleFractionalPurchase(product, 1), className: "mt-2 bg-[#010101] text-white p-2 rounded", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, "Buy 1 Fraction"))))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, "User Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded p-4", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, "Purchased Fractions"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-4", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, purchasedFractions.map((fraction, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 131, columnNumber: 17 }, __self: this }, fraction.productName, " - ", fraction.details))), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2 mt-4", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "Transaction History"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-4", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, transactions.map((transaction, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, transaction.details))))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-4", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, "Shopping Cart"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded p-4", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-4", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, cart.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }, item.name, " - ", item.pricePerFraction, " per Fraction"))), /*#__PURE__*/ React.createElement("button", { onClick: handleCheckout, className: "mt-4 bg-[#010101] text-white p-2 rounded", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, "Checkout"))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-4", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, "Registered Users"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded p-4", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-4", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, users.map((user, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, user.email)))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#010101] p-4 text-white text-center", __source: { fileName: "", lineNumber: 172, columnNumber: 7 }, __self: this }, "© 2023 Marketplace. All rights reserved.")); }