Chore/make function components 4

components/settings/common/confirm-with-password.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Alert, StyleSheet, View } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
@@ -11,79 +11,66 @@ import { Containers } from '../../../styles'
 import settings from '../../../i18n/en/settings'
 import { shared } from '../../../i18n/en/labels'
 
-export default class ConfirmWithPassword extends Component {
+const ConfirmWithPassword = ({ onSuccess, onCancel }) => {
-  constructor() {
+  const [password, setPassword] = useState(null)
-    super()
 
-    this.state = { password: null }
+  const checkPassword = async (hash) => {
-    nodejs.channel.addListener('password-check', this.checkPassword, this)
+    try {
+      await openDb(hash)
+      onSuccess()
+    } catch (err) {
+      onIncorrectPassword()
+    }
   }
 
-  componentWillUnmount() {
+  useEffect(() => {
-    nodejs.channel.removeListener('password-check', this.checkPassword)
+    nodejs.channel.addListener('password-check', checkPassword, this)
+    return () => {
+      nodejs.channel.removeListener('password-check', checkPassword)
     }
+  }, [])
 
-  resetPasswordInput = () => {
+  const onIncorrectPassword = () => {
-    this.setState({ password: null })
-  }
-
-  onIncorrectPassword = () => {
     Alert.alert(shared.incorrectPassword, shared.incorrectPasswordMessage, [
       {
         text: shared.cancel,
-        onPress: this.props.onCancel,
+        onPress: onCancel,
       },
       {
         text: shared.tryAgain,
-        onPress: this.resetPasswordInput,
+        onPress: () => setPassword(null),
       },
     ])
   }
 
-  checkPassword = async (hash) => {
+  const initPasswordCheck = () => {
-    try {
+    requestHash('password-check', password)
-      await openDb(hash)
-      this.props.onSuccess()
-    } catch (err) {
-      this.onIncorrectPassword()
-    }
   }
 
-  handlePasswordInput = (password) => {
-    this.setState({ password })
-  }
-
-  initPasswordCheck = () => {
-    requestHash('password-check', this.state.password)
-  }
-
-  render() {
-    const { password } = this.state
   const labels = settings.passwordSettings
   const isPassword = password !== null
 
   return (
-      <React.Fragment>
+    <>
       <AppTextInput
-          onChangeText={this.handlePasswordInput}
+        onChangeText={setPassword}
         placeholder={labels.enterCurrent}
         value={password}
-          secureTextEntry={true}
+        secureTextEntry
       />
       <View style={styles.container}>
-          <Button onPress={this.props.onCancel}>{shared.cancel}</Button>
+        <Button onPress={onCancel}>{shared.cancel}</Button>
         <Button
           disabled={!isPassword}
           isCTA={isPassword}
-            onPress={this.initPasswordCheck}
+          onPress={initPasswordCheck}
         >
           {shared.confirmToProceed}
         </Button>
       </View>
-      </React.Fragment>
+    </>
   )
 }
-}
 
 ConfirmWithPassword.propTypes = {
   onSuccess: PropTypes.func,
@@ -95,3 +82,5 @@ const styles = StyleSheet.create({
     ...Containers.rowContainer,
   },
 })
+
+export default ConfirmWithPassword

components/settings/data-management/delete-data.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import RNFS from 'react-native-fs'
 import { Alert } from 'react-native'
 import PropTypes from 'prop-types'
@@ -17,26 +17,21 @@ import { EXPORT_FILE_NAME } from './constants'
 
 const exportedFilePath = `${RNFS.DocumentDirectoryPath}/${EXPORT_FILE_NAME}`
 
-export default class DeleteData extends Component {
+const DeleteData = ({ onStartDeletion, isDeletingData }) => {
-  constructor() {
+  const isPasswordSet = hasEncryptionObservable.value
-    super()
+  const [isConfirmingWithPassword, setIsConfirmingWithPassword] =
+    useState(false)
 
-    this.state = {
+  const onAlertConfirmation = () => {
-      isPasswordSet: hasEncryptionObservable.value,
+    onStartDeletion()
-      isConfirmingWithPassword: false,
+    if (isPasswordSet) {
-    }
+      setIsConfirmingWithPassword(true)
-  }
-
-  onAlertConfirmation = () => {
-    this.props.onStartDeletion()
-    if (this.state.isPasswordSet) {
-      this.setState({ isConfirmingWithPassword: true })
     } else {
-      this.deleteAppData()
+      deleteAppData()
     }
   }
 
-  alertBeforeDeletion = async () => {
+  const alertBeforeDeletion = async () => {
     const { question, message, confirmation, errors } = settings.deleteSegment
     if (isDbEmpty() && !(await RNFS.exists(exportedFilePath))) {
       alertError(errors.noData)
@@ -44,64 +39,61 @@ export default class DeleteData extends Component {
       Alert.alert(question, message, [
         {
           text: confirmation,
-          onPress: this.onAlertConfirmation,
+          onPress: onAlertConfirmation,
         },
         {
           text: sharedLabels.cancel,
           style: 'cancel',
-          onPress: this.cancelConfirmationWithPassword,
+          onPress: cancelConfirmationWithPassword,
         },
       ])
     }
   }
 
-  deleteExportedFile = async () => {
+  const deleteExportedFile = async () => {
     if (await RNFS.exists(exportedFilePath)) {
       await RNFS.unlink(exportedFilePath)
     }
   }
 
-  deleteAppData = async () => {
+  const deleteAppData = async () => {
     const { errors, success } = settings.deleteSegment
 
     try {
       if (!isDbEmpty()) {
         clearDb()
       }
-      await this.deleteExportedFile()
+      await deleteExportedFile()
       showToast(success.message)
     } catch (err) {
       alertError(errors.couldNotDeleteFile)
     }
-    this.cancelConfirmationWithPassword()
+    cancelConfirmationWithPassword()
   }
 
-  cancelConfirmationWithPassword = () => {
+  const cancelConfirmationWithPassword = () => {
-    this.setState({ isConfirmingWithPassword: false })
+    setIsConfirmingWithPassword(false)
   }
 
-  render() {
-    const { isConfirmingWithPassword } = this.state
-    const { isDeletingData } = this.props
-
   if (isConfirmingWithPassword && isDeletingData) {
     return (
       <ConfirmWithPassword
-          onSuccess={this.deleteAppData}
+        onSuccess={deleteAppData}
-          onCancel={this.cancelConfirmationWithPassword}
+        onCancel={cancelConfirmationWithPassword}
       />
     )
   }
 
   return (
-      <Button isCTA onPress={this.alertBeforeDeletion}>
+    <Button isCTA onPress={alertBeforeDeletion}>
       {settings.deleteSegment.title}
     </Button>
   )
 }
-}
 
 DeleteData.propTypes = {
   isDeletingData: PropTypes.bool,
   onStartDeletion: PropTypes.func.isRequired,
 }
+
+export default DeleteData

components/settings/data-management/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 
 import AppLoadingView from '../../common/app-loading'
 import AppPage from '../../common/app-page'
@@ -13,65 +13,44 @@ import DeleteData from './delete-data'
 import labels from '../../../i18n/en/settings'
 import { ACTION_DELETE, ACTION_EXPORT, ACTION_IMPORT } from '../../../config'
 
-export default class DataManagement extends Component {
+const DataManagement = () => {
-  constructor(props) {
+  const [isLoading, setIsLoading] = useState(false)
-    super(props)
+  const [currentAction, setCurrentAction] = useState(null)
 
-    this.state = {
+  const startImportFlow = async (shouldDeleteExistingData) => {
-      isLoading: false,
+    setIsLoading(true)
-      currentAction: null,
-    }
-  }
-
-  startLoading = () => {
-    this.setState({ isLoading: true })
-  }
-
-  endLoading = () => {
-    this.setState({ isLoading: false })
-  }
-
-  startImportFlow = async (shouldDeleteExistingData) => {
-    this.startLoading()
     const fileContent = await getFileContent()
     if (fileContent) {
       await importData(shouldDeleteExistingData, fileContent)
     }
-    this.endLoading()
+    setIsLoading(false)
   }
 
-  startExport = () => {
+  const startExport = () => {
-    this.setCurrentAction(ACTION_EXPORT)
+    setCurrentAction(ACTION_EXPORT)
     openShareDialogAndExport()
   }
 
-  startImport = () => {
+  const startImport = () => {
-    this.setCurrentAction(ACTION_IMPORT)
+    setCurrentAction(ACTION_IMPORT)
-    openImportDialog(this.startImportFlow)
+    openImportDialog(startImportFlow)
   }
 
-  setCurrentAction = (action) => {
+  if (isLoading) return <AppLoadingView />
-    this.setState({ currentAction: action })
-  }
 
-  render() {
-    const { currentAction, isLoading } = this.state
   const isDeletingData = currentAction === ACTION_DELETE
 
   return (
-      <React.Fragment>
-        {isLoading && <AppLoadingView />}
-        {!isLoading && (
     <AppPage>
       <Segment title={labels.export.button}>
         <AppText>{labels.export.segmentExplainer}</AppText>
-              <Button isCTA onPress={this.startExport}>
+        <Button isCTA onPress={startExport}>
           {labels.export.button}
         </Button>
       </Segment>
       <Segment title={labels.import.button}>
         <AppText>{labels.import.segmentExplainer}</AppText>
-              <Button isCTA onPress={this.startImport}>
+        <Button isCTA onPress={startImport}>
           {labels.import.button}
         </Button>
       </Segment>
@@ -79,12 +58,11 @@ export default class DataManagement extends Component {
         <AppText>{labels.deleteSegment.explainer}</AppText>
         <DeleteData
           isDeletingData={isDeletingData}
-                onStartDeletion={() => this.setCurrentAction(ACTION_DELETE)}
+          onStartDeletion={() => setCurrentAction(ACTION_DELETE)}
         />
       </Segment>
     </AppPage>
-        )}
-      </React.Fragment>
   )
 }
-}
+
+export default DataManagement

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,22 +12,16 @@ import { useCervixObservable, saveUseCervix } from '../../../local-storage'
 import { Colors, Spacing, Typography } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 
-export default class Settings extends Component {
+const Settings = () => {
-  constructor(props) {
+  const [shouldUseCervix, setShouldUseCervix] = useState(
-    super(props)
+    useCervixObservable.value
+  )
 
-    this.state = {
+  const onCervixToggle = (value) => {
-      shouldUseCervix: useCervixObservable.value,
+    setShouldUseCervix(value)
-    }
-  }
-
-  onCervixToggle = (value) => {
-    this.setState({ shouldUseCervix: value })
     saveUseCervix(value)
   }
 
-  render() {
-    const { shouldUseCervix } = this.state
   const cervixText = shouldUseCervix
     ? labels.useCervix.cervixModeOn
     : labels.useCervix.cervixModeOff
@@ -36,7 +30,7 @@ export default class Settings extends Component {
     <AppPage>
       <Segment title={labels.useCervix.title}>
         <AppSwitch
-            onToggle={this.onCervixToggle}
+          onToggle={onCervixToggle}
           text={cervixText}
           value={shouldUseCervix}
         />
@@ -62,7 +56,8 @@ export default class Settings extends Component {
     </AppPage>
   )
 }
-}
+
+export default Settings
 
 const styles = StyleSheet.create({
   icon: {

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,30 +10,21 @@ 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 {
+const TemperatureSlider = () => {
-  constructor(props) {
+  const savedValue = scaleObservable.value
-    super(props)
+  const [minTemperature, setMinTemperature] = useState(savedValue.min)
-
+  const [maxTemperature, setMaxTemperature] = useState(savedValue.max)
-    const { min, max } = scaleObservable.value
-    this.state = { minTemperature: min, maxTemperature: max }
-  }
-
-  onTemperatureSliderChange = (values) => {
-    this.setState({
-      minTemperature: values[0],
-      maxTemperature: values[1],
-    })
 
+  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
@@ -43,7 +34,7 @@ export default class TemperatureSlider extends Component {
         markerOffsetY={Sizes.tiny}
         max={TEMP_MAX}
         min={TEMP_MIN}
-          onValuesChange={this.onTemperatureSliderChange}
+        onValuesChange={onTemperatureSliderChange}
         selectedStyle={styles.sliderAccentBackground}
         step={TEMP_SLIDER_STEP}
         trackStyle={styles.slider}
@@ -53,7 +44,8 @@ export default class TemperatureSlider extends Component {
     </View>
   )
 }
-}
+
+export default TemperatureSlider
 
 const styles = StyleSheet.create({
   container: {