function MainComponent() { const [bookTitle, setBookTitle] = React.useState(''); const [authorName, setAuthorName] = React.useState(''); const [books, setBooks] = React.useState([]); const [currentPage, setCurrentPage] = React.useState(1); const [autocompleteResults, setAutocompleteResults] = React.useState([]); const [showAutocomplete, setShowAutocomplete] = React.useState(false); const booksPerPage = 6; const fetchBooks = async ()=>{ const response = await fetch('/api/db/book-sharers', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: "SELECT `id`, `book_title`, `author_name` FROM `books`" }) }); const data = await response.json(); setBooks(data); }; React.useEffect(()=>{ fetchBooks(); const handleArrowKeys = (e)=>{ if (e.key === 'ArrowRight') { setCurrentPage((prev)=>Math.min(prev + 1, Math.ceil(books.length / booksPerPage))); } else if (e.key === 'ArrowLeft') { setCurrentPage((prev)=>Math.max(prev - 1, 1)); } }; window.addEventListener('keydown', handleArrowKeys); return ()=>window.removeEventListener('keydown', handleArrowKeys); }, [ books.length ]); const handleTitleChange = async (event)=>{ const title = event.target.value; setBookTitle(title); if (title.length > 2) { const encodedTitle = encodeURIComponent(title); const response = await fetch(`/integrations/book-search/?q=${encodedTitle}&fields=*&limit=4`, { method: 'GET' }); const data = await response.json(); setAutocompleteResults(data.docs); setShowAutocomplete(true); } else { setShowAutocomplete(false); } }; const handleAutocompleteClick = (result)=>{ setBookTitle(result.title); setAuthorName(result.author_name[0]); setShowAutocomplete(false); }; const handleClickOutside = ()=>{ setShowAutocomplete(false); }; const handleSubmit = async (event)=>{ event.preventDefault(); await fetch('/api/db/book-sharers', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: "DELETE FROM `books` WHERE `book_title` = ? AND `author_name` = ?", values: [ bookTitle, authorName ] }) }); await fetch('/api/db/book-sharers', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: "INSERT INTO `books` (`book_title`, `author_name`) VALUES (?, ?)", values: [ bookTitle, authorName ] }) }); setBookTitle(''); setAuthorName(''); fetchBooks(); }; const currentBooks = React.useMemo(()=>{ const lastBookIndex = currentPage * booksPerPage; const firstBookIndex = lastBookIndex - booksPerPage; return books.slice(firstBookIndex, lastBookIndex); }, [ books, currentPage, booksPerPage ]); const totalPages = Math.ceil(books.length / booksPerPage); const visiblePageNumbers = React.useMemo(()=>{ let pagesToShow = [ 1, 2, 3 ]; if (currentPage > 2 && currentPage < totalPages - 1) { pagesToShow = [ currentPage - 1, currentPage, currentPage + 1 ]; } else if (currentPage >= totalPages - 1) { pagesToShow = [ totalPages - 2, totalPages - 1, totalPages ].filter((page)=>page > 0); } return pagesToShow; }, [ currentPage, totalPages ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5]", onClick: handleClickOutside, __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center text-[#333] font-crimson-text", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "Book Sharer"), /*#__PURE__*/ React.createElement("p", { className: "text-center my-4", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "There are currently ", books.length, " shared books"), /*#__PURE__*/ React.createElement("form", { className: "mt-8 space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-md shadow-sm space-y-4", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "book-title", className: "sr-only", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, "Book Title"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "book_title", id: "book-title", className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", placeholder: "Book Title", required: true, value: bookTitle, onChange: handleTitleChange, __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }), showAutocomplete && /*#__PURE__*/ React.createElement("div", { className: "absolute mt-2 bg-white shadow-lg rounded w-full z-10", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, autocompleteResults.slice(0, 4).map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "px-4 py-2 hover:bg-gray-100 cursor-pointer", onClick: ()=>handleAutocompleteClick(result), __source: { fileName: "", lineNumber: 132, columnNumber: 21 }, __self: this }, result.title, " - ", result.author_name[0])))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "author-name", className: "sr-only", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, "Author Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "author_name", id: "author-name", className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", placeholder: "Author Name", required: true, value: authorName, onChange: (e)=>setAuthorName(e.target.value), __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#4f46e5] hover:bg-[#4338ca] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "absolute left-0 inset-y-0 flex items-center pl-3", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share fa-lg text-indigo-500 group-hover:text-indigo-400", __source: { fileName: "", lineNumber: 158, columnNumber: 82 }, __self: this })), "Share Book"))), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#333] font-crimson-text", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, "Shared Books"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, currentBooks.map((book, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow rounded-lg p-6", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, book.book_title), /*#__PURE__*/ React.createElement("div", { className: "text-gray-700", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, book.author_name)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-6 space-x-2", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, visiblePageNumbers.map((number)=>/*#__PURE__*/ React.createElement("a", { key: number, onClick: ()=>setCurrentPage(number), className: `cursor-pointer px-3 py-1 text-sm rounded ${currentPage === number ? 'bg-[#4f46e5] text-white' : 'bg-white text-[#4f46e5]'}`, __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, number)))))); }