From bd15e49deaa4b3a0fee67a02f25f54a432d1f7f9 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Fri, 12 May 2023 09:39:54 +1000
Subject: [PATCH] make page buttons on home page usable

---
 .../src/components/ApartmentsList/index.jsx   |  4 ++-
 .../src/pages/IndexPage/index.jsx             | 34 +++++--------------
 2 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/pairent_frontend_react/src/components/ApartmentsList/index.jsx b/pairent_frontend_react/src/components/ApartmentsList/index.jsx
index b9b037c..efe6cc0 100644
--- a/pairent_frontend_react/src/components/ApartmentsList/index.jsx
+++ b/pairent_frontend_react/src/components/ApartmentsList/index.jsx
@@ -24,12 +24,14 @@ const ListElement = styled.li`
 export default function ApartmentsList(props) {
     const list = props.list;
 
+    if (list.length == 0) return null;
+
     return (
         <ul>
             {
                 list.map((el, i) => {
                     return (
-                        <ListElement>
+                        <ListElement key={i}>
                             <CardApartment results={el} />
                         </ListElement>
                     );
diff --git a/pairent_frontend_react/src/pages/IndexPage/index.jsx b/pairent_frontend_react/src/pages/IndexPage/index.jsx
index 71d4bb4..3d26e8d 100644
--- a/pairent_frontend_react/src/pages/IndexPage/index.jsx
+++ b/pairent_frontend_react/src/pages/IndexPage/index.jsx
@@ -343,7 +343,7 @@ export default class IndexPage extends React.Component {
         this.state = {
             apartments: [],
             pageSize: 10,
-            page: 0,
+            page: 10,
             data_loaded: false,
             load_err: false,
             loading_filters: false
@@ -387,25 +387,7 @@ export default class IndexPage extends React.Component {
         
 
         return (
-            <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> */}
-                
+            <IndexPageRoot>                
                 <SliderContainer>
                     <AwesomeSlider cssModule={AwsSliderStyles} bullets={false}>
                         <div data-src='/images/house-s.jpg' />
@@ -442,17 +424,19 @@ export default class IndexPage extends React.Component {
                     {
                         pages != 0 ?
                         [...Array(pages)].map((_, i) => {
-                            if (i > 3 && i != pageSize - 1) {
-                                if (i == 4)
-                                    return <PageButton>...</PageButton>;
-                                return null;
+                            if (i > (pages / 4) & i < (pages - (pages / 4)) && i != 0 && i != pages) {
+                                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>{i + 1}</PageButton>
+                                <PageButton onClick={() => this.setState({page: i})}>{i + 1}</PageButton>
                             );
                         }) :
                         null