use pagination class in index page

This commit is contained in:
b1ek 2023-05-12 19:26:07 +10:00
parent 0c088c732a
commit 73c1e7b007
Signed by: blek
GPG Key ID: 14546221E3595D0C
2 changed files with 16 additions and 51 deletions

View File

@ -1,9 +1,11 @@
import React from 'react'; import React from 'react';
import {getPagesArray, getPreviousAndNextPage} from "../../../utils/Pages"; 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 pagesArray = getPagesArray(totalPages);
let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page); let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page);
changePage = onChange ?? changePage;
const getPagesShow = () => { const getPagesShow = () => {
let pagesShow = []; let pagesShow = [];
@ -15,7 +17,10 @@ const Pagination = ({totalPages, page, changePage, viewAll}) => {
return ( return (
<section className="btnSection"> <section className="btnSection">
<button className="allBtn" onClick={() => viewAll()}>Показать весь список</button> {
showAll ? <button className="allBtn" onClick={viewAll}>Показать весь список</button>
: null
}
<div className="choiceBtn"> <div className="choiceBtn">
<button onClick={() => changePage(previousPage)} className="btnPrevious"> <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"> <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">

View File

@ -15,6 +15,8 @@ import AwsSliderStyles from 'react-awesome-slider/src/styles?inline';
import constants from "../../constants"; import constants from "../../constants";
import Pagination from '../../components/UI/Pagination';
const API_ROOT = constants.API_ROOT; const API_ROOT = constants.API_ROOT;
const Select = styled.select` const Select = styled.select`
@ -130,32 +132,6 @@ const SearchBarInput = styled.input`
outline: none; 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` const IndexPageRoot = styled.div`
width: 1150px; width: 1150px;
margin: 50px auto margin: 50px auto
@ -355,7 +331,7 @@ export default class IndexPage extends React.Component {
this.state = { this.state = {
apartments: [], apartments: [],
pageSize: 10, pageSize: 10,
page: 0, page: 1,
data_loaded: false, data_loaded: false,
load_err: false, load_err: false,
loading_filters: false loading_filters: false
@ -432,28 +408,12 @@ export default class IndexPage extends React.Component {
null 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> </IndexPageRoot>
); );
} }