Skip to content

Commit 7bf3169

Browse files
Valik3201Valik3201
committed
feat(ui): implement Load More button and update styles
1 parent 09563e7 commit 7bf3169

File tree

4 files changed

+104
-58
lines changed

4 files changed

+104
-58
lines changed

‎src/components/App.jsx

Lines changed: 54 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Component } from 'react';
22
import Searchbar from './Searchbar';
33
import { ImageGallery } from './ImageGallery';
44
import ImagePortalWelcome from './ImagePortalWelcome';
5+
import { LoadMoreBtn } from './Button';
56

67
import { Container, Row, Col, Alert } from 'react-bootstrap';
78

@@ -20,22 +21,48 @@ class App extends Component {
2021
this.state = {
2122
images: [],
2223
searchQuery: '',
24+
activePage: 1,
2325
};
2426
}
2527

26-
getImages = async searchQuery => {
28+
getImages = async (searchQuery, activePage) => {
2729
try {
28-
const response = await axios.get(
29-
`/?q=${searchQuery}&page=1&key=${API_KEY}&image_type=photo&orientation=horizontal&per_page=12`
30-
);
31-
this.setState({ images: response.data.hits, searchQuery });
30+
const params = {
31+
q: searchQuery,
32+
page: activePage,
33+
key: API_KEY,
34+
image_type: 'photo',
35+
orientation: 'horizontal',
36+
per_page: 12,
37+
};
38+
39+
const response = await axios.get('/', { params });
40+
41+
this.setState(prevState => ({
42+
images:
43+
searchQuery !== prevState.searchQuery
44+
? response.data.hits
45+
: [...prevState.images, ...response.data.hits],
46+
47+
activePage: searchQuery !== prevState.searchQuery ? 1 : activePage,
48+
49+
searchQuery,
50+
}));
3251
} catch (error) {
33-
console.error('Error searching for images:', error);
52+
console.error('Error searching for images:', error.message);
3453
} finally {
3554
// for Loader
3655
}
3756
};
3857

58+
loadMoreImages = () => {
59+
const { searchQuery, activePage } = this.state;
60+
const nextPage = activePage + 1;
61+
62+
this.getImages(searchQuery, nextPage);
63+
this.setState({ activePage: nextPage });
64+
};
65+
3966
componentDidUpdate(prevProps, prevState) {
4067
if (prevProps.searchQuery !== this.props.searchQuery) {
4168
this.getImages(this.props.searchQuery);
@@ -48,20 +75,28 @@ class App extends Component {
4875
return (
4976
<>
5077
<Searchbar onSearch={this.getImages} />
51-
<Container>
78+
<Container className="d-flex flex-column justify-content-center mb-5 mx-auto">
5279
{images.length > 0 ? (
53-
<Row className="d-flex justify-content-center mb-5 mx-auto">
54-
<Alert
55-
variant="primary"
56-
as={Col}
57-
style={{ width: 'fit-content' }}
58-
>
59-
Showing results for
60-
<span className="fw-bold"> {searchQuery}</span>
61-
</Alert>
62-
63-
<ImageGallery images={images} />
64-
</Row>
80+
<>
81+
<Row>
82+
<Container>
83+
<Row className="justify-content-center text-center">
84+
<Col xs="auto">
85+
<Alert variant="primary">
86+
Showing results for
87+
<span className="fw-bold"> {searchQuery}</span>
88+
</Alert>
89+
</Col>
90+
</Row>
91+
</Container>
92+
</Row>
93+
<Row>
94+
<ImageGallery images={images} />
95+
</Row>
96+
<Row>
97+
<LoadMoreBtn onClick={this.loadMoreImages} />
98+
</Row>
99+
</>
65100
) : (
66101
<ImagePortalWelcome />
67102
)}

‎src/components/Button.jsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Container, Row, Col } from 'react-bootstrap';
2+
import Button from 'react-bootstrap/Button';
3+
4+
export const LoadMoreBtn = ({ onClick }) => {
5+
return (
6+
<Container>
7+
<Row className="justify-content-center mt-3">
8+
<Col xs={12} md="auto">
9+
<Button variant="primary" className="w-100" onClick={onClick}>
10+
Load More
11+
</Button>
12+
</Col>
13+
</Row>
14+
</Container>
15+
);
16+
};

‎src/components/ImagePortalWelcome.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ function ImagePortalWelcome() {
88
<Alert variant="success">
99
<Alert.Heading>Hey, nice to see you!</Alert.Heading>
1010
<p>
11-
Explore over 4.3 million+ high-quality stock images, videos, and
12-
music shared by our talented community. This site is powered by
13-
the Pixabay API, providing you with a vast collection of visuals
14-
for your creative projects.
11+
Explore over 4.3 million+ high-quality stock images shared by
12+
talented community. This site is powered by the Pixabay API,
13+
providing you with a vast collection of visuals for your creative
14+
projects.
1515
</p>
1616
<hr />
1717
<p className="mb-0">

‎src/components/Searchbar.jsx

Lines changed: 30 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -49,20 +49,15 @@ class Searchbar extends Component {
4949
const { theme, searchQuery } = this.state;
5050

5151
return (
52-
<div>
53-
<Navbar bg={theme} variant={theme} fixed="top">
54-
<Container className="justify-content-center pt-1 pb-1">
55-
<Row className="mb-2 mb-md-0 justify-content-between align-items-center w-100">
56-
<Navbar.Brand as={Col} xs={2}>
57-
Image Finder
58-
</Navbar.Brand>
52+
<Navbar bg={theme} variant={theme} fixed="top">
53+
<Container className="justify-content-center pt-1 pb-1">
54+
<Row className="justify-content-between mb-2 mb-md-0 align-items-center w-100">
55+
<Col xs={2} className="ps-0">
56+
<Navbar.Brand>Image Finder</Navbar.Brand>
57+
</Col>
5958

60-
<ButtonGroup
61-
as={Col}
62-
xs={2}
63-
md={{ order: 'last' }}
64-
className="mb-2 mb-md-0 d-flex justify-content-end"
65-
>
59+
<Col xs={2} md={{ order: 'last' }} className="pe-0">
60+
<ButtonGroup className="mb-2 mb-md-0 d-flex justify-content-end">
6661
{this.radios.map((radio, idx) => (
6762
<ToggleButton
6863
key={idx}
@@ -78,29 +73,29 @@ class Searchbar extends Component {
7873
</ToggleButton>
7974
))}
8075
</ButtonGroup>
76+
</Col>
8177

82-
<Col xs={12} md={6}>
83-
<Form onSubmit={this.handleSubmit} className="d-flex">
84-
<Form.Control
85-
type="text"
86-
autoComplete="off"
87-
autoFocus
88-
placeholder="Search images and photos"
89-
className="me-2"
90-
aria-label="Search"
91-
bg={theme}
92-
value={searchQuery}
93-
onChange={this.handleInputChange}
94-
/>
95-
<Button type="submit" variant="primary">
96-
Search
97-
</Button>
98-
</Form>
99-
</Col>
100-
</Row>
101-
</Container>
102-
</Navbar>
103-
</div>
78+
<Col xs={12} md={6} className="ps-0 pe-0">
79+
<Form onSubmit={this.handleSubmit} className="d-flex">
80+
<Form.Control
81+
type="text"
82+
autoComplete="off"
83+
autoFocus
84+
placeholder="Search images and photos"
85+
className="me-2"
86+
aria-label="Search"
87+
bg={theme}
88+
value={searchQuery}
89+
onChange={this.handleInputChange}
90+
/>
91+
<Button type="submit" variant="primary">
92+
Search
93+
</Button>
94+
</Form>
95+
</Col>
96+
</Row>
97+
</Container>
98+
</Navbar>
10499
);
105100
}
106101
}

0 commit comments

Comments
 (0)