Chore/make function components 4

components/settings/nfp-settings/temperature-slider.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import Slider from '@ptomasroos/react-native-multi-slider'
 
@@ -10,51 +10,43 @@ import { Colors, Sizes } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config'
 
-export default class TemperatureSlider extends Component {
-  constructor(props) {
-    super(props)
-
-    const { min, max } = scaleObservable.value
-    this.state = { minTemperature: min, maxTemperature: max }
-  }
-
-  onTemperatureSliderChange = (values) => {
-    this.setState({
-      minTemperature: values[0],
-      maxTemperature: values[1],
-    })
+const TemperatureSlider = () => {
+  const savedValue = scaleObservable.value
+  const [minTemperature, setMinTemperature] = useState(savedValue.min)
+  const [maxTemperature, setMaxTemperature] = useState(savedValue.max)
 
+  const onTemperatureSliderChange = ([min, max]) => {
+    setMinTemperature(min)
+    setMaxTemperature(max)
     try {
-      saveTempScale({ min: values[0], max: values[1] })
+      saveTempScale({ min, max })
     } catch (err) {
       alertError(labels.tempScale.saveError)
     }
   }
 
-  render() {
-    const { minTemperature, maxTemperature } = this.state
-
-    return (
-      <View style={styles.container}>
-        <Slider
-          customLabel={SliderLabel}
-          enableLabel={true}
-          markerStyle={styles.marker}
-          markerOffsetY={Sizes.tiny}
-          max={TEMP_MAX}
-          min={TEMP_MIN}
-          onValuesChange={this.onTemperatureSliderChange}
-          selectedStyle={styles.sliderAccentBackground}
-          step={TEMP_SLIDER_STEP}
-          trackStyle={styles.slider}
-          unselectedStyle={styles.sliderBackground}
-          values={[minTemperature, maxTemperature]}
-        />
-      </View>
-    )
-  }
+  return (
+    <View style={styles.container}>
+      <Slider
+        customLabel={SliderLabel}
+        enableLabel={true}
+        markerStyle={styles.marker}
+        markerOffsetY={Sizes.tiny}
+        max={TEMP_MAX}
+        min={TEMP_MIN}
+        onValuesChange={onTemperatureSliderChange}
+        selectedStyle={styles.sliderAccentBackground}
+        step={TEMP_SLIDER_STEP}
+        trackStyle={styles.slider}
+        unselectedStyle={styles.sliderBackground}
+        values={[minTemperature, maxTemperature]}
+      />
+    </View>
+  )
 }
 
+export default TemperatureSlider
+
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',