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 &&
)}
>