Changeset dbd4834 for phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js

Timestamp:

09/07/22 00:49:45 (22 months ago)

Author:

Marko <Marko@…>

Branches:

master

Children:

f25d07e

Parents:

dfd5d87

Message:

Homepage, login and register components added

File:

• phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js (modified) (1 diff)

phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js

@@ -3 +3 @@
 import Slider from '@mui/material/Slider';
 import "./FilterPriceComponent.css"
+import axios from 'axios';
 
-function valuetext(value) {
-  return `${value}°C`;
-}
+export class FilterPriceComponent extends React.Component {
 
-export default function RangeSlider() {
-  const [value, setValue] = React.useState([20, 37]);
+  constructor(props) {
+    super(props)
+  
+    this.state = {
+      value: [1000,150000],
+      minValue: 0,
+      maxValue: 0
+    }
+  }
 
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
+  componentDidMount(){
+
+
+  axios.get('/lowestPrice')
+    .then(response => this.setState({minValue: response.data}))
+    .catch(error => console.log(error)) 
+
+    axios.get('/highestPrice')
+    .then(response => this.setState({
+      maxValue: response.data,
+    }))
+    .catch(error => console.log(error))
+
+  }
+
+  changeValue = (event, newValue) => {
+    this.setState({
+      value: newValue
+    });
   };
 
-  return (
-    <div id="priceContainer">
-      <label id="priceLabel">Цена:</label>
-    <Box id="box" sx={{ width: 350 }}>
+  handleChange = () => {
+    this.props.changeHandler({priceRange: this.state.value.join('-')})
+  }
+
+
+  render() {
+    return (
+      <div className="sliderPriceContainer">
+      <label className="sliderPriceLabel">Цена:</label>
+    <Box className="sliderBox" sx={{ width: 280 }}>
       <Slider
-      id="slider"
+      id="priceSlider"
         getAriaLabel={() => 'Price range'}
-        value={value}
-        onChange={handleChange}
+        value={this.state.value}
+        onChange={this.changeValue}
+        onChangeCommitted={this.handleChange}
         valueLabelDisplay="auto"
-        getAriaValueText={valuetext}
+        min={this.state.minValue}
+        max={this.state.maxValue}
       />
     </Box>
     </div>
   );
+  }
 }
+
+export default FilterPriceComponent
+