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