image finder final version with style

add loader && style, fixed modal (used react-modal lib)

package.json

@@ -2,13 +2,17 @@
   "name": "react-homework-template",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://goitacademy.github.io/react-homework-template/",
+  "homepage": "https://AsyaDev14.github.io/goit-react-hw-03-image-finder/",
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "basiclightbox": "^5.0.4",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-loader-spinner": "^6.1.0",
+    "react-modal": "^3.16.1",
+    "react-pure-modal": "^2.2.5",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.3"
   },

src/api/api.js

@@ -0,0 +1,10 @@
+const BASE_URL = 'https://pixabay.com/api/';
+const ApiKey = '33816653-3cca4f3926f281165d337bdaa';
+
+export const fetchPicture = (value, page) => {
+  return (
+    fetch(`${BASE_URL}?q=${value}&page=${page}&key=${ApiKey}&image_type=photo&orientation=horizontal&per_page=12`)
+      .then(res => res.json())
+      .then(res => res)
+  );
+};

src/components/App.jsx

@@ -1,16 +1,97 @@
-export const App = () => {
-  return (
-    <div
-      style={{
-        height: '100vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: 40,
-        color: '#010101'
-      }}
-    >
-      React homework template
-    </div>
-  );
+import React, { Component } from "react";
+
+import Modal from 'react-modal';
+import './styles.css';
+import { Searchbar } from "./Searchbar";
+import { ImageGallery } from "./ImageGallery";
+import { Button } from "./Button";
+import { Loader } from "./Loader";
+import { fetchPicture } from "api/api";
+import { ModalWindow } from "./Modal";
+import basicLightbox from 'basiclightbox'; 
+
+//  33816653-3cca4f3926f281165d337bdaa (my API KEY)
+// https://pixabay.com/api/?q=cat&page=1&key=your_key&image_type=photo&orientation=horizontal&per_page=12 (URL-рядок HTTP-запиту)
+// API > [{}] >
+// id - унікальний ідентифікатор
+// webformatURL - посилання на маленьке зображення для списку карток
+// largeImageURL - посилання на велике зображення для модального вікна
+
+// Set the root element for the modal
+Modal.setAppElement('#root');
+
+export class App extends Component {
+  state = {
+    picture: '',
+    page: 1,
+    picArray: [],
+    isLoading: false,
+    isOpen: false,
+    largeImage: ''
+  };
+
+  modalOpen = (image) => {
+    this.setState({
+      isOpen: true,
+      largeImage: image
+    })
+  }
+
+  modalСlose = () => {
+    this.setState({
+      isOpen: false
+    })
+  }
+
+  formSubmit = (event) => {
+  event.preventDefault();
+  const value = event.target.elements[1].value;
+  this.setState({
+    picture: value,
+    isLoading: true,
+  });
+
+  setTimeout(() => {
+    fetchPicture(value, this.state.page)
+      .then(res => {
+        this.setState({
+          picArray: res.hits,
+          isLoading: false,
+        });
+      })
+  }, 1000);
 };
+
+  handleClick = () => {
+    fetchPicture(this.state.picture, this.state.page + 1)
+      .then(res => {
+        this.setState(prev => ({
+          picArray: [...prev.picArray, ...res.hits],
+          page: prev.page + 1,
+        }));
+      });
+  }
+  render() {
+    return (
+      <>
+        <Searchbar onSubmit={this.formSubmit} />
+        <ImageGallery
+          picArray={this.state.picArray}
+          modalOpen={this.modalOpen}
+        />
+        {
+          Boolean(this.state.picArray.length) && (
+            <Button handleClick={this.handleClick} />
+          )
+        }
+        <Loader isLoading={this.state.isLoading} />
+        <ModalWindow
+          isOpen={this.state.isOpen}
+          closeModal={this.modalСlose}
+          largeImage={this.state.largeImage}
+        />
+      </>
+    )
+  }
+};
+

src/components/Button.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Button = ({handleClick}) => {
+  return (
+    <button type="button" className="Button" onClick={handleClick}>Load more</button>
+  )
+}

src/components/ImageGallery.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { ImageGalleryItem } from "./ImageGalleryItem";
+
+export const ImageGallery = ({picArray, modalOpen}) => {
+  // const { picArray } = props;
+  return (
+    <ul className="gallery">
+      {picArray.map(({id, webformatURL, largeImageURL}) => (
+        <ImageGalleryItem
+          key={id}
+          webformatURL={webformatURL}
+          modalOpen={modalOpen}
+          largeImageURL={largeImageURL}
+        />
+      ))}
+    </ul>
+  )
+}

src/components/ImageGalleryItem.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export const ImageGalleryItem = ({ webformatURL, modalOpen, largeImageURL }) => {
+
+  return (
+    <li  className="gallery-item" onClick={() => modalOpen(largeImageURL)}>
+      <img src={webformatURL} alt="" className="ImageGalleryItem-image" />
+    </li>
+  )
+};
+

src/components/Loader.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { TailSpin } from 'react-loader-spinner';
+
+export const Loader = ({isLoading}) => {
+  return (
+    <TailSpin
+      height="80"
+      width="80"
+      color="#4fa94d"
+      ariaLabel="tail-spin-loading"
+      radius="1"
+      wrapperStyle={{}}
+      className={true}
+      wrapperClass="loader"
+      visible={isLoading}
+    />
+  )
+}
+

src/components/Modal.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import Modal from 'react-modal';
+
+export const ModalWindow = ({isOpen, closeModal, largeImage}) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={closeModal}
+      className="Modal"
+    >
+      <img src={largeImage} className="largeImg" alt=""/>
+    </Modal>
+  )
+}
+
+

src/components/Searchbar.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export const Searchbar =({onSubmit}) => {
+    return (
+      <>
+        <header className="searchbar">
+          <form className="form" onSubmit={onSubmit}>
+            <button type="submit" className="button">
+              <span className="button-label">Search</span>
+            </button>
+
+            <input
+              className="input"
+              type="text"
+              autoComplete="off"
+              autoFocus
+              placeholder="Search images and photos"
+            />
+          </form>
+        </header>
+      </>
+    )
+}
+