Merge pull request #62 from Valik3201/feature/local-storage

feat: add book generation with localStorage
Valik3201 · Jan 3, 2024 · 02aca40 · 02aca40
2 parents 05de03a + a641216
commit 02aca40
Show file tree

Hide file tree

Showing 5 changed files with 267 additions and 135 deletions.
diff --git a/src/js/localStorage.js b/src/js/localStorage.js
@@ -42,3 +42,137 @@ export const addToLocalStorage = async bookId => {
     console.log('Twoja przeglądarka nie obsługuje localStorage');
   }
 };
+
+// Funkcja pobierająca listę książek z localStorage
+export const getBooksFromLocalStorage = () => {
+  // Sprawdzamy czy localStorage jest obsługiwane w bieżącej przeglądarce
+  if (typeof Storage !== 'undefined') {
+    const storedBooks = [];
+
+    // Iterujemy przez wszystkie klucze w localStorage
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+
+      // Sprawdzamy czy klucz zaczyna się od 'book_'
+      if (key.startsWith('book_')) {
+        // Pobieramy wartość z localStorage dla danego klucza
+        const bookData = JSON.parse(localStorage.getItem(key));
+
+        // Dodajemy książkę do tablicy
+        storedBooks.push(bookData);
+      }
+    }
+
+    console.log('Lista książek z localStorage:', storedBooks);
+    return storedBooks;
+  } else {
+    console.log('Twoja przeglądarka nie obsługuje localStorage');
+    return [];
+  }
+};
+
+export const displayBooksFromLocalStorage = () => {
+  // Pobierz listę książek z localStorage
+  const storedBooks = getBooksFromLocalStorage();
+
+  // Znajdź kontener na stronie, do którego będziemy dodawać książki
+  const container = document.querySelector('.books-container');
+
+  // Sprawdź, czy localStorage jest pusty
+  if (storedBooks.length === 0) {
+    // Jeśli localStorage jest pusty, wyświetl komunikat
+    const emptyMessageMarkup = `
+      <div class="book-message">This page is empty, add some books and proceed to order.</div>
+      <img class="books-img" src="./images/books.png" alt="books" />
+    `;
+
+    container.innerHTML = emptyMessageMarkup;
+  } else if (container) {
+    // Jeśli localStorage nie jest pusty, dodaj książki do kontenera
+    storedBooks.forEach(book => {
+      const { _id, title, author, book_image, description, buy_links } = book;
+
+      const buyLinks = [
+        {
+          name: 'Amazon',
+          imageUrl: new URL('/src/images/amazon.png', import.meta.url).href,
+          buyUrl: '',
+        },
+        {
+          name: 'Apple Books',
+          imageUrl: new URL('/src/images/apple.png', import.meta.url).href,
+          buyUrl: '',
+        },
+      ];
+
+      const filteredBuyLinks = buy_links.filter(link =>
+        buyLinks.some(store => store.name === link.name),
+      );
+
+      buyLinks.forEach(store => {
+        const link = filteredBuyLinks.find(filteredLink => filteredLink.name === store.name);
+        store.buyUrl = link ? link.url : '';
+      });
+
+      const buyLinksMarkup = buyLinks
+        .map(
+          store =>
+            `<a href="${store.buyUrl}" target="_blank"><img src="${store.imageUrl}" alt="${store.name}"></a>`,
+        )
+        .join('');
+
+      const placeholderImageURL = new URL('/src/images/placeholder.jpg', import.meta.url).href;
+
+      const markup = `
+        <div class="book-card">
+          <img class="books-card-img lazyload" src="${placeholderImageURL}" data-src="${book_image}" alt="${title}">
+        
+          <div class="book-description">
+            <button class="button-delete" type="button" data-book-id="${_id}">
+              <svg class="icon-trash">
+                <use href="/src/images/icons.svg#icon-trash"></use>
+              </svg>
+            </button>
+            <p class="book-title">${title}</p>
+            <p class="book-genre">${author}</p>
+            <p class="book-plot">${
+              description ? description : 'Sorry, the description for this book is not available.'
+            }</p>
+            <p class="book-author">${author}</p>
+            <div class="book-buy-links">${buyLinksMarkup}</div>
+          </div>
+        </div>
+      `;
+
+      // Dodaj wygenerowany markup do kontenera
+      container.innerHTML += markup;
+
+      // Dodaj obsługę zdarzenia dla każdego przycisku usuwania
+      const deleteButtons = container.querySelectorAll('.button-delete');
+      deleteButtons.forEach(deleteButton => {
+        deleteButton.addEventListener('click', () => {
+          const bookId = deleteButton.getAttribute('data-book-id');
+
+          // Usuń książkę z localStorage
+          removeFromLocalStorage(bookId);
+        });
+      });
+    });
+  }
+};
+
+// Funkcja usuwająca książkę z localStorage
+const removeFromLocalStorage = bookId => {
+  const localStorageKey = 'book_' + bookId;
+  localStorage.removeItem(localStorageKey);
+
+  document.querySelector('.books-container').innerHTML = '';
+
+  // Ponownie wyświetl książki (aktualizacja widoku)
+  displayBooksFromLocalStorage();
+
+  // // Ręczne odświeżenie strony
+  // location.reload();
+};
+
+displayBooksFromLocalStorage();
diff --git a/src/js/shoppingList.js b/src/js/shoppingList.js
diff --git a/src/js/shoppingListModules.js b/src/js/shoppingListModules.js
@@ -1 +1 @@
-import './shoppingList.js';
+import './localStorage.js';
diff --git a/src/partials/shopping-list/shopping-list-main.html b/src/partials/shopping-list/shopping-list-main.html
@@ -1,32 +1,33 @@
 <h1 class="heading">Shopping <span class="heading-span"> List</span></h1>
-<div class="book-message">This page is empty, add some books and proceed to order.</div>
-<img class="books-img" src="./images/books.png" alt="books" />
 
-<!--Karta książki-->
-<div class="book-card">
-  <img class="books-card-img" src="./images/book-example.jpg" alt="books" />
+<div class="books-container"></div>
 
-  <div class="book-description">
-    <button class="button-delete" type="button">
-      <svg class="icon-trash">
-        <use href="/src/images/icons.svg#icon-trash"></use>
-      </svg>
-    </button>
-    <p class="book-title">I will find you</p>
-    <p class="book-genre">Hardcover fiction</p>
-    <p class="book-plot">
-      David Burroughs was once a devoted father to his three-year-old son Matthew, living a dream
-      life just a short drive away from the working-class suburb where he and his wife, Cheryl,
-      first fell in love--until one fateful night when David woke suddenly to discover Matthew had
-      been murdered while David was asleep just down the hall.
-    </p>
-    <p class="book-author">Harlan Coben</p>
-
-    <!--<a href="https://www.amazon.pl/"> <img href=""> <a/> -->
-    <!--<a href=""> <img href=""> <a/> -->
-  </div>
+<div class="pagination">
+  <button class="go-to-first-page">
+    <svg width="24" height="24">
+      <use href="/src/images/icons.svg#icon-slider-pages-left"></use>
+    </svg>
+    <svg width="24" height="24">
+      <use href="/src/images/icons.svg#icon-slider-pages-left"></use>
+    </svg>
+  </button>
+  <button class="prev-page">
+    <svg width="24" height="24">
+      <use href="/src/images/icons.svg#icon-slider-pages-left"></use>
+    </svg>
+  </button>
+  <button class="first-page">1</button>
+  <button class="second-page">2</button>
+  <button class="third-page">3</button>
+  <button class="morePages">...</button>
+  <button class="next-page">
+    <svg width="24" height="24">
+      <use href="/src/images/icons.svg#icon-slider-pages-right"></use>
+    </svg>
+  </button>
+  <button class="go-to-last-page">
+    <svg width="24" height="24">
+      <use href="/src/images/icons.svg#icon-slider-pages-right"></use>
+    </svg>
+  </button>
 </div>
-<!--<div class="pagination">
-  <button id="prevPage">Poprzednia</button>
-  <button id="nextPage">Następna</button>
-</div> -->