diff --git a/src/components/App.jsx b/src/components/App.jsx index c0f24c3..c5a0584 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -4,6 +4,8 @@ import { ImageGallery } from './ImageGallery'; import ImagePortalWelcome from './ImagePortalWelcome'; import { LoadMoreBtn } from './Button'; import { SearchResultInfo } from './SearchResultInfo'; +import ErrorAlert from './ErrorAlert'; +import NoResultsAlert from './NoResultsAlert'; import { Container, Row } from 'react-bootstrap'; @@ -25,6 +27,7 @@ class App extends Component { searchQuery: '', activePage: 1, isLoading: false, + error: null, }; } @@ -56,7 +59,9 @@ class App extends Component { searchQuery, })); } catch (error) { - console.error('Error searching for images:', error.message); + this.setState({ + error: error.message, + }); } finally { this.setState({ isLoading: false, @@ -79,14 +84,15 @@ class App extends Component { } render() { - const { images, searchQuery, isLoading } = this.state; + const { images, searchQuery, isLoading, error } = this.state; return ( <> {isLoading && } - {images.length > 0 ? ( + {error && } + {images.length > 0 && !error ? ( <> @@ -98,8 +104,12 @@ class App extends Component { + ) : images.length === 0 && searchQuery && !error ? ( + + + ) : ( - + !error && )}