make filters work (almost)

pairent_backend/pairent_app/views.py

@@ -59,17 +59,24 @@ class ApartmentFilter(viewsets.ViewSet):
 
     def list(self, req: Request):
         filters = dict(req.data);
-        unfiltered = ApartamentDetailSerializer(Apartament.objects.all()[:100], many=True).data;
+        unfiltered = Apartament.objects.all();
         filtered = [];
 
+        # TODO: Some better converting practice?
+        filters['price_range']['from'] = int(filters['price_range']['from']);
+        filters['price_range']['to'] = int(filters['price_range']['to']);
+        filters['area_range']['from'] = int(filters['area_range']['from']);
+        filters['area_range']['to'] = int(filters['area_range']['to']);
+        filters['rooms'] = int(filters['rooms'])
+
         for entry in unfiltered:
-            if (filters['price_range']['from'] >= entry['price'] and (filters['price_range']['to'] != -1 and filters['price_range']['to'] <= entry['price'])):
+            if (filters['price_range']['from'] >= entry.price and (filters['price_range']['to'] != -1 and filters['price_range']['to'] <= entry.price)):
                 continue;
-            if (filters['area_range']['from'] >= entry['perimetrs'] and (filters['area_range']['to'] != -1 and filters['area_range']['to'] <= entry['perimetrs'])):
+            if (filters['area_range']['from'] >= entry.perimetrs and (filters['area_range']['to'] != -1 and filters['area_range']['to'] <= entry.perimetrs)):
                 continue;
-            if (filters['rooms'] != -1 and entry['rooms'] != filters['rooms']):
+            if (filters['rooms'] != -1 and entry.rooms != filters['rooms']):
                 continue;
             
             filtered.append(entry);
 
-        return Response(filtered);
+        return Response(ApartamentListSerializer(filtered, many=True).data);

pairent_backend/pairent_backend/settings.py

@@ -25,7 +25,7 @@ SECRET_KEY = 'django-insecure-=(7b+4ka=5jak-mokuh4#-6_14f58#^0kjwqsz7wyon$4i@sel
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['*']
 
 
 # Application definition

pairent_frontend_react/src/API/Filters.js

@@ -0,0 +1,34 @@
+class Range {
+    /** @type {number} */
+    from;
+
+    /** @type {number} */
+    to;
+}
+
+class Filters {
+    /** @type { Range } */
+    price_range;
+
+    /** @type { Range } */
+    area_range;
+
+    /** @type { string[] } */
+    lease_period;
+
+    /** @type { string } */
+    address;
+
+    /** @type { number } */
+    rooms;
+
+    constructor() {
+        this.price_range = new Range();
+        this.area_range = new Range();
+        this.lease_period = [];
+        this.address = '';
+        this.rooms = 0;
+    }
+}
+
+export { Filters, Range }

pairent_frontend_react/src/pages/IndexPage/index.jsx

@@ -4,6 +4,7 @@ import { Scrollbar, Navigation } from 'swiper/core';
 import ISVGIcon from '../../components/UI/Icon/SVGIcon';
 import Select from 'react-select';
 import ApartmentsList from "../../components/ApartmentsList";
+import { Filters } from "../../API/Filters";
 
 import styled from 'styled-components';
 import 'swiper/css';
@@ -15,6 +16,9 @@ import './swiper.css';
 import ApartamentService from "../../API/ApartamentService";
 import { HashLoader } from 'react-spinners';
 
+import constants from "../../constants";
+
+const API_ROOT = constants.API_ROOT;
 
 const SVGIcon = styled(ISVGIcon)`
     margin-left:0;
@@ -37,7 +41,7 @@ const SwiperImage = styled.div`
     height: 100%;
 `;
 
-const Filters = styled.div`
+const FiltersEl = styled.div`
     background: url(/images/filter.png);
     height: 300px;
     width: 1150px;
@@ -163,7 +167,7 @@ const Splash = styled.h3`
     text-align: center;
 `;
 
-const FiltersForm = () => {
+const FiltersForm = (props) => {
 
     const apart_sizes = [
         { value: 0, label: "Гостинка" },
@@ -175,7 +179,7 @@ const FiltersForm = () => {
 
     const def_form = {
         per_day: false,
-        per_month: false,
+        per_month: true,
 
         area_from: '',
         area_to: '',
@@ -185,7 +189,9 @@ const FiltersForm = () => {
 
         address: '',
 
-        rooms: 0,
+        rooms: { value: -1, label: 'Выберите' },
+
+        form_err: false
     };
 
 
@@ -195,8 +201,28 @@ const FiltersForm = () => {
         return setState_({...state, ...new_state});
     }
 
+    const onSumbit = () => {
+        let transformed = new Filters();
+        
+        transformed.address = state.address;
+        transformed.area_range = {
+            from:   state.area_from,
+            to:     state.area_to
+        };
+        transformed.price_range = {
+            from:   state.price_from,
+            to:     state.price_to
+        };
+
+        if (state.per_day)              transformed.lease_period.push('day');
+        if (state.per_month)            transformed.lease_period.push('month');
+        if (state.rooms.value != -1)    transformed.rooms = state.rooms.value;
+
+        if (props.onSubmit)             props.onSubmit(transformed);
+    }
+
     return (
-        <Filters>
+        <FiltersEl>
             <FilterText>Фильтры</FilterText>
             
             <PeriodFilter>
@@ -280,11 +306,11 @@ const FiltersForm = () => {
                 </SearchBarText>
             </SearchBarFilter>
 
-            <SubmitBtn onClick={() => console.log(state)}>
+            <SubmitBtn onClick={onSumbit}>
                 <SVGIcon src='/images/icons/search.svg' width='14' height='14' />
                 Показать варианты
             </SubmitBtn>
-        </Filters>
+        </FiltersEl>
     );
 }
 
@@ -295,6 +321,7 @@ export default class IndexPage extends React.Component {
 
         this.state = {
             apartments: [],
+            unfiltered: [],
             pageSize: 10,
             page: 0,
             data_loaded: false,
@@ -302,10 +329,32 @@ export default class IndexPage extends React.Component {
         };
 
         ApartamentService.getAll(100).then(data => {
-            this.setState({apartments: data.data.results, data_loaded: true});
+            this.setState({apartments: data.data.results, unfiltered: data.data.results, data_loaded: true});
         }).catch(err => {
-            this.setState({data_loaded: true, apartments: [], load_err: err.message});
+            this.setState({data_loaded: true, apartments: [], unfiltered: data.data.results, load_err: err.message});
         });
+
+        this.filterData = this.filterData.bind(this);
+    }
+
+    /**
+     * 
+     * @param {Filters} filters 
+     */
+    async filterData(filters) {
+        
+        const filtered_raw = await fetch(API_ROOT + '/api/apartaments/filters/', {
+            method: 'POST',
+            body: JSON.stringify(filters),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        }).catch(err => console.error(err));
+
+        const filtered = await filtered_raw.json();
+
+        this.setState({apartments: filtered, data_loaded: true, load_err: false});
+        ;
     }
 
     render() {
@@ -340,7 +389,7 @@ export default class IndexPage extends React.Component {
                     <span style={{color: '#0066ff'}}> Владивостоке</span>
                 </Title>
 
-                <FiltersForm />
+                <FiltersForm onSubmit={this.filterData} />
 
                 <ApartmentsList list={current_data} />
                 {