use pagination class in index page

pairent_frontend_react/src/components/UI/Pagination/index.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import {getPagesArray, getPreviousAndNextPage} from "../../../utils/Pages";
 
-const Pagination = ({totalPages, page, changePage, viewAll}) => {
+const Pagination = ({totalPages, page, changePage, onChange, viewAll, showAll}) => {
     let pagesArray = getPagesArray(totalPages);
     let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page);
 
+    changePage = onChange ?? changePage;
+    
     const getPagesShow = () => {
         let pagesShow = [];
         for (let index = page - 1, len = page + 14 > totalPages ? totalPages : page + 14; index < len; ++index) {
@@ -15,7 +17,10 @@ const Pagination = ({totalPages, page, changePage, viewAll}) => {
 
     return (
         <section className="btnSection">
-            <button className="allBtn" onClick={() => viewAll()}>Показать весь список</button>
+            {
+                showAll ? <button className="allBtn" onClick={viewAll}>Показать весь список</button>
+                        : null
+            }
             <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/IndexPage/index.jsx

@@ -15,6 +15,8 @@ import AwsSliderStyles from 'react-awesome-slider/src/styles?inline';
 
 import constants from "../../constants";
 
+import Pagination from '../../components/UI/Pagination';
+
 const API_ROOT = constants.API_ROOT;
 
 const Select = styled.select`
@@ -130,32 +132,6 @@ const SearchBarInput = styled.input`
     outline: none;
 `;
 
-const PageButtons = styled.div`
-    margin: 60px auto;
-    width: fit-content
-`;
-
-const PageButton = styled.button`
-    background: #dedede;
-    width: 60px; height: 60px;
-    border-radius: 16px;
-    box-shadow: 0 1px 2px #20202060;
-    margin-right: 32px;
-    font-size: 20px;
-    font-weight: bold;
-
-    transition: 350ms ease;
-
-    &:hover {
-        box-shadow: 0 2px 4px #20202060;
-    }
-`;
-
-const CurrentPage = styled(PageButton)`
-    background: 0;
-    border: 2px solid royalblue;
-`;
-
 const IndexPageRoot = styled.div`
     width: 1150px;
     margin: 50px auto
@@ -355,7 +331,7 @@ export default class IndexPage extends React.Component {
         this.state = {
             apartments: [],
             pageSize: 10,
-            page: 0,
+            page: 1,
             data_loaded: false,
             load_err: false,
             loading_filters: false
@@ -432,28 +408,12 @@ export default class IndexPage extends React.Component {
                     null
                 }
 
-                <PageButtons>
+                <Pagination 
-                    {
+                    totalPages={pages}
-                        pages != 0 ?
+                    page={page}
-                        [...Array(pages)].map((_, i) => {
+                    onChange={(page) => this.setState({ page })}
-                            if (i > (pages / 4) & i < (pages - (pages / 4)) && i != 0 && i != pages) {
+                    showAll={false}
-                                if (!(i == page + 1 | i == page - 1 | i == page)) {
+                    />
-                                    if (i == Math.floor((pages / 2)))
-                                        return <PageButton disabled>...</PageButton>;
-                                    return null;
-                                }
-                            }
-
-                            if (i == page)
-                                return <CurrentPage>{i + 1}</CurrentPage>
-
-                            return (
-                                <PageButton onClick={() => this.setState({page: i})}>{i + 1}</PageButton>
-                            );
-                        }) :
-                        null
-                    }
-                </PageButtons>
             </IndexPageRoot>
         );
     }