Merge pull request #2 from iVladyuser/app_on_hooks

write app on hooks/finish
iVladyuser · Oct 31, 2023 · 4823f37 · 4823f37
2 parents df00d48 + 64c89e8
commit 4823f37
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 131 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Notify } from 'notiflix/build/notiflix-notify-aio';
 import { Searchbar, ImageGallery, Loader, Button, Modal } from 'components/';
 import { fetchPhoto, onFetchError } from 'service/api';
@@ -11,63 +11,23 @@ export const paramsForNotify = {
 };
 const perPage = 12;
 
-class App extends Component {
-  state = {
-    search: '',
-    photos: [],
-    page: 1,
-    loading: false,
-    btnLoadMore: false,
-    showModal: false,
-    selectedPhoto: null,
-  };
-
-  componentDidUpdate(_, prevState) {
-    const prevSearch = prevState.search;
-    const prevPage = prevState.page;
-    const newSearch = this.state.search;
-    const newPage = this.state.page;
-
-    if (prevSearch !== newSearch || prevPage !== newPage) {
-      this.addPhotoPage(newSearch, newPage);
+function App() {
+  const [search, setSearch] = useState('');
+  const [photos, setPhotos] = useState([]);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [btnLoadMore, setBtnLoadMore] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [selectedPhoto, setSelectedPhoto] = useState(null);
+
+  useEffect(() => {
+    if (!search) {
+      return;
     }
-  }
-
-  addPhotoPage = (search, page) => {
-    this.setState({ loading: true });
-
-    fetchPhoto(search, page, perPage)
-      .then(data => {
-        const { totalHits } = data;
-        const totalPage = Math.ceil(data.totalHits / perPage);
-        if (totalHits === 0) {
-          return Notify.failure('Sorry, there are no images matching your search query. Please try again.', paramsForNotify);
-        }
+    addPhotoPage(search, page);
+  }, [search, page]);
 
-        const arrPhotos = data.hits.map(({ id, webformatURL, largeImageURL, tags }) => (
-          { id, webformatURL, largeImageURL, tags }
-        ));
-
-        this.setState(prevState =>
-          ({ photos: [...prevState.photos, ...arrPhotos] }));
-
-        if (totalPage > page) {
-          this.setState({ btnLoadMore: true })
-        } else {
-          Notify.info("We're sorry, but you've reached the end of search results.", paramsForNotify);
-          this.setState({ btnLoadMore: false });
-        };
-      })
-    .catch(onFetchError)
-    .finally(() => {
-      this.setState({ loading: false });
-    });
-  }
-  onClickRender = () => {
-    this.setState(({ page }) => ({ page: page + 1 }));
-  };
-
-  onSubmitSearchBar = event => {
+  const onSubmitSearchBar = event => {
     event.preventDefault();
     const form = event.currentTarget;
     const searchValue = form.search.value
@@ -81,57 +41,88 @@ class App extends Component {
       return;
     }
 
-    if (searchValue === this.state.search) {
+    if (searchValue === search) {
       Notify.info('Enter new request, please!', paramsForNotify);
       return;
     }
 
-    this.setState({
-      search: searchValue,
-      page: 1,
-      photos: [],
-    });
+    setSearch(searchValue);
+    setPage(1);
+    setPhotos([]);
   };
 
-  toggleModal = () => {
-    this.setState(({ showModal }) => ({ showModal: !showModal }));
+  const addPhotoPage = (search, page) => {
+    setLoading(true);
+
+    fetchPhoto(search, page, perPage)
+      .then(data => {
+        const { totalHits } = data;
+        const totalPage = Math.ceil(data.totalHits / perPage);
+        if (totalHits === 0) {
+          return Notify.failure(
+            'Sorry, there are no images matching your search query. Please try again.',
+            paramsForNotify
+          );
+        }
+
+        const arrPhotos = data.hits.map(
+          ({ id, webformatURL, largeImageURL, tags }) => ({
+            id,
+            webformatURL,
+            largeImageURL,
+            tags,
+          })
+        );
+
+        setPhotos(prevPhotos => [...prevPhotos, ...arrPhotos]);
+
+        if (totalPage > page) {
+          setBtnLoadMore(true);
+        } else {
+          Notify.info(
+            "We're sorry, but you've reached the end of search results.",
+            paramsForNotify
+          );
+          setBtnLoadMore(false);
+        }
+      })
+      .catch(onFetchError)
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
-  onClickOpenModal = event => {
-    const { photos } = this.state;
+  const onClickRender = () => {
+    setPage(prevPage => prevPage + 1);
+  };
+
+  const onClickOpenModal = event => {
     const imageId = event.target.getAttribute('data-id');
     const selectedPhoto = photos.find(photo => photo.id === Number(imageId));
-    this.setState({ selectedPhoto });
+    setSelectedPhoto(selectedPhoto);
+
+    toggleModal();
+  };
 
-    this.toggleModal();
+  const toggleModal = () => {
+    setShowModal(prevShowModal => !prevShowModal);
   };
 
-  render() {
-    const { loading, photos, showModal, selectedPhoto, btnLoadMore } =
-      this.state;
-
-    return (
-      <div>
-        <Searchbar onSubmitSearchBar={this.onSubmitSearchBar} />
-        {loading && <Loader />}
-
-        <ImageGallery
-          photos={photos}
-          onClickImageItem={this.onClickOpenModal}
-        />
-
-        {photos.length !== 0 && btnLoadMore && (
-          <Button onClickRender={this.onClickRender} />
-        )}
-        {showModal && (
-          <Modal
-            selectedPhoto={selectedPhoto}
-            onCloseModal={this.toggleModal}
-          />
-        )}
-      </div>
-    );
-  }
+  return (
+    <>
+      <Searchbar onSubmitSearchBar={onSubmitSearchBar} />
+      {loading && <Loader />}
+
+      <ImageGallery photos={photos} onClickImageItem={onClickOpenModal} />
+
+      {photos.length !== 0 && btnLoadMore && (
+        <Button onClickRender={onClickRender} />
+      )}
+      {showModal && (
+        <Modal selectedPhoto={selectedPhoto} onCloseModal={toggleModal} />
+      )}
+    </>
+  );
 }
 
 export default App;
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
@@ -1,4 +1,4 @@
-import { ButtonStyle, WrapperButton } from './Button.styles';
+import { ButtonStyle, WrapperButton } from './Button.styled';
 
 
 const Button = ({ onClickRender }) => (

diff --git a/src/components/Button/Button.styles.js → src/components/Button/Button.styled.js b/src/components/Button/Button.styles.js → src/components/Button/Button.styled.js
diff --git a/src/components/ImageGallery/ImageGallery.jsx b/src/components/ImageGallery/ImageGallery.jsx
@@ -1,4 +1,4 @@
-import { Gallery } from './ImageGallery.styles';
+import { Gallery } from './ImageGallery.styled';
 import ImageGalleryItem from '../ImageGalleryItem/ImageGalleryItem';
 
 const ImageGallery = ({ photos, onClickImageItem }) => (

diff --git a/...nents/ImageGallery/ImageGallery.styles.js → ...nents/ImageGallery/ImageGallery.styled.js b/...nents/ImageGallery/ImageGallery.styles.js → ...nents/ImageGallery/ImageGallery.styled.js
diff --git a/src/components/ImageGalleryItem/ImageGalleryItem.jsx b/src/components/ImageGalleryItem/ImageGalleryItem.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { GalleryItem, GalleryImage } from './ImageGalleryItem.styles';
+import { GalleryItem, GalleryImage } from './ImageGalleryItem.styled';
 
 
 const ImageGalleryItem = ({id, smallUrl, tags, onClickImageItem }) => (

diff --git a/...ageGalleryItem/ImageGalleryItem.styles.js → ...ageGalleryItem/ImageGalleryItem.styled.js b/...ageGalleryItem/ImageGalleryItem.styles.js → ...ageGalleryItem/ImageGalleryItem.styled.js
diff --git a/src/components/Loader/Loader.styles.js b/src/components/Loader/Loader.styles.js
diff --git a/src/index.css b/src/index.css
@@ -31,37 +31,3 @@ img {
 
 
 
-
-
-
-
-
-
-/*
-* Стили компонента Buton (Load more)
-*/
-.Button {
-  padding: 8px 16px;
-  border-radius: 2px;
-  background-color: #3f51b5;
-  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  text-align: center;
-  display: inline-block;
-  color: #fff;
-  border: 0;
-  text-decoration: none;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 18px;
-  line-height: 24px;
-  font-style: normal;
-  font-weight: 500;
-  min-width: 180px;
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-}
-
-.Button:hover,
-.Button:focus {
-  background-color: #303f9f;
-}