diff --git a/pairent_frontend_react/package.json b/pairent_frontend_react/package.json index a84c997..bc7a23b 100644 --- a/pairent_frontend_react/package.json +++ b/pairent_frontend_react/package.json @@ -12,6 +12,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.11.0", "react-select": "^5.7.3", + "react-spinners": "^0.13.8", "styled-components": "^6.0.0-rc.1", "swiper": "^9.2.4" }, diff --git a/pairent_frontend_react/src/pages/IndexPage/index.jsx b/pairent_frontend_react/src/pages/IndexPage/index.jsx index 975e2f1..c4c7846 100644 --- a/pairent_frontend_react/src/pages/IndexPage/index.jsx +++ b/pairent_frontend_react/src/pages/IndexPage/index.jsx @@ -13,6 +13,7 @@ import 'swiper/css/navigation'; // swiper customization import './swiper.css'; import ApartamentService from "../../API/ApartamentService"; +import { HashLoader } from 'react-spinners'; const SVGIcon = styled(ISVGIcon)` @@ -27,10 +28,6 @@ const Title = styled.p` text-shadow: 0 2px 1px #00000020; `; -const HighlightWord = styled.span` - color: cornflowerblue; -`; - const SwiperImage = styled.div` background: url(${props => props.src ? props.src : ''}); background-repeat: no-repeat; @@ -94,13 +91,7 @@ const SubmitBtn = styled.button` background: royalblue; padding: 10px; border-radius: 8px; - color: #f9f9f9; - font-weight: 700; - float: right; - - &:active { - background: #3759bf - } + color: #f9f9f9;W `; const SearchBarFilter = styled.div` @@ -166,6 +157,12 @@ const IndexPageRoot = styled.div` margin: 50px auto `; +const Splash = styled.h3` + font-weight: 500; + margin: 48px 0; + text-align: center; +`; + const FiltersForm = () => { const apart_sizes = [ @@ -300,12 +297,14 @@ export default class IndexPage extends React.Component { apartments: [], pageSize: 10, page: 0, - data_loaded: false + data_loaded: false, + load_err: false }; ApartamentService.getAll(100).then(data => { - globalThis.data = data.data.results; this.setState({apartments: data.data.results, data_loaded: true}); + }).catch(err => { + this.setState({data_loaded: true, apartments: [], load_err: err.message}); }); } @@ -338,7 +337,7 @@ export default class IndexPage extends React.Component { Выбор квартиры во - <HighlightWord> Владивостоке</HighlightWord> + <span style={{color: '#0066ff'}}> Владивостоке</span> @@ -347,11 +346,19 @@ export default class IndexPage extends React.Component { { !this.state.data_loaded ? <> -

Данные загружаются, подождите немного

+ Данные загружаются, подождите немного +
+ : null } + { + this.state.load_err ? + Ошибка загрузки данных:
{this.state.load_err}
: + null + } + { [...Array(pages)].map((_, i) => { diff --git a/pairent_frontend_react/yarn.lock b/pairent_frontend_react/yarn.lock index 18bccd4..31a4435 100644 --- a/pairent_frontend_react/yarn.lock +++ b/pairent_frontend_react/yarn.lock @@ -3282,6 +3282,11 @@ react-select@^5.7.3: react-transition-group "^4.3.0" use-isomorphic-layout-effect "^1.1.2" +react-spinners@^0.13.8: + version "0.13.8" + resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc" + integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA== + react-transition-group@^4.3.0: version "4.4.5" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"