add apartment list to index page

pairent_frontend_react/src/API/Apartment.js

@@ -2,6 +2,8 @@
  * Apartment class model
  */
 class Apartment {
+    /** @type {number} */
+    id
     /** @type {string} */
     perimetrs
     /** @type {string} */

pairent_frontend_react/src/components/ApartmentsList/index.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import CardApartment from '../CardApartament';
+
+/**
+ * 
+ * @param {{
+ *      list: import('../../API/Apartment').Apartment[]
+ * }} props 
+ */
+export default function ApartmentsList(props) {
+    const list = props.list;
+    console.log(list);
+
+    return (
+        <div>
+            {
+                list.map((el, i) => {
+                    return <CardApartment results={el} />
+                })
+            }
+        </div>
+    )
+}

pairent_frontend_react/src/pages/IndexPage/index.jsx

@@ -3,6 +3,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import { Scrollbar, Navigation } from 'swiper/core';
 import ISVGIcon from '../../components/UI/Icon/SVGIcon';
 import Select from 'react-select';
+import ApartmentsList from "../../components/ApartmentsList";
 
 import styled from 'styled-components';
 import 'swiper/css';
@@ -11,6 +12,7 @@ import 'swiper/css/navigation';
 
 // swiper customization
 import './swiper.css';
+import ApartamentService from "../../API/ApartamentService";
 
 
 const SVGIcon = styled(ISVGIcon)`
@@ -61,7 +63,7 @@ const PeriodButton = styled.button`
     display: inline-block;
     margin-right: 16px;
 
-    border-radius: 14px;
+    border-radius: 10px;
     padding: 0 16px;
     box-shadow: 0 2px 16px #ffffff30;
 
@@ -93,6 +95,7 @@ const SubmitBtn = styled.button`
     border-radius: 8px;
     color: #f9f9f9;
     font-weight: 700;
+    float: right;
 
     &:active {
         background: #3759bf
@@ -131,10 +134,6 @@ const SearchBarInput = styled.input`
     outline: none;
 `;
 
-const ListSelect = styled.datalist`
-
-`;
-
 const FiltersForm = () => {
 
     const apart_sizes = [
@@ -209,6 +208,8 @@ const FiltersForm = () => {
                         value={state.area_to}
                         onChange={(e) => setState({area_to: e.target.value})}/>
 
+                    м²
+
                     <SearchBarSpacer />
 
                     <Select
@@ -258,35 +259,66 @@ const FiltersForm = () => {
     );
 }
 
-export default function IndexPage(props) {    
+export default class IndexPage extends React.Component {
-    return (
-        <>
-            <div style={{ height: 30 }} />
-            <Swiper
-                spaceBetween={4}
-                style={{ width: 800, height: 250, borderRadius: 20 }}
 
-                modules={[ Scrollbar, Navigation ]}
+    constructor(props) {
-                scrollbar={{ enabled: true, draggable: true }}
+        super(props);
-                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>
 
-            <Title>
+        this.state = {
-                Выбор квартиры во
+            apartments: [],
-                <HighlightWord> Владивостоке</HighlightWord>
+            pageSize: 10,
-            </Title>
+            page: 0,
+            data_loaded: false
+        };
 
-            <FiltersForm />
+        ApartamentService.getAll(100).then(data => {
+            globalThis.data = data.data.results;
+            this.setState({apartments: data.data.results, data_loaded: true});
+        });
+    }
 
-        </>
+    render() {
-    );
+        const { page, pageSize } = this.state;
+        const current_data = this.state.apartments.slice((page * pageSize), (page * pageSize) + pageSize);
+        console.log(current_data);
+
+        return (
+            <>
+                <div style={{ height: 30 }} />
+                <Swiper
+                    spaceBetween={4}
+                    style={{ width: 800, height: 250, 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>
+
+                <Title>
+                    Выбор квартиры во
+                    <HighlightWord> Владивостоке</HighlightWord>
+                </Title>
+
+                <FiltersForm />
+
+                <ApartmentsList list={current_data} />
+                {
+                    !this.state.data_loaded ?
+                    <>
+                        <h3 style={{fontWeight: '500', margin: '48px 0', textAlign: 'center'}}>Данные загружаются, подождите немного</h3>
+                    </> :
+                    null
+                }
+            </>
+        );
+    }
 }