fixed observer

Iryna-Vyshniak · Aug 29, 2023 · 79f394d · 79f394d
1 parent f151ca5
commit 79f394d
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 84 deletions.
diff --git a/src/app/PixabayAPI.js b/src/app/PixabayAPI.js
@@ -1,55 +1,58 @@
 import axios from 'axios';
 
-
 axios.defaults.baseURL = 'https://pixabay.com/api/';
 // axios.defaults.headers.common['Authorization'] = 'Client-ID 28194821-49041d995ecd04735d9e20d11';
 const API_KEY = '28194821-49041d995ecd04735d9e20d11';
 
 export class PixabayAPI {
-    #page = 1;
-    #per_page = 40;
-    #query = '';
-    #totalPages = 0;
-
-    async getPhotos() {
-        const params = {
-            page: this.#page,
-            q: this.#query,
-            per_page: this.#per_page,
-            image_type: 'photo',
-            orientation: 'horizontal',
-            safesearch: true,
-        }
-
-
-        const urlAXIOS = `?key=${API_KEY}`;
-        // const urlAXIOS = `?key=${API_KEY}&q=${this.#query}&page=${this.#page}&per_page=${this.#per_page}`;
-
-        const { data } = await axios.get(urlAXIOS, { params, });
-        return data;
-    }
-
-    get query() {
-        this.#query;
-    }
-
-    set query(newQuery) {
-        this.#query = newQuery;
-    }
-
-    incrementPage() {
-        this.#page += 1;
-    }
-
-    resetPage() {
-        this.#page = 1;
-    }
-
-    setTotal(total) {
-        this.#totalPages = total;
-    }
-
-    hasMorePhotos() {
-        return this.#page < Math.ceil(this.#totalPages / this.#per_page);
-    }
+  #page = 1;
+  #per_page = 40;
+  #query = '';
+  #totalPhotos = 0;
+
+  async getPhotos() {
+    const params = {
+      page: this.#page,
+      q: this.#query,
+      per_page: this.#per_page,
+      image_type: 'photo',
+      orientation: 'horizontal',
+      safesearch: true,
+    };
+
+    const urlAXIOS = `?key=${API_KEY}`;
+    // const urlAXIOS = `?key=${API_KEY}&q=${this.#query}&page=${this.#page}&per_page=${this.#per_page}`;
+
+    const { data } = await axios.get(urlAXIOS, { params });
+    console.log('data: ', data);
+    return data;
+  }
+
+  get query() {
+    // this.#query;
+    return this.#query;
+  }
+
+  set query(newQuery) {
+    this.#query = newQuery;
+  }
+
+  incrementPage() {
+    this.#page += 1;
+  }
+
+  resetPage() {
+    this.#page = 1;
+  }
+
+  setTotal(total) {
+    this.#totalPhotos = total;
+  }
+
+  hasMorePhotos() {
+    console.log('page', this.#page);
+    console.log('totalPhotos', this.#totalPhotos);
+    console.log('per_page', this.#per_page);
+    return this.#page < Math.ceil(this.#totalPhotos / this.#per_page);
+  }
 }
diff --git a/src/app/index.js b/src/app/index.js
@@ -30,6 +30,23 @@ const options = {
   threshold: 1.0,
 };
 
+// Declaring a function to check and join an observer
+const checkAndAttachObserver = async () => {
+  if (pixaby.hasMorePhotos()) {
+    const lastItem = document.querySelector('.gallery a:last-child');
+    if (lastItem) {
+      observer.observe(lastItem);
+    } else {
+      console.log('No more items to observe.');
+    }
+  } else {
+    Notify.info(
+      "We're sorry, but you've reached the end of search results.",
+      notifyInit
+    );
+  }
+};
+
 const loadMorePhotos = async function (entries, observer) {
   entries.forEach(async entry => {
     if (entry.isIntersecting) {
@@ -45,15 +62,7 @@ const loadMorePhotos = async function (entries, observer) {
         const markup = createMarkup(hits);
         refs.gallery.insertAdjacentHTML('beforeend', markup);
 
-        // const showMore = pixaby.hasMorePhotos();
-        if (pixaby.hasMorePhotos) {
-          const lastItem = document.querySelector('.gallery a:last-child');
-          observer.observe(lastItem);
-        } else
-          Notify.info(
-            "We're sorry, but you've reached the end of search results.",
-            notifyInit
-          );
+        await checkAndAttachObserver();
 
         modalLightboxGallery.refresh();
         scrollPage();
@@ -86,13 +95,24 @@ const onSubmitClick = async event => {
     return;
   }
 
+  if (search_query === pixaby.query) {
+    Notify.warning(
+      `We already found images for "${search_query.toUpperCase()}.
+      Please, enter another phrase`,
+      notifyInit
+    );
+    return;
+  }
+
   pixaby.query = search_query;
 
   clearPage();
 
   try {
     spinnerPlay();
-    const { hits, total } = await pixaby.getPhotos();
+    const { hits, total, totalHits } = await pixaby.getPhotos();
+    console.log('hits: ', hits);
+    console.log('total: ', total);
 
     if (hits.length === 0) {
       Notify.failure(
@@ -106,18 +126,12 @@ const onSubmitClick = async event => {
     const markup = createMarkup(hits);
     refs.gallery.insertAdjacentHTML('beforeend', markup);
 
-    pixaby.setTotal(total);
-    Notify.success(`Hooray! We found ${total} images.`, notifyInit);
+    pixaby.setTotal(totalHits);
+    Notify.success(`Hooray! We found ${totalHits} images.`, notifyInit);
 
-    if (pixaby.hasMorePhotos) {
-      //refs.btnLoadMore.classList.remove('is-hidden');
-
-      const lastItem = document.querySelector('.gallery a:last-child');
-      observer.observe(lastItem);
-    }
+    await checkAndAttachObserver();
 
     modalLightboxGallery.refresh();
-    // scrollPage();
   } catch (error) {
     Notify.failure(error.message, 'Something went wrong!', notifyInit);
 
@@ -127,26 +141,28 @@ const onSubmitClick = async event => {
   }
 };
 
-const onLoadMore = async () => {
-  pixaby.incrementPage();
+// this code for button lOAD MORE
 
-  if (!pixaby.hasMorePhotos) {
-    refs.btnLoadMore.classList.add('is-hidden');
-    Notify.info("We're sorry, but you've reached the end of search results.");
-    notifyInit;
-  }
-  try {
-    const { hits } = await pixaby.getPhotos();
-    const markup = createMarkup(hits);
-    refs.gallery.insertAdjacentHTML('beforeend', markup);
+// const onLoadMore = async () => {
+//   pixaby.incrementPage();
 
-    modalLightboxGallery.refresh();
-  } catch (error) {
-    Notify.failure(error.message, 'Something went wrong!', notifyInit);
+//   if (!pixaby.hasMorePhotos) {
+//     refs.btnLoadMore.classList.add('is-hidden');
+//     Notify.info("We're sorry, but you've reached the end of search results.");
+//     notifyInit;
+//   }
+//   try {
+//     const { hits } = await pixaby.getPhotos();
+//     const markup = createMarkup(hits);
+//     refs.gallery.insertAdjacentHTML('beforeend', markup);
 
-    clearPage();
-  }
-};
+//     modalLightboxGallery.refresh();
+//   } catch (error) {
+//     Notify.failure(error.message, 'Something went wrong!', notifyInit);
+
+//     clearPage();
+//   }
+// };
 
 function clearPage() {
   pixaby.resetPage();
@@ -155,7 +171,7 @@ function clearPage() {
 }
 
 refs.form.addEventListener('submit', onSubmitClick);
-refs.btnLoadMore.addEventListener('click', onLoadMore);
+// refs.btnLoadMore.addEventListener('click', onLoadMore);
 
 //  smooth scrolling
 function scrollPage() {