make page buttons on home page usable

This commit is contained in:
b1ek 2023-05-12 09:39:54 +10:00
parent 9790e4b70a
commit bd15e49dea
Signed by: blek
GPG Key ID: 14546221E3595D0C
2 changed files with 12 additions and 26 deletions

View File

@ -24,12 +24,14 @@ const ListElement = styled.li`
export default function ApartmentsList(props) { export default function ApartmentsList(props) {
const list = props.list; const list = props.list;
if (list.length == 0) return null;
return ( return (
<ul> <ul>
{ {
list.map((el, i) => { list.map((el, i) => {
return ( return (
<ListElement> <ListElement key={i}>
<CardApartment results={el} /> <CardApartment results={el} />
</ListElement> </ListElement>
); );

View File

@ -343,7 +343,7 @@ export default class IndexPage extends React.Component {
this.state = { this.state = {
apartments: [], apartments: [],
pageSize: 10, pageSize: 10,
page: 0, page: 10,
data_loaded: false, data_loaded: false,
load_err: false, load_err: false,
loading_filters: false loading_filters: false
@ -388,24 +388,6 @@ export default class IndexPage extends React.Component {
return ( return (
<IndexPageRoot> <IndexPageRoot>
{/* <Swiper
spaceBetween={4}
style={{ width: 1150, height: 200, borderRadius: 20 }}
modules={[ Scrollbar, Navigation ]}
scrollbar={{ enabled: true, draggable: true }}
navigation={{ enabled: true }}
loop={ true }
autoplay={{ delay: 7 }}
>
<SwiperSlide>
<SwiperImage src='/images/house-s.jpg' />
</SwiperSlide>
<SwiperSlide>
<SwiperImage src='/images/house-s-2.jpg' />
</SwiperSlide>
</Swiper> */}
<SliderContainer> <SliderContainer>
<AwesomeSlider cssModule={AwsSliderStyles} bullets={false}> <AwesomeSlider cssModule={AwsSliderStyles} bullets={false}>
<div data-src='/images/house-s.jpg' /> <div data-src='/images/house-s.jpg' />
@ -442,17 +424,19 @@ export default class IndexPage extends React.Component {
{ {
pages != 0 ? pages != 0 ?
[...Array(pages)].map((_, i) => { [...Array(pages)].map((_, i) => {
if (i > 3 && i != pageSize - 1) { if (i > (pages / 4) & i < (pages - (pages / 4)) && i != 0 && i != pages) {
if (i == 4) if (!(i == page + 1 | i == page - 1 | i == page)) {
return <PageButton>...</PageButton>; if (i == Math.floor((pages / 2)))
return <PageButton disabled>...</PageButton>;
return null; return null;
} }
}
if (i == page) if (i == page)
return <CurrentPage>{i + 1}</CurrentPage> return <CurrentPage>{i + 1}</CurrentPage>
return ( return (
<PageButton>{i + 1}</PageButton> <PageButton onClick={() => this.setState({page: i})}>{i + 1}</PageButton>
); );
}) : }) :
null null