+

Author: InnaAnatoliivna

package-lock.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "nanoid": "^4.0.2",
+    "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-loader-spinner": "^5.3.4",

package.json

@@ -1,12 +1,13 @@
+import React from 'react';
 import { Component } from 'react';
 import { ToastContainer } from 'react-toastify';
 import Searchbar from './searchbar/searchbar';
-import api from 'components/service-api/pixabay-api';
+import api from './service-api/pixabay-api';
 import { toast } from 'react-toastify';
-import ImageGallery from 'components/imageGallery/imageGallery';
-import Button from 'components/button/button';
-import Loader from 'components/loader/loader';
-import Modal from 'components/modal/modal';
+import ImageGallery from './imageGallery/imageGallery';
+import Button from './button/button';
+import Loader from './loader/loader';
+import Modal from './modal/modal';
 export class App extends Component {
   state = {
     searchQuery: '',
@@ -17,6 +18,7 @@ export class App extends Component {
     showLoader: false,
     showModal: false,
     selectedImage: null,
+    galleryRef: React.createRef(),
   }// we got state 'searchQuery' from 'searchbar.js' (searchQueryOriginal=searchQuery)
 
   async componentDidUpdate(prevProps, prevState) {
@@ -37,7 +39,7 @@ export class App extends Component {
           showLoadMore: data.totalHits > 12 * currentPage,
           page: currentPage
         });
-        !data.totalHits ? toast.error("No results found. Please try again!") : toast.success(`Hooray! We found ${data.totalHits} images`);
+        !data.totalHits && toast.error("No results found. Please try again!");// : toast.success(`Hooray! We found ${data.totalHits} images`);
         nextPage >= totalPage && toast.warning("We're sorry, but you've reached the end of search results!");
       } catch (error) {
         this.setState({ error });

src/components/App.jsx

@@ -1,4 +1,7 @@
+import PropTypes from 'prop-types';
+
 const Button = ({ children, handleClick }) => {
+
     return (
         <div className="btn-wrapper">
             <button
@@ -10,4 +13,8 @@ const Button = ({ children, handleClick }) => {
     )
 }
 
-export default Button;
+export default Button;
+
+Button.propTypes = {
+    handleClick: PropTypes.func,
+}

src/components/button/button.js

@@ -1,22 +1,27 @@
+import PropTypes from 'prop-types';
 import ImageGalleryItem from 'components/imageGalleryItem/imageGalleryItem';
 
-const ImageGallery = ({ arrayResults, onOpenModal, getFilmId }) => {
-
+const ImageGallery = ({ arrayResults, onOpenModal, ref }) => {
     return (
-        <ul className="ImageGallery">
+        <ul className="ImageGallery" id='gallery'>
             {arrayResults.map(image => {
                 return (
                     <ImageGalleryItem
                         key={image.id}
                         imageId={image.id}
                         imageWeb={image.webformatURL}
                         onOpenModal={onOpenModal}
-                        getFilmId={getFilmId}
                     />
                 )
             })}
         </ul>
     )
 }
 
-export default ImageGallery;
+export default ImageGallery;
+
+ImageGallery.propTypes = {
+    arrayResults: PropTypes.array,
+    onOpenModal: PropTypes.func,
+    key: PropTypes.number,
+}

src/components/imageGallery/imageGallery.js

@@ -1,4 +1,6 @@
-const ImageGalleryItem = ({ imageWeb, imageId, onOpenModal, getFilmId }) => {
+import PropTypes from 'prop-types';
+
+const ImageGalleryItem = ({ imageWeb, imageId, onOpenModal }) => {
     const handleClick = () => {
         onOpenModal(imageId)
     };
@@ -14,3 +16,9 @@ const ImageGalleryItem = ({ imageWeb, imageId, onOpenModal, getFilmId }) => {
 };
 
 export default ImageGalleryItem;
+
+ImageGalleryItem.propTypes = {
+    imageWeb: PropTypes.string,
+    onOpenModal: PropTypes.func,
+    imageId: PropTypes.number,
+}

src/components/imageGalleryItem/imageGalleryItem.js

@@ -1,6 +1,6 @@
 import { Component } from "react";
 import { createPortal } from "react-dom";
-
+import PropTypes from 'prop-types';
 class Modal extends Component {
     modalRoot = document.querySelector('#root-modal');
     // { children, onBackdropClose, onKeydownClose } -->>>>props
@@ -20,4 +20,8 @@ class Modal extends Component {
         )
     }
 }
-export default Modal;
+export default Modal;
+
+Modal.propTypes = {
+    onSubmit: PropTypes.func,
+}

src/components/modal/modal.js

@@ -2,6 +2,7 @@ import { Component } from 'react';
 import '../../index.css'
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import PropTypes from 'prop-types';
 
 class Searchbar extends Component {
     state = {
@@ -45,3 +46,7 @@ class Searchbar extends Component {
     }
 }
 export default Searchbar;
+
+Searchbar.propTypes = {
+    onSubmit: PropTypes.func
+}