1 | import * as React from 'react';
|
---|
2 | import Box from '@mui/material/Box';
|
---|
3 | import Slider from '@mui/material/Slider';
|
---|
4 | import "./FilterPriceComponent.css"
|
---|
5 | import axios from 'axios';
|
---|
6 |
|
---|
7 | export class FilterPriceComponent extends React.Component {
|
---|
8 |
|
---|
9 | constructor(props) {
|
---|
10 | super(props)
|
---|
11 |
|
---|
12 | this.state = {
|
---|
13 | value: localStorage.getItem('priceRange') ? [parseInt(localStorage.getItem('priceRange').split('-')[0]),
|
---|
14 | parseInt(localStorage.getItem('priceRange').split('-')[1])] : [1000,150000],
|
---|
15 | minValue: 0,
|
---|
16 | maxValue: 0
|
---|
17 | }
|
---|
18 | }
|
---|
19 |
|
---|
20 | componentDidMount(){
|
---|
21 |
|
---|
22 | axios.get('/lowestPrice')
|
---|
23 | .then(response => this.setState({minValue: response.data}))
|
---|
24 | .catch(error => console.log(error))
|
---|
25 |
|
---|
26 | axios.get('/highestPrice')
|
---|
27 | .then(response => this.setState({
|
---|
28 | maxValue: response.data,
|
---|
29 | }))
|
---|
30 | .catch(error => console.log(error))
|
---|
31 |
|
---|
32 | }
|
---|
33 |
|
---|
34 | changeValue = (event, newValue) => {
|
---|
35 | this.setState({
|
---|
36 | value: newValue
|
---|
37 | });
|
---|
38 | };
|
---|
39 |
|
---|
40 | handleChange = () => {
|
---|
41 | this.props.changeHandler({priceRange: this.state.value.join('-')})
|
---|
42 | localStorage.setItem('priceRange',this.state.value.join('-'))
|
---|
43 | }
|
---|
44 |
|
---|
45 |
|
---|
46 | render() {
|
---|
47 | return (
|
---|
48 | <div className="sliderPriceContainer">
|
---|
49 | <label className="sliderPriceLabel">Цена:</label>
|
---|
50 | <Box className="sliderBox" sx={{ width: 280 }}>
|
---|
51 | <Slider
|
---|
52 | id="priceSlider"
|
---|
53 | getAriaLabel={() => 'Price range'}
|
---|
54 | value={this.state.value}
|
---|
55 | onChange={this.changeValue}
|
---|
56 | onChangeCommitted={this.handleChange}
|
---|
57 | valueLabelDisplay="auto"
|
---|
58 | min={this.state.minValue}
|
---|
59 | max={this.state.maxValue}
|
---|
60 | />
|
---|
61 | </Box>
|
---|
62 | </div>
|
---|
63 | );
|
---|
64 | }
|
---|
65 | }
|
---|
66 |
|
---|
67 | export default FilterPriceComponent
|
---|
68 |
|
---|