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,7 +259,29 @@ const FiltersForm = () => {
     );
 }
 
-export default function IndexPage(props) {    
+export default class IndexPage extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            apartments: [],
+            pageSize: 10,
+            page: 0,
+            data_loaded: false
+        };
+
+        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 }} />
@@ -287,6 +310,15 @@ export default function IndexPage(props) {
 
                 <FiltersForm />
 
+                <ApartmentsList list={current_data} />
+                {
+                    !this.state.data_loaded ?
+                    <>
+                        <h3 style={{fontWeight: '500', margin: '48px 0', textAlign: 'center'}}>Данные загружаются, подождите немного</h3>
+                    </> :
+                    null
+                }
             </>
         );
     }
+}