diff --git a/pairent_frontend_react/public/images/apartment.png b/pairent_frontend_react/public/images/apartment.png new file mode 100644 index 0000000..707d1bf Binary files /dev/null and b/pairent_frontend_react/public/images/apartment.png differ diff --git a/pairent_frontend_react/src/App.js b/pairent_frontend_react/src/App.js index de151da..38725c4 100644 --- a/pairent_frontend_react/src/App.js +++ b/pairent_frontend_react/src/App.js @@ -1,17 +1,22 @@ import React from 'react'; +import { BrowserRouter } from 'react-router-dom'; + import Header from './components/Header/Header'; +import AppRouter from './components/AppRouter/AppRouter'; import Footer from './components/Footer/Footer'; -import Favorites from './components/Favorites/Favorites'; + import './App.css'; function App() { return ( <> -
-
-
- -
+ +
+
+
+ +
+
); diff --git a/pairent_frontend_react/src/components/AppRouter/AppRouter.jsx b/pairent_frontend_react/src/components/AppRouter/AppRouter.jsx new file mode 100644 index 0000000..220a7f8 --- /dev/null +++ b/pairent_frontend_react/src/components/AppRouter/AppRouter.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import {Navigate, Route, Routes} from "react-router-dom"; +import {privateRoutes, publicRoutes} from "../../router/index"; + +const AppRouter = () => { + return ( + + {publicRoutes.map(route => + + )} + {/* */} + + ); +}; + +export default AppRouter; \ No newline at end of file diff --git a/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx b/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx index d215136..761170e 100644 --- a/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx +++ b/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx @@ -25,7 +25,7 @@ const CardApartament = function (props) {
-

{props.results.perimetrs} м², {props.results.rooms}-х комнатная

+

{props.results.perimetrs} м², {props.results.rooms}{props.results.rooms > 1 ? "-х комнатная" : " комнатная"}

{props.results.address}, {props.results.floor} этаж из {props.results.floorHouse}

@@ -117,9 +117,11 @@ const CardApartament = function (props) {
- - - + {props.results.lastPrice > props.results.price && + + + + }

{props.results.price} ₽

в месяц

diff --git a/pairent_frontend_react/src/components/Favorites/FavoritesApartamentsList.jsx b/pairent_frontend_react/src/components/FavoritesApartamentsList/FavoritesApartamentsList.jsx similarity index 67% rename from pairent_frontend_react/src/components/Favorites/FavoritesApartamentsList.jsx rename to pairent_frontend_react/src/components/FavoritesApartamentsList/FavoritesApartamentsList.jsx index 91277a1..31e1536 100644 --- a/pairent_frontend_react/src/components/Favorites/FavoritesApartamentsList.jsx +++ b/pairent_frontend_react/src/components/FavoritesApartamentsList/FavoritesApartamentsList.jsx @@ -3,33 +3,38 @@ import ApartamentService from '../../API/ApartamentService'; import {useFetching} from '../../hooks/useFetching'; import {getPageCount} from '../../utils/Pages'; -import CardApartament from '../../components/CardApartament/CardApartament'; -import Pagination from '../../components/UI/Pagination/Pagination'; +import CardApartament from '../CardApartament/CardApartament'; +import Pagination from '../UI/Pagination/Pagination'; const FavoritesApartamentsList = () => { - const [apartaments, setApartaments] = useState([]) + const [apartamentsFavorites, setApartamentsFavorites] = useState([]) const [totalPages, setTotalPages] = useState(0); - const limit = 1; const [page, setPage] = useState(1); + const [limit, setLimit] = useState(1); const [fetchApartaments, isApartamentsLoading, apartamentsError] = useFetching(async (limit) => { let offset = (page - 1) * limit; const response = await ApartamentService.getAll(limit, offset); - setApartaments(response.data.results) - const totalCount = response.data.count + setApartamentsFavorites(response.data.results) + let totalCount = response.data.count; setTotalPages(getPageCount(totalCount, limit)) }) useEffect(() => { fetchApartaments(limit) - }, [page]) + }, [page, limit]) const changePage = (page) => { setPage(page) } + const viewAll = () => { + setLimit(totalPages * limit) + setPage(1) + } + // TODO: Переделать, сейчас сделанно для MVP (то есть заглушки) - if (!apartaments.length && !isApartamentsLoading && !apartamentsError) { + if (!apartamentsFavorites.length && !isApartamentsLoading && !apartamentsError) { return (

В избранном ничего нет :/

) @@ -46,13 +51,13 @@ const FavoritesApartamentsList = () => { {isApartamentsLoading &&

Идет загрузка...

} - {apartaments.map((apartament, index) => + {apartamentsFavorites.map((apartament, index) => <>
)} - + ); }; diff --git a/pairent_frontend_react/src/components/Header/Header.jsx b/pairent_frontend_react/src/components/Header/Header.jsx index 6df5fa3..dff9592 100644 --- a/pairent_frontend_react/src/components/Header/Header.jsx +++ b/pairent_frontend_react/src/components/Header/Header.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import {Link} from "react-router-dom"; + import './styles/Header.css'; const Header = function () { @@ -10,47 +12,47 @@ const Header = function () {

Pairent

- + - +
); diff --git a/pairent_frontend_react/src/components/LastView/LastView.jsx b/pairent_frontend_react/src/components/LastView/LastView.jsx index 3ea6935..d956dff 100644 --- a/pairent_frontend_react/src/components/LastView/LastView.jsx +++ b/pairent_frontend_react/src/components/LastView/LastView.jsx @@ -1,34 +1,49 @@ import React, { useEffect, useState } from 'react'; +import ApartamentService from '../../API/ApartamentService'; +import {useFetching} from '../../hooks/useFetching'; +import {getPageCount, getPagesArray} from '../../utils/Pages'; + import CardSmallApartament from '../../components/CardSmallApartament/CardSmallApartament'; -import axios from 'axios'; + import './styles/LastView.css'; const LastView = function () { const [apartamentsLastView, setApartamentsLastView] = useState([]) + const [totalPages, setTotalPages] = useState(0); + const [page, setPage] = useState(1); + const limit = 1; + const [totalCount, setTotalCount] = useState(0); - async function fetchLastApartamentsView() { - const response = await axios.get('http://127.0.0.1:8000/api/apartaments/') - setApartamentsLastView(response.data.results) - } - + const [fetchApartaments, isApartamentsLoading, apartamentsError] = useFetching(async (limit) => { + let offset = (page - 1) * limit; + const response = await ApartamentService.getAll(limit, offset); + setApartamentsLastView(response.data.results) + setTotalCount(response.data.count) + setTotalPages(getPageCount(totalCount, limit)) + }) + useEffect(() => { - fetchLastApartamentsView() - }, []) + fetchApartaments(limit) + }, [page]) + + const changePageLastView = (page) => { + setPage(page) + } return( <>
-

Недавно просмотренные 15

+

Недавно просмотренные {totalCount}

- -
- {apartamentsLastView.map((apartament, index) => - <> - - - )} + {isApartamentsLoading + ? +

Идет загрузка...

+ : + <> + {apartamentsLastView.map((apartament, index) => + <> + + + )} + + }
diff --git a/pairent_frontend_react/src/components/UI/Pagination/Pagination.jsx b/pairent_frontend_react/src/components/UI/Pagination/Pagination.jsx index b6acba2..adb5ce7 100644 --- a/pairent_frontend_react/src/components/UI/Pagination/Pagination.jsx +++ b/pairent_frontend_react/src/components/UI/Pagination/Pagination.jsx @@ -1,14 +1,14 @@ import React from 'react'; import {getPagesArray} from "../../../utils/Pages"; -const Pagination = ({totalPages, page, changePage}) => { +const Pagination = ({totalPages, page, changePage, viewAll}) => { let pagesArray = getPagesArray(totalPages); let previousPage = page !== 1 ? page - 1 : page let nextPage = page < pagesArray.length ? page + 1 : page return (
- +