Chore/make function components 4

components/settings/nfp-settings/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import AppIcon from '../../common/app-icon'
@@ -12,58 +12,53 @@ import { useCervixObservable, saveUseCervix } from '../../../local-storage'
 import { Colors, Spacing, Typography } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 
-export default class Settings extends Component {
-  constructor(props) {
-    super(props)
+const Settings = () => {
+  const [shouldUseCervix, setShouldUseCervix] = useState(
+    useCervixObservable.value
+  )
 
-    this.state = {
-      shouldUseCervix: useCervixObservable.value,
-    }
-  }
-
-  onCervixToggle = (value) => {
-    this.setState({ shouldUseCervix: value })
+  const onCervixToggle = (value) => {
+    setShouldUseCervix(value)
     saveUseCervix(value)
   }
 
-  render() {
-    const { shouldUseCervix } = this.state
-    const cervixText = shouldUseCervix
-      ? labels.useCervix.cervixModeOn
-      : labels.useCervix.cervixModeOff
+  const cervixText = shouldUseCervix
+    ? labels.useCervix.cervixModeOn
+    : labels.useCervix.cervixModeOff
 
-    return (
-      <AppPage>
-        <Segment title={labels.useCervix.title}>
-          <AppSwitch
-            onToggle={this.onCervixToggle}
-            text={cervixText}
-            value={shouldUseCervix}
+  return (
+    <AppPage>
+      <Segment title={labels.useCervix.title}>
+        <AppSwitch
+          onToggle={onCervixToggle}
+          text={cervixText}
+          value={shouldUseCervix}
+        />
+      </Segment>
+      {/* for iOS disabled temporarily, TODO https://gitlab.com/bloodyhealth/drip/-/issues/545 */}
+      {Platform.OS !== 'ios' && (
+        <Segment title={labels.tempScale.segmentTitle}>
+          <AppText>{labels.tempScale.segmentExplainer}</AppText>
+          <TemperatureSlider />
+        </Segment>
+      )}
+      <Segment last>
+        <View style={styles.line}>
+          <AppIcon
+            color={Colors.purple}
+            name="info-with-circle"
+            style={styles.icon}
           />
-        </Segment>
-        {/* for iOS disabled temporarily, TODO https://gitlab.com/bloodyhealth/drip/-/issues/545 */}
-        {Platform.OS !== 'ios' && (
-          <Segment title={labels.tempScale.segmentTitle}>
-            <AppText>{labels.tempScale.segmentExplainer}</AppText>
-            <TemperatureSlider />
-          </Segment>
-        )}
-        <Segment last>
-          <View style={styles.line}>
-            <AppIcon
-              color={Colors.purple}
-              name="info-with-circle"
-              style={styles.icon}
-            />
-            <AppText style={styles.title}>{labels.preOvu.title}</AppText>
-          </View>
-          <AppText>{labels.preOvu.note}</AppText>
-        </Segment>
-      </AppPage>
-    )
-  }
+          <AppText style={styles.title}>{labels.preOvu.title}</AppText>
+        </View>
+        <AppText>{labels.preOvu.note}</AppText>
+      </Segment>
+    </AppPage>
+  )
 }
 
+export default Settings
+
 const styles = StyleSheet.create({
   icon: {
     marginRight: Spacing.base,

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',