feat(ui): implement Load More button and update styles

Valik3201 · Jan 27, 2024 · 7bf3169 · 7bf3169
1 parent 09563e7
commit 7bf3169
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 58 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -2,6 +2,7 @@ import { Component } from 'react';
 import Searchbar from './Searchbar';
 import { ImageGallery } from './ImageGallery';
 import ImagePortalWelcome from './ImagePortalWelcome';
+import { LoadMoreBtn } from './Button';
 
 import { Container, Row, Col, Alert } from 'react-bootstrap';
 
@@ -20,22 +21,48 @@ class App extends Component {
     this.state = {
       images: [],
       searchQuery: '',
+      activePage: 1,
     };
   }
 
-  getImages = async searchQuery => {
+  getImages = async (searchQuery, activePage) => {
     try {
-      const response = await axios.get(
-        `/?q=${searchQuery}&page=1&key=${API_KEY}&image_type=photo&orientation=horizontal&per_page=12`
-      );
-      this.setState({ images: response.data.hits, searchQuery });
+      const params = {
+        q: searchQuery,
+        page: activePage,
+        key: API_KEY,
+        image_type: 'photo',
+        orientation: 'horizontal',
+        per_page: 12,
+      };
+
+      const response = await axios.get('/', { params });
+
+      this.setState(prevState => ({
+        images:
+          searchQuery !== prevState.searchQuery
+            ? response.data.hits
+            : [...prevState.images, ...response.data.hits],
+
+        activePage: searchQuery !== prevState.searchQuery ? 1 : activePage,
+
+        searchQuery,
+      }));
     } catch (error) {
-      console.error('Error searching for images:', error);
+      console.error('Error searching for images:', error.message);
     } finally {
       // for Loader
     }
   };
 
+  loadMoreImages = () => {
+    const { searchQuery, activePage } = this.state;
+    const nextPage = activePage + 1;
+
+    this.getImages(searchQuery, nextPage);
+    this.setState({ activePage: nextPage });
+  };
+
   componentDidUpdate(prevProps, prevState) {
     if (prevProps.searchQuery !== this.props.searchQuery) {
       this.getImages(this.props.searchQuery);
@@ -48,20 +75,28 @@ class App extends Component {
     return (
       <>
         <Searchbar onSearch={this.getImages} />
-        <Container>
+        <Container className="d-flex flex-column justify-content-center mb-5 mx-auto">
           {images.length > 0 ? (
-            <Row className="d-flex justify-content-center mb-5 mx-auto">
-              <Alert
-                variant="primary"
-                as={Col}
-                style={{ width: 'fit-content' }}
-              >
-                Showing results for
-                <span className="fw-bold"> {searchQuery}</span>
-              </Alert>
-
-              <ImageGallery images={images} />
-            </Row>
+            <>
+              <Row>
+                <Container>
+                  <Row className="justify-content-center text-center">
+                    <Col xs="auto">
+                      <Alert variant="primary">
+                        Showing results for
+                        <span className="fw-bold"> {searchQuery}</span>
+                      </Alert>
+                    </Col>
+                  </Row>
+                </Container>
+              </Row>
+              <Row>
+                <ImageGallery images={images} />
+              </Row>
+              <Row>
+                <LoadMoreBtn onClick={this.loadMoreImages} />
+              </Row>
+            </>
           ) : (
             <ImagePortalWelcome />
           )}

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -0,0 +1,16 @@
+import { Container, Row, Col } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+
+export const LoadMoreBtn = ({ onClick }) => {
+  return (
+    <Container>
+      <Row className="justify-content-center mt-3">
+        <Col xs={12} md="auto">
+          <Button variant="primary" className="w-100" onClick={onClick}>
+            Load More
+          </Button>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
diff --git a/src/components/ImagePortalWelcome.jsx b/src/components/ImagePortalWelcome.jsx
@@ -8,10 +8,10 @@ function ImagePortalWelcome() {
           <Alert variant="success">
             <Alert.Heading>Hey, nice to see you!</Alert.Heading>
             <p>
-              Explore over 4.3 million+ high-quality stock images, videos, and
-              music shared by our talented community. This site is powered by
-              the Pixabay API, providing you with a vast collection of visuals
-              for your creative projects.
+              Explore over 4.3 million+ high-quality stock images shared by
+              talented community. This site is powered by the Pixabay API,
+              providing you with a vast collection of visuals for your creative
+              projects.
             </p>
             <hr />
             <p className="mb-0">

diff --git a/src/components/Searchbar.jsx b/src/components/Searchbar.jsx
@@ -49,20 +49,15 @@ class Searchbar extends Component {
     const { theme, searchQuery } = this.state;
 
     return (
-      <div>
-        <Navbar bg={theme} variant={theme} fixed="top">
-          <Container className="justify-content-center pt-1 pb-1">
-            <Row className="mb-2 mb-md-0 justify-content-between align-items-center w-100">
-              <Navbar.Brand as={Col} xs={2}>
-                Image Finder
-              </Navbar.Brand>
+      <Navbar bg={theme} variant={theme} fixed="top">
+        <Container className="justify-content-center pt-1 pb-1">
+          <Row className="justify-content-between mb-2 mb-md-0 align-items-center w-100">
+            <Col xs={2} className="ps-0">
+              <Navbar.Brand>Image Finder</Navbar.Brand>
+            </Col>
 
-              <ButtonGroup
-                as={Col}
-                xs={2}
-                md={{ order: 'last' }}
-                className="mb-2 mb-md-0 d-flex justify-content-end"
-              >
+            <Col xs={2} md={{ order: 'last' }} className="pe-0">
+              <ButtonGroup className="mb-2 mb-md-0 d-flex justify-content-end">
                 {this.radios.map((radio, idx) => (
                   <ToggleButton
                     key={idx}
@@ -78,29 +73,29 @@ class Searchbar extends Component {
                   </ToggleButton>
                 ))}
               </ButtonGroup>
+            </Col>
 
-              <Col xs={12} md={6}>
-                <Form onSubmit={this.handleSubmit} className="d-flex">
-                  <Form.Control
-                    type="text"
-                    autoComplete="off"
-                    autoFocus
-                    placeholder="Search images and photos"
-                    className="me-2"
-                    aria-label="Search"
-                    bg={theme}
-                    value={searchQuery}
-                    onChange={this.handleInputChange}
-                  />
-                  <Button type="submit" variant="primary">
-                    Search
-                  </Button>
-                </Form>
-              </Col>
-            </Row>
-          </Container>
-        </Navbar>
-      </div>
+            <Col xs={12} md={6} className="ps-0 pe-0">
+              <Form onSubmit={this.handleSubmit} className="d-flex">
+                <Form.Control
+                  type="text"
+                  autoComplete="off"
+                  autoFocus
+                  placeholder="Search images and photos"
+                  className="me-2"
+                  aria-label="Search"
+                  bg={theme}
+                  value={searchQuery}
+                  onChange={this.handleInputChange}
+                />
+                <Button type="submit" variant="primary">
+                  Search
+                </Button>
+              </Form>
+            </Col>
+          </Row>
+        </Container>
+      </Navbar>
     );
   }
 }