feat(ui): add function to generate book markup

Valik3201 · Jan 6, 2024 · bd6340f · bd6340f
1 parent 5dd2fd7
commit bd6340f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 45 deletions.
diff --git a/src/js/bookMarkup.js b/src/js/bookMarkup.js
@@ -0,0 +1,19 @@
+export const createBookMarkup = ({ _id, title, author, book_image }) => {
+  const placeholderImageURL = new URL('/src/images/placeholder.jpg', import.meta.url).href;
+
+  return `
+      <div class="books__book" data-book-id="${_id}">
+        <div class="books__book--cover">
+          <img class="lazyload" 
+            src="${placeholderImageURL}"
+            data-src="${book_image}"
+            alt="${title}">
+          <div class="books__book--cover-overlay">
+            <div class="books__book--cover-overlay-text">Quick View</div>
+          </div>
+        </div>
+        <div class="books__book--title">${title}</div>
+        <div class="books__book--author">${author}</div>
+      </div>
+    `;
+};
diff --git a/src/js/fetchBooks.js b/src/js/fetchBooks.js
@@ -1,6 +1,7 @@
 import { fetchTopBooks } from './bookAPI.js';
 import { displayBookById } from './fetchBookById.js';
 import { topBooksContainer, switchView } from './viewSwitcher.js';
+import { createBookMarkup } from './bookMarkup.js';
 
 /**
  * Displays top books in the specified HTML container.
@@ -14,34 +15,11 @@ export const displayTopBooks = async () => {
   // Fetch top books from the API.
   const topBooks = await fetchTopBooks();
 
-  const placeholderImageURL = new URL('/src/images/placeholder.jpg', import.meta.url).href;
-
   // Generate markup for each top book category.
   const markup = topBooks
     .map(category => {
-      // Generate markup for each book within the category.
-      const booksMarkup = category.books
-        .map(({ title, author, book_image, _id }) => {
-          return `
-          <div class="books__book" data-book-id="${_id}">
-            <div class="books__book--cover">
-              <img class="lazyload" 
-              data-sizes="auto"
-              src="${placeholderImageURL}"
-              data-src="${book_image}"
-              alt="${title}">
-              <div class="books__book--cover-overlay">
-                <div class="books__book--cover-overlay-text">Quick View</div>
-              </div>
-            </div>
-            <div class="books__book--title">${title}</div>
-            <div class="books__book--author">${author}</div>
-          </div>
-        `;
-        })
-        .join('');
-
-      // Combine category title, book markup, and "See more" button into a single category markup.
+      const booksMarkup = category.books.map(book => createBookMarkup(book)).join('');
+
       return `
       <div class="books__category">
         <h2 class="books__category--title">${category.list_name}</h2>

diff --git a/src/js/fetchBooksByCategories.js b/src/js/fetchBooksByCategories.js
@@ -2,6 +2,7 @@ import { fetchBooksByCategory } from './bookAPI.js';
 import { displayTopBooks } from './fetchBooks.js';
 import { displayBookById } from './fetchBookById.js';
 import { topBooksContainer, booksContainer, switchView } from './viewSwitcher.js';
+import { createBookMarkup } from './bookMarkup.js';
 
 const displayBooksByCategory = async categoryName => {
   const booksByCategory = await fetchBooksByCategory(categoryName);
@@ -13,27 +14,9 @@ const displayBooksByCategory = async categoryName => {
 
   switchView('category');
 
-  const placeholderImageURL = new URL('/src/images/placeholder.jpg', import.meta.url).href;
-
   const booksMarkup = booksByCategory
     .flat()
-    .map(book => {
-      return `
-      <div class="books__book" data-book-id="${book._id}">
-        <div class="books__book--cover">
-          <img class="lazyload" 
-          src="${placeholderImageURL}"
-          data-src="${book.book_image}"
-          alt="${book.title}">
-          <div class="books__book--cover-overlay">
-            <div class="books__book--cover-overlay-text">Quick View</div>
-          </div>
-        </div>
-        <div class="books__book--title">${book.title}</div>
-        <div class="books__book--author">${book.author}</div>
-      </div>
-      `;
-    })
+    .map(book => createBookMarkup(book))
     .join('');
 
   const categoryTitleMarkup = `
@@ -52,7 +35,6 @@ const displayBooksByCategory = async categoryName => {
   books.forEach(book => {
     book.addEventListener('click', () => {
       const bookId = book.dataset.bookId;
-      console.log('Displaying book with ID:', bookId);
       displayBookById(bookId);
     });
   });