add router

add navigate
add comparisons page (empty page)
update favorites page

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 (
     <>
-      <Header/>
+      <BrowserRouter>
-      <main>
+        <Header/>
-        <div className="horizontalLine"></div>
+        <main>
-        <Favorites/>
+          <div className="horizontalLine"></div>
-      </main>
+          <AppRouter/>
+        </main>
+      </BrowserRouter>
       <Footer/>
     </>
   );

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 (
+        <Routes>
+            {publicRoutes.map(route =>
+                <Route
+                    element={route.component}
+                    path={route.path}
+                    exact={route.exact}
+                    key={route.path}
+                />
+                )}
+            {/* <Navigate to='/'/> */}
+        </Routes>
+    );
+};
+
+export default AppRouter;

pairent_frontend_react/src/components/CardApartament/CardApartament.jsx

@@ -25,7 +25,7 @@ const CardApartament = function (props) {
             <div className="apartmentSectionLeft">
                 <img src="/images/apartment.png"></img>
                 <div className="characteristics">
-                    <h3>{props.results.perimetrs} м², {props.results.rooms}-х комнатная</h3>
+                    <h3>{props.results.perimetrs} м², {props.results.rooms}{props.results.rooms > 1 ? "-х комнатная" : " комнатная"}</h3>
                     <p className="address">{props.results.address}, {props.results.floor} этаж из {props.results.floorHouse}</p>
                     <div className="transport">
                         <div className="transportBas">
@@ -117,9 +117,11 @@ const CardApartament = function (props) {
             </div>
             <div className="apartmentSectionRight">
                 <div className="apartmentPrice">
-                    <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    {props.results.lastPrice > props.results.price &&
-                        <path d="M7 12L13.9282 0H0.0717969L7 12Z" fill="#2EC44F"/>
+                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    </svg>
+                            <path d="M7 12L13.9282 0H0.0717969L7 12Z" fill="#2EC44F"/>
+                        </svg>
+                    }
                     <h3>{props.results.price} ₽</h3>
                 </div>
                 <p className="month">в месяц</p>

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 CardApartament from '../CardApartament/CardApartament';
-import Pagination from '../../components/UI/Pagination/Pagination';
+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)
+        setApartamentsFavorites(response.data.results)
-        const totalCount = response.data.count
+        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 (
             <h1 style={{textAlign: 'center'}}>В избранном ничего нет :/</h1>
         )
@@ -46,13 +51,13 @@ const FavoritesApartamentsList = () => {
             {isApartamentsLoading &&
                 <h1 style={{textAlign: 'center'}}>Идет загрузка...</h1>
             }
-            {apartaments.map((apartament, index) =>
+            {apartamentsFavorites.map((apartament, index) =>
                 <>
                     <CardApartament results={apartament}/>
                     <div className="separationLine"></div>
                 </> 
             )}
-            <Pagination page={page} changePage={changePage} totalPages={totalPages}/>
+            <Pagination page={page} changePage={changePage} viewAll={viewAll} totalPages={totalPages}/>
         </>
     );
 };

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 () {
                 </a>             
                 <div className="verticalLine"></div>
                 <h1>Pairent</h1>
-                <a href="#">
+                <Link to="/">
                     <button className="btnLocation">
                         <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M4.88889 8.6665V12.9511L4.27722 13.854C4.14528 14.0487 3.85444 14.0487 3.7225 13.854L3.11111 12.9511V8.6665C3.39972 8.719 3.69611 8.75017 4 8.75017C4.30389 8.75017 4.60028 8.719 4.88889 8.6665ZM4 0C6.20917 0 8 1.76289 8 3.93758C8 6.11227 6.20917 7.87515 4 7.87515C1.79083 7.87515 0 6.11227 0 3.93758C0 1.76289 1.79083 0 4 0ZM4 2.07817C5.04167 2.07817 5.88889 2.91217 5.88889 3.93758C5.88889 4.1186 6.03833 4.26571 6.22222 4.26571C6.40611 4.26571 6.55556 4.1186 6.55556 3.93758C6.55556 2.5504 5.40889 1.4219 4 1.4219C3.81611 1.4219 3.66667 1.56902 3.66667 1.75003C3.66667 1.93105 3.81611 2.07817 4 2.07817Z" fill="#222222"></path>
                         </svg>                    
                         Владивосток
                     </button>
-                </a>
+                </Link>
             </section> 
             <nav>
                 <div>
-                    <a href="#">
+                    <Link to="/favorites">
                         <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M14.447 0.95727C12.7345 -0.502078 10.1877 -0.239583 8.61584 1.38226L8.00023 2.01663L7.38462 1.38226C5.8159 -0.239583 3.26595 -0.502078 1.55348 0.95727C-0.408984 2.63224 -0.512107 5.63843 1.24411 7.45403L7.29087 13.6977C7.68149 14.1008 8.31585 14.1008 8.70647 13.6977L14.7532 7.45403C16.5126 5.63843 16.4094 2.63224 14.447 0.95727Z"></path>
                         </svg>
                         Избранное
-                    </a>
+                    </Link>
                 </div>
                 <div>
-                    <a href="#">
+                    <Link to="/comparisons">
                         <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M10.4 9.33333H11.6C11.8 9.33333 12 9.1 12 8.86667V3.96667C12 3.73333 11.8 3.5 11.6 3.5H10.4C10.2 3.5 10 3.73333 10 3.96667V8.86667C10 9.1 10.2 9.33333 10.4 9.33333ZM13.4 9.33333H14.6C14.8 9.33333 15 9.1 15 8.86667V0.466667C15 0.233333 14.8 0 14.6 0H13.4C13.2 0 13 0.233333 13 0.466667V8.86667C13 9.1 13.2 9.33333 13.4 9.33333ZM4.4 9.33333H5.6C5.8 9.33333 6 9.1 6 8.86667V6.3C6 6.06667 5.8 5.83333 5.6 5.83333H4.4C4.2 5.83333 4 6.06667 4 6.3V8.86667C4 9.1 4.2 9.33333 4.4 9.33333ZM7.4 9.33333H8.6C8.8 9.33333 9 9.1 9 8.86667V1.63333C9 1.4 8.8 1.16667 8.6 1.16667H7.4C7.2 1.16667 7 1.4 7 1.63333V8.86667C7 9.1 7.2 9.33333 7.4 9.33333ZM15.5 11.6667H2V0.583333C2 0.261042 1.77625 0 1.5 0H0.5C0.22375 0 0 0.261042 0 0.583333V12.8333C0 13.4776 0.447812 14 1 14H15.5C15.7763 14 16 13.739 16 13.4167V12.25C16 11.9277 15.7763 11.6667 15.5 11.6667Z"></path>
                         </svg>                        
                         Сравнения
-                    </a>
+                    </Link>
                 </div>
                 <div>
-                    <a href="#">
+                    <Link to="/">
                         <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M11.5556 5C11.5556 2.2375 8.96944 0 5.77778 0C2.58611 0 0 2.2375 0 5C0 6.07188 0.391667 7.05937 1.05556 7.875C0.683333 8.81875 0.0694444 9.56875 0.0611111 9.57812C0 9.65 -0.0166667 9.75625 0.0194444 9.85C0.0555556 9.94375 0.133333 10 0.222222 10C1.23889 10 2.08056 9.61563 2.68611 9.21875C3.58056 9.70938 4.63889 10 5.77778 10C8.96944 10 11.5556 7.7625 11.5556 5ZM14.9444 11.875C15.6083 11.0625 16 10.0719 16 9C16 6.90938 14.5139 5.11875 12.4083 4.37187C12.4333 4.57812 12.4444 4.7875 12.4444 5C12.4444 8.30937 9.45278 11 5.77778 11C5.47778 11 5.18611 10.975 4.89722 10.9406C5.77222 12.7375 7.82778 14 10.2222 14C11.3611 14 12.4194 13.7125 13.3139 13.2188C13.9194 13.6156 14.7611 14 15.7778 14C15.8667 14 15.9472 13.9406 15.9806 13.85C16.0167 13.7594 16 13.6531 15.9389 13.5781C15.9306 13.5688 15.3167 12.8219 14.9444 11.875Z"></path>
                         </svg>
                         Чаты
-                    </a>                
+                    </Link>                
                 </div>
-                <a href="#">
+                <Link to="/">
                     <button className="userIcon">
                         <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M16 0C7.16129 0 0 7.16129 0 16C0 24.8387 7.16129 32 16 32C24.8387 32 32 24.8387 32 16C32 7.16129 24.8387 0 16 0ZM16 6.19355C19.1355 6.19355 21.6774 8.73548 21.6774 11.871C21.6774 15.0065 19.1355 17.5484 16 17.5484C12.8645 17.5484 10.3226 15.0065 10.3226 11.871C10.3226 8.73548 12.8645 6.19355 16 6.19355ZM16 28.3871C12.2129 28.3871 8.81936 26.671 6.54839 23.9871C7.76129 21.7032 10.1355 20.129 12.9032 20.129C13.0581 20.129 13.2129 20.1548 13.3613 20.2C14.2 20.471 15.0774 20.6452 16 20.6452C16.9226 20.6452 17.8064 20.471 18.6387 20.2C18.7871 20.1548 18.9419 20.129 19.0968 20.129C21.8645 20.129 24.2387 21.7032 25.4516 23.9871C23.1806 26.671 19.7871 28.3871 16 28.3871Z" fill="#007EFF"></path>
                         </svg>
                     </button>
-                </a>
+                </Link>
             </nav>
         </header> 
     );

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 [fetchApartaments, isApartamentsLoading, apartamentsError] = useFetching(async (limit) => {
-      const response = await axios.get('http://127.0.0.1:8000/api/apartaments/')
+        let offset = (page - 1)  * limit;
-      setApartamentsLastView(response.data.results)
+        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(
         <>
             <section className="viewedSection">
                 <div className="viewedTittle">
-                    <h2>Недавно просмотренные <span>15</span></h2>
+                    <h2>Недавно просмотренные <span>{totalCount}</span></h2>
                     <div className="viewedBtnSection">
                         <button className="btnViewed">Посмотреть все Недавние</button>
                         <div className="viewedBtn">
-                            <button className="btnPrevious">
+                            <button className="btnPrevious" onClick={() => changePageLastView(page !== 1 ? page - 1 : page)}>
                                 <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M0.238707 8.62179L6.83881 15.7424C7.15713 16.0859 7.6732 16.0859 7.99148 15.7424L8.76127 14.9119C9.07904 14.5691 9.07965 14.0134 8.76263 13.6698L3.53193 7.99998L8.76263 2.33019C9.07965 1.98655 9.07904 1.43091 8.76127 1.08808L7.99148 0.257567C7.67316 -0.0858556 7.15709 -0.0858556 6.83881 0.257567L0.238741 7.37821C-0.0795746 7.72159 -0.0795746 8.27837 0.238707 8.62179Z" fill="black"/>
                                 </svg>                        
                             </button>
-                            <button className="btnNext">
+                            <button className="btnNext" onClick={() => changePageLastView(page < getPagesArray(totalPages).length ? page + 1 : page)}>
                                 <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M8.76129 8.62179L2.16119 15.7424C1.84287 16.0859 1.3268 16.0859 1.00852 15.7424L0.238729 14.9119C-0.0790435 14.5691 -0.0796547 14.0134 0.237371 13.6698L5.46807 7.99998L0.237371 2.33019C-0.0796547 1.98655 -0.0790435 1.43091 0.238729 1.08808L1.00852 0.257567C1.32684 -0.0858556 1.84291 -0.0858556 2.16119 0.257567L8.76126 7.37821C9.07957 7.72159 9.07957 8.27837 8.76129 8.62179Z" fill="black"/>
                                 </svg>                        
@@ -37,11 +52,18 @@ const LastView = function () {
                     </div>
                 </div>
                 <div className="viewedBlock">
-                    {apartamentsLastView.map((apartament, index) =>
+                    {isApartamentsLoading 
-                    <>
+                        ?
-                        <CardSmallApartament key={index} results={apartament}/>
+                        <h1 style={{textAlign: 'center'}}>Идет загрузка...</h1>
-                    </> 
+                        :
-                    )}   
+                        <>
+                        {apartamentsLastView.map((apartament, index) =>
+                            <>
+                                <CardSmallApartament key={index} results={apartament}/>
+                            </> 
+                        )}   
+                        </> 
+                    }
                 </div>
             </section>
         </>

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 (
         <section className="btnSection">
-            <button className="allBtn">Показать весь список</button>
+            <button className="allBtn" onClick={() => viewAll()}>Показать весь список</button>
             <div className="choiceBtn">
                 <button onClick={() => changePage(previousPage)} className="btnPrevious">
                     <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">

pairent_frontend_react/src/pages/Favorites/Favorites.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import FavoritesApartamentsList from './FavoritesApartamentsList';
+import FavoritesApartamentsList from '../../components/FavoritesApartamentsList/FavoritesApartamentsList';
 import LastView from '../../components/LastView/LastView';
 
 import './styles/Favorites.css';

pairent_frontend_react/src/pages/Сomparisons/Сomparisons.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Comparisons = function () {
+
+    return(
+        <h2>Сравнения</h2>
+    );
+}
+
+export default Comparisons;

pairent_frontend_react/src/router/index.js

@@ -0,0 +1,14 @@
+import Favorites from "../pages/Favorites/Favorites";
+import Comparisons from "../pages/Сomparisons/Сomparisons";
+
+// НА ПРОДАШКЕНЕ СДЕЛАТЬ ПРИВАТНЫЕ МАРШРУТЫ
+// export const privateRoutes = [
+//     {path: '/favorites', component: Favorites, exact: true},
+//     {path: '/comparisons', component: Comparisons, exact: true},
+// ]
+
+export const publicRoutes = [
+    {path: '/', component: <Favorites/>, exact: true},
+    {path: '/favorites', component: <Favorites/>, exact: true},
+    {path: '/comparisons', component: <Comparisons/>, exact: true},
+]