From 473f15e81e43304317d5e4059976a9f297f55de0 Mon Sep 17 00:00:00 2001
From: MisterGetman <99386291+MisterGetman@users.noreply.github.com>
Date: Sun, 30 Jun 2024 18:08:49 +0300
Subject: [PATCH] Fixed.

---
 src/js/pixabay-api.js | 23 +++++++++++++--
 src/main.js           | 65 +++++++++++++++++++------------------------
 2 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/src/js/pixabay-api.js b/src/js/pixabay-api.js
index 069f278..6fd8d8c 100644
--- a/src/js/pixabay-api.js
+++ b/src/js/pixabay-api.js
@@ -1,6 +1,23 @@
 import axios from 'axios';
 
-export default async function get(query) {
-  const res = await axios.get(`https://pixabay.com/api?${query}`);
-  return res.data;
+function queryParams(keyWord, page) {
+  const params = new URLSearchParams({
+    key: '44691469-d7e9dab06c3e716fb34c6ceb9',
+    q: keyWord,
+    image_type: 'photo',
+    orientation: 'horizontal',
+    safesearch: true,
+    page: page,
+    per_page: 15,
+  });
+
+  return params.toString();
+}
+
+export default async function getImages(keyWord, page) {
+  const { data } = await axios.get(
+    `https://pixabay.com/api/?${queryParams(keyWord, page)}`
+  );
+
+  return data;
 }
diff --git a/src/main.js b/src/main.js
index 6ae69c3..60d4ac2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,8 +6,7 @@ import 'simplelightbox/dist/simple-lightbox.min.css';
 import imgCardsTemplate from './js/render-functions';
 import getPics from './js/pixabay-api';
 
-const PER_PAGE = 15;
-const API_KEY = '44691469-d7e9dab06c3e716fb34c6ceb9';
+const perPage = 15;
 const form = document.querySelector('form');
 const gallery = document.querySelector('.gallery');
 const loader = document.querySelector('.loader-wrapper');
@@ -22,53 +21,43 @@ let page;
 form.addEventListener('submit', handleFormSubmit);
 loadButton.addEventListener('click', handleLoadButtonClick);
 
-function queryParams(keyWord) {
-  const params = new URLSearchParams({
-    key: API_KEY,
-    q: keyWord,
-    image_type: 'photo',
-    orientation: 'horizontal',
-    safesearch: true,
-    page: page,
-    per_page: PER_PAGE,
-  });
-
-  return params.toString();
-}
-
-async function handleFormSubmit(e) {
+function handleFormSubmit(e) {
   e.preventDefault();
-  loader.classList.toggle('hidden');
   page = 1;
   keyWord = form.keyWord.value.trim();
+
+  if (keyWord === '') {
+    showNotification({
+      title: '<b>Error:</b>',
+      message: 'Input can not be blank.',
+      backgroundColor: 'tomato',
+    });
+
+    return;
+  }
+
   form.keyWord.value = '';
   gallery.innerHTML = '';
 
-  await loadAndRenderPics();
-
-  loader.classList.toggle('hidden');
+  loadAndRenderPics();
 }
 
-async function handleLoadButtonClick() {
-  loader.classList.toggle('hidden');
+function handleLoadButtonClick() {
   page++;
-
-  await loadAndRenderMorePics();
-
-  loader.classList.toggle('hidden');
+  loadAndRenderMorePics();
 }
 
 async function loadAndRenderPics() {
   try {
-    if (keyWord === '') return Promise.reject('Input can not be blank.');
-
-    const data = await getPics(queryParams(keyWord));
+    loader.classList.toggle('hidden');
+    const { hits, totalHits } = await getPics(keyWord, page);
+    loader.classList.toggle('hidden');
 
-    if (data.hits.length > 0) {
-      gallery.insertAdjacentHTML('afterbegin', imgCardsTemplate(data.hits));
+    if (hits.length > 0) {
+      gallery.insertAdjacentHTML('afterbegin', imgCardsTemplate(hits));
       modal.refresh();
 
-      handleLoadButtonDisplay(data.totalHits);
+      handleLoadButtonDisplay(totalHits);
     } else {
       showNotification({
         title: '<b>Oops!</b>',
@@ -88,14 +77,16 @@ async function loadAndRenderPics() {
 
 async function loadAndRenderMorePics() {
   try {
-    const data = await getPics(queryParams(keyWord));
+    loader.classList.toggle('hidden');
+    const { hits, totalHits } = await getPics(keyWord, page);
+    loader.classList.toggle('hidden');
 
-    gallery.insertAdjacentHTML('beforeend', imgCardsTemplate(data.hits));
+    gallery.insertAdjacentHTML('beforeend', imgCardsTemplate(hits));
     modal.refresh();
 
     doSmoothScroll();
 
-    handleLoadButtonDisplay(data.totalHits);
+    handleLoadButtonDisplay(totalHits);
   } catch (error) {
     showNotification({
       title: '<b>Error:</b>',
@@ -119,7 +110,7 @@ function handleLoadButtonDisplay(maxResults) {
 }
 
 function canLoadMore(maxResults) {
-  return Math.ceil(maxResults / PER_PAGE) > page;
+  return Math.ceil(maxResults / perPage) > page;
 }
 
 function showNotification({ title, message, backgroundColor }) {