feat(search): add image search functionality

Author: Valik3201

src/components/App.jsx

@@ -1,6 +1,7 @@
 import { Component } from 'react';
-import { Searchbar } from './Searchbar';
+import Searchbar from './Searchbar';
 import { ImageGallery } from './ImageGallery';
+import ImagePortalWelcome from './ImagePortalWelcome';
 
 import axios from 'axios';
 
@@ -19,20 +20,38 @@ class App extends Component {
     };
   }
 
-  async componentDidMount() {
-    const response = await axios.get(
-      `/?q=cat&page=1&key=${API_KEY}&image_type=photo&orientation=horizontal&per_page=12`
-    );
-    this.setState({ images: response.data.hits });
+  getImages = async searchQuery => {
+    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 });
+    } catch (error) {
+      console.error('Error searching for images:', error);
+    } finally {
+      // for Loader
+    }
+  };
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.searchQuery !== this.props.searchQuery) {
+      this.getImages(this.props.searchQuery);
+    }
   }
 
   render() {
     const { images } = this.state;
 
     return (
       <>
-        <Searchbar />
-        <div>{images.length > 0 ? <ImageGallery images={images} /> : null}</div>
+        <Searchbar onSearch={this.getImages} />
+        <div>
+          {images.length > 0 ? (
+            <ImageGallery images={images} />
+          ) : (
+            <ImagePortalWelcome />
+          )}
+        </div>
       </>
     );
   }

src/components/Searchbar.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Component } from 'react';
 import {
   Button,
   Container,
@@ -10,68 +10,98 @@ import {
   ToggleButton,
 } from 'react-bootstrap';
 
-export const Searchbar = () => {
-  const [theme, setTheme] = useState('light');
+class Searchbar extends Component {
+  constructor(props) {
+    super(props);
 
-  const radios = [
-    { name: 'Light', value: 'light' },
-    { name: 'Dark', value: 'dark' },
-  ];
+    this.state = {
+      theme: 'light',
+      searchQuery: '',
+    };
 
-  const handleThemeChange = selectedTheme => {
-    setTheme(selectedTheme);
+    this.radios = [
+      { name: 'Light', value: 'light' },
+      { name: 'Dark', value: 'dark' },
+    ];
+  }
+
+  handleThemeChange = selectedTheme => {
+    this.setState({ theme: selectedTheme });
 
     document.documentElement.setAttribute('data-bs-theme', selectedTheme);
   };
 
-  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>
+  handleInputChange = e => {
+    this.setState({ searchQuery: e.target.value });
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+
+    const { onSearch } = this.props;
+    const { searchQuery } = this.state;
+
+    onSearch(searchQuery);
+  };
+
+  render() {
+    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>
+
+              <ButtonGroup
+                as={Col}
+                xs={2}
+                md={{ order: 'last' }}
+                className="mb-2 mb-md-0 d-flex justify-content-end"
+              >
+                {this.radios.map((radio, idx) => (
+                  <ToggleButton
+                    key={idx}
+                    id={`theme-radio-${idx}`}
+                    type="radio"
+                    variant={`outline-${theme === 'light' ? 'dark' : 'light'}`}
+                    name="theme"
+                    value={radio.value}
+                    checked={theme === radio.value}
+                    onChange={() => this.handleThemeChange(radio.value)}
+                  >
+                    {radio.name}
+                  </ToggleButton>
+                ))}
+              </ButtonGroup>
 
-            <ButtonGroup
-              as={Col}
-              xs={2}
-              md={{ order: 'last' }}
-              className="mb-2 mb-md-0 d-flex justify-content-end"
-            >
-              {radios.map((radio, idx) => (
-                <ToggleButton
-                  key={idx}
-                  id={`theme-radio-${idx}`}
-                  type="radio"
-                  variant={`outline-${theme === 'light' ? 'dark' : 'light'}`}
-                  name="theme"
-                  value={radio.value}
-                  checked={theme === radio.value}
-                  onChange={() => handleThemeChange(radio.value)}
-                >
-                  {radio.name}
-                </ToggleButton>
-              ))}
-            </ButtonGroup>
+              <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>
+    );
+  }
+}
 
-            <Form className="d-flex" as={Col} xs={12} md={6}>
-              <Form.Control
-                type="text"
-                autoComplete="off"
-                autoFocus
-                placeholder="Search images and photos"
-                className="me-2"
-                aria-label="Search"
-                bg={theme}
-              />
-              <Button type="submit" variant="primary">
-                Search
-              </Button>
-            </Form>
-          </Row>
-        </Container>
-      </Navbar>
-    </div>
-  );
-};
+export default Searchbar;