diff --git a/package-lock.json b/package-lock.json index 4213408..0b27a23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "bootstrap": "^5.3.1", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-loader-spinner": "^5.4.5", "react-scripts": "^5.0.1", "styled-components": "^6.0.7", "web-vitals": "^2.1.3" @@ -2612,6 +2613,11 @@ } } }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, "node_modules/@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", @@ -5440,6 +5446,21 @@ "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", + "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.22.5", + "@babel/helper-module-imports": "^7.22.5", + "@babel/plugin-syntax-jsx": "^7.22.5", + "lodash": "^4.17.21", + "picomatch": "^2.3.1" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, "node_modules/babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -13506,6 +13527,78 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-loader-spinner": { + "version": "5.4.5", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-5.4.5.tgz", + "integrity": "sha512-32f+sb/v2tnNfyvnCCOS4fpyVHsGXjSyNo6QLniHcaj1XjKLxx14L2z0h6szRugOL8IEJ+53GPwNAdbkDqmy4g==", + "dependencies": { + "react-is": "^18.2.0", + "styled-components": "^5.3.5", + "styled-tools": "^1.7.2" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-loader-spinner/node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "node_modules/react-loader-spinner/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "engines": { + "node": ">=4" + } + }, + "node_modules/react-loader-spinner/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/react-loader-spinner/node_modules/styled-components": { + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, + "node_modules/react-loader-spinner/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14880,6 +14973,11 @@ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" }, + "node_modules/styled-tools": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/styled-tools/-/styled-tools-1.7.2.tgz", + "integrity": "sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg==" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -18425,6 +18523,11 @@ "@emotion/utils": "^1.2.1" } }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, "@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", @@ -20458,6 +20561,18 @@ "@babel/helper-define-polyfill-provider": "^0.4.2" } }, + "babel-plugin-styled-components": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", + "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.22.5", + "@babel/helper-module-imports": "^7.22.5", + "@babel/plugin-syntax-jsx": "^7.22.5", + "lodash": "^4.17.21", + "picomatch": "^2.3.1" + } + }, "babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -26145,6 +26260,58 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-loader-spinner": { + "version": "5.4.5", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-5.4.5.tgz", + "integrity": "sha512-32f+sb/v2tnNfyvnCCOS4fpyVHsGXjSyNo6QLniHcaj1XjKLxx14L2z0h6szRugOL8IEJ+53GPwNAdbkDqmy4g==", + "requires": { + "react-is": "^18.2.0", + "styled-components": "^5.3.5", + "styled-tools": "^1.7.2" + }, + "dependencies": { + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==" + }, + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "styled-components": { + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -27158,6 +27325,11 @@ } } }, + "styled-tools": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/styled-tools/-/styled-tools-1.7.2.tgz", + "integrity": "sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg==" + }, "stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", diff --git a/package.json b/package.json index c2a727a..4ac1edb 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "bootstrap": "^5.3.1", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-loader-spinner": "^5.4.5", "react-scripts": "^5.0.1", "styled-components": "^6.0.7", "web-vitals": "^2.1.3" diff --git a/src/components/App.jsx b/src/components/App.jsx index 4aa6b8f..a056bd6 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -9,6 +9,7 @@ import Searchbar from './Searchbar/Searchbar' // import axios from "axios"; import getAllPhotos from '../api/api' import { Container } from '@mui/material'; + import Loader from './Loader/Loader'; class App extends Component { @@ -113,6 +114,7 @@ render() { {/* */} + {isLoading && } {gallery && gallery.length > 0 && } {currentPage < quantityPage && ( diff --git a/src/components/FormCreatePhotos/FormCreatePhotos.jsx b/src/components/FormCreatePhotos/FormCreatePhotos.jsx deleted file mode 100644 index d5eda11..0000000 --- a/src/components/FormCreatePhotos/FormCreatePhotos.jsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, {Component} from 'react' -import TextField from '@mui/material/TextField'; -import Button from '@mui/material/Button' - -class FormCreatePhotos extends Component{ - - state = { value: '' } - - handleChange = ({ target: { value } }) => { - this.setState({ value }) - console.log(value); - console.log(this.state.value); - } - - - - handleSubmit = (e) => { - e.preventDefault() - this.props.submit(this.state.value) - } - - render() { - - return ( - -
-
- - - -
- - {/* */} - -
- - - - - ) -} -} -export default FormCreatePhotos; - -// onClick={handleClick} -// state = { value: '' } - -// handleChange = ({ target: { value } }) => { -// this.setState({ value }) -// } - -// handleSubmit = (e) => { -// e.preventDefault() -// this.props.submit(this.state.value) -// } - -// render() { -// return ( - -// ) -// } -// } - diff --git a/src/components/ImageGallery/ImageGallery.jsx b/src/components/ImageGallery/ImageGallery.jsx index 50f97b9..4ee8da3 100644 --- a/src/components/ImageGallery/ImageGallery.jsx +++ b/src/components/ImageGallery/ImageGallery.jsx @@ -1,6 +1,7 @@ import ImageGalleryItem from 'components/ImageGalleryItem/ImageGalleryItem' import css from './ImageGallery.module.css' + const ImageGallery = ({ hits }) => { console.log('hits in ImageGallery :>> ', hits); diff --git a/src/components/ImageGalleryItem/ImageGalleryItem.jsx b/src/components/ImageGalleryItem/ImageGalleryItem.jsx index 5989e45..1b9f7cc 100644 --- a/src/components/ImageGalleryItem/ImageGalleryItem.jsx +++ b/src/components/ImageGalleryItem/ImageGalleryItem.jsx @@ -40,7 +40,6 @@ return( aria-describedby="modal-modal-description" > - Image diff --git a/src/components/Loader/Loader.jsx b/src/components/Loader/Loader.jsx new file mode 100644 index 0000000..fe3b2dc --- /dev/null +++ b/src/components/Loader/Loader.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { ColorRing } from 'react-loader-spinner'; +import css from './Loader.module.css' + +const Loader = () => { + return ( +
+ +
+ ); +}; + +export default Loader; \ No newline at end of file diff --git a/src/components/Loader/Loader.module.css b/src/components/Loader/Loader.module.css new file mode 100644 index 0000000..2c019d4 --- /dev/null +++ b/src/components/Loader/Loader.module.css @@ -0,0 +1,6 @@ +.loaderWrap{ + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} \ No newline at end of file diff --git a/src/components/Searchbar/Searchbar.jsx b/src/components/Searchbar/Searchbar.jsx index 45ee6b1..ddfac09 100644 --- a/src/components/Searchbar/Searchbar.jsx +++ b/src/components/Searchbar/Searchbar.jsx @@ -3,8 +3,13 @@ import { Component } from 'react' // import ImageGalleryItem from 'components/ImageGalleryItem/ImageGalleryItem' // import FormCreatePhotos from 'components/FormCreatePhotos/FormCreatePhotos' import TextField from '@mui/material/TextField'; -import Button from '@mui/material/Button' +// import Box from '@mui/material/Box'; +// import Button from '@mui/material/Button' import css from './Searchbar.module.css' + +import YoutubeSearchedForIcon from '@mui/icons-material/YoutubeSearchedFor'; + import InputAdornment from '@mui/material/InputAdornment'; +// import AccountCircle from '@mui/icons-material/AccountCircle'; // import { wait } from '@testing-library/user-event/dist/utils'; // import {TextField} from './Searchbar.styled' export default class Searchbar extends Component { @@ -34,15 +39,14 @@ export default class Searchbar extends Component { return (
- +
- + */} - - + + + InputProps={{ + startAdornment: ( + + + + ), + }} + + /> + {/* */} - + + {/* */} diff --git a/src/components/Searchbar/Searchbar.module.css b/src/components/Searchbar/Searchbar.module.css index d07822e..39ad18c 100644 --- a/src/components/Searchbar/Searchbar.module.css +++ b/src/components/Searchbar/Searchbar.module.css @@ -1,3 +1,4 @@ .searchbar{ background-color: rgb(177, 248, 225); + text-align: center; } \ No newline at end of file