refactor(api): update structure and behavior of API requests

src/components/App.jsx

@@ -9,54 +9,44 @@ import NoResultsAlert from './NoResultsAlert';
 
 import { Container, Row } from 'react-bootstrap';
 
-import axios from 'axios';
+import fetchImages from 'services/api';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { Loader } from './Loader';
 
-const API_KEY = '41006597-e52c63fe5093395ccafd50f48';
-
-axios.defaults.baseURL = 'https://pixabay.com/api';
-
 class App extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       images: [],
       searchQuery: '',
-      activePage: 1,
+      currentPage: 1,
       isLoading: false,
       error: null,
+      totalHits: 0,
     };
   }
 
-  getImages = async (searchQuery, activePage) => {
+  getImages = async () => {
+    const { searchQuery, currentPage } = this.state;
+
+    if (!searchQuery) {
+      return;
+    }
+
     try {
       this.setState({
         isLoading: true,
       });
 
-      const params = {
-        q: searchQuery,
-        page: activePage,
-        key: API_KEY,
-        image_type: 'photo',
-        orientation: 'horizontal',
-        per_page: 12,
-      };
-
-      const response = await axios.get('/', { params });
-
-      this.setState(prevState => ({
-        images:
-          searchQuery !== prevState.searchQuery
-            ? response.data.hits
-            : [...prevState.images, ...response.data.hits],
-
-        activePage: searchQuery !== prevState.searchQuery ? 1 : activePage,
+      const { hits, totalHits } = await fetchImages(searchQuery, currentPage);
 
-        searchQuery,
+      // Append new images to the existing ones
+      this.setState(prev => ({
+        images: [...prev.images, ...hits],
+        error: null,
+        totalHits: totalHits || 0,
       }));
     } catch (error) {
       this.setState({
@@ -69,39 +59,53 @@ class App extends Component {
     }
   };
 
-  loadMoreImages = () => {
-    const { searchQuery, activePage } = this.state;
-    const nextPage = activePage + 1;
+  async componentDidUpdate(_prevProps, prevState) {
+    if (
+      prevState.searchQuery !== this.state.searchQuery ||
+      prevState.currentPage !== this.state.currentPage
+    ) {
+      this.getImages();
+    }
+  }
 
-    this.getImages(searchQuery, nextPage);
-    this.setState({ activePage: nextPage });
+  loadMoreImages = () => {
+    this.setState(prev => ({
+      currentPage: prev.currentPage + 1,
+    }));
   };
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.searchQuery !== this.props.searchQuery) {
-      this.getImages(this.props.searchQuery);
-    }
-  }
+  handleSubmit = searchQuery => {
+    this.setState({
+      searchQuery: searchQuery,
+      images: [],
+      currentPage: 1,
+    });
+  };
 
   render() {
-    const { images, searchQuery, isLoading, error } = this.state;
+    const { images, searchQuery, isLoading, error, totalHits } = this.state;
 
     return (
       <>
-        <Searchbar onSearch={this.getImages} />
+        <Searchbar onSubmit={this.handleSubmit} />
         <Container className="d-flex flex-column justify-content-center mb-5 mx-auto">
           {isLoading && <Loader />}
           {error && <ErrorAlert errorMessage={error} />}
           {images.length > 0 && !error ? (
             <>
               <Row>
-                <SearchResultInfo searchQuery={searchQuery} />
+                <SearchResultInfo
+                  searchQuery={searchQuery}
+                  totalHits={totalHits}
+                />
               </Row>
               <Row>
                 <ImageGallery images={images} />
               </Row>
               <Row>
-                <LoadMoreBtn onClick={this.loadMoreImages} />
+                {totalHits > images.length && (
+                  <LoadMoreBtn onClick={this.loadMoreImages} />
+                )}
               </Row>
             </>
           ) : images.length === 0 && searchQuery && !error ? (

src/components/Searchbar.jsx

@@ -62,10 +62,10 @@ class Searchbar extends Component {
   handleSubmit = e => {
     e.preventDefault();
 
-    const { onSearch } = this.props;
+    const { onSubmit } = this.props;
     const { searchQuery } = this.state;
 
-    onSearch(searchQuery);
+    onSubmit(searchQuery);
   };
 
   render() {

src/services/api.js

@@ -0,0 +1,25 @@
+import axios from 'axios';
+
+const API_KEY = '41006597-e52c63fe5093395ccafd50f48';
+
+axios.defaults.baseURL = 'https://pixabay.com/api';
+
+const PER_PAGE = 12;
+
+const fetchImages = async (searchQuery, currentPage) => {
+  const params = {
+    q: searchQuery,
+    page: currentPage,
+    keyy: API_KEY,
+    image_type: 'photo',
+    orientation: 'horizontal',
+    per_page: PER_PAGE,
+    safesearch: true,
+  };
+
+  const response = await axios.get('/', { params });
+
+  return response.data;
+};
+
+export default fetchImages;