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,