Skip to content

Mysolaar/goit-react-hw-03-image-finder

Repository files navigation

A React application that provides an image search functionality using the API from a third-party service.

Application contains several components such as Searchbar, ImageGallery, Loader, Button, and Modal, which are imported at the beginning of the code.

The main functionality of the app is in the App component that manages the state of the application. It initializes the state with several properties like status, query, page, name, modalAlt, showModal, modalImg, and error. These properties help to keep track of the current state of the application.

The App component also includes several methods like componentDidUpdate, handleSubmitInput, handleClickImg, handleClickBtn, and toggleModal, which are used to update the state of the application based on user interaction.

The componentDidUpdate method is called whenever the component is updated and is responsible for fetching data from the API and updating the state of the application based on the response.

The handleSubmitInput method is called when a user submits a search query, and it updates the state with the new query.

The handleClickImg method is called when a user clicks on an image in the image gallery, and it updates the state to show the modal with the larger version of the clicked image.

The handleClickBtn method is called when a user clicks on the "Load More" button, and it updates the state to load more images from the API.

The toggleModal method is called when a user clicks on the modal to close it, and it updates the state to hide the modal.

The render method of the App component returns different JSX based on the current status of the application. If the status is "idle," the search bar is rendered, if the status is "pending," the loader and the image gallery are rendered while waiting for the API response, if the status is "rejected," an error message is displayed, and if the status is "resolved," the search bar, image gallery, and load more button are displayed along with the modal to view larger images.