Chore/make function components 4

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 {
-  constructor() {
-    super()
+const DeleteData = ({ onStartDeletion, isDeletingData }) => {
+  const isPasswordSet = hasEncryptionObservable.value
+  const [isConfirmingWithPassword, setIsConfirmingWithPassword] =
+    useState(false)
 
-    this.state = {
-      isPasswordSet: hasEncryptionObservable.value,
-      isConfirmingWithPassword: false,
-    }
-  }
-
-  onAlertConfirmation = () => {
-    this.props.onStartDeletion()
-    if (this.state.isPasswordSet) {
-      this.setState({ isConfirmingWithPassword: true })
+  const onAlertConfirmation = () => {
+    onStartDeletion()
+    if (isPasswordSet) {
+      setIsConfirmingWithPassword(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 = () => {
-    this.setState({ isConfirmingWithPassword: false })
+  const cancelConfirmationWithPassword = () => {
+    setIsConfirmingWithPassword(false)
   }
 
-  render() {
-    const { isConfirmingWithPassword } = this.state
-    const { isDeletingData } = this.props
-
-    if (isConfirmingWithPassword && isDeletingData) {
-      return (
-        <ConfirmWithPassword
-          onSuccess={this.deleteAppData}
-          onCancel={this.cancelConfirmationWithPassword}
-        />
-      )
-    }
-
+  if (isConfirmingWithPassword && isDeletingData) {
     return (
-      <Button isCTA onPress={this.alertBeforeDeletion}>
-        {settings.deleteSegment.title}
-      </Button>
+      <ConfirmWithPassword
+        onSuccess={deleteAppData}
+        onCancel={cancelConfirmationWithPassword}
+      />
     )
   }
+
+  return (
+    <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,78 +13,56 @@ 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 {
-  constructor(props) {
-    super(props)
+const DataManagement = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [currentAction, setCurrentAction] = useState(null)
 
-    this.state = {
-      isLoading: false,
-      currentAction: null,
-    }
-  }
-
-  startLoading = () => {
-    this.setState({ isLoading: true })
-  }
-
-  endLoading = () => {
-    this.setState({ isLoading: false })
-  }
-
-  startImportFlow = async (shouldDeleteExistingData) => {
-    this.startLoading()
+  const startImportFlow = async (shouldDeleteExistingData) => {
+    setIsLoading(true)
     const fileContent = await getFileContent()
     if (fileContent) {
       await importData(shouldDeleteExistingData, fileContent)
     }
-    this.endLoading()
+    setIsLoading(false)
   }
 
-  startExport = () => {
-    this.setCurrentAction(ACTION_EXPORT)
+  const startExport = () => {
+    setCurrentAction(ACTION_EXPORT)
     openShareDialogAndExport()
   }
 
-  startImport = () => {
-    this.setCurrentAction(ACTION_IMPORT)
-    openImportDialog(this.startImportFlow)
+  const startImport = () => {
+    setCurrentAction(ACTION_IMPORT)
+    openImportDialog(startImportFlow)
   }
 
-  setCurrentAction = (action) => {
-    this.setState({ currentAction: action })
-  }
+  if (isLoading) return <AppLoadingView />
 
-  render() {
-    const { currentAction, isLoading } = this.state
-    const isDeletingData = currentAction === ACTION_DELETE
+  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}>
-                {labels.export.button}
-              </Button>
-            </Segment>
-            <Segment title={labels.import.button}>
-              <AppText>{labels.import.segmentExplainer}</AppText>
-              <Button isCTA onPress={this.startImport}>
-                {labels.import.button}
-              </Button>
-            </Segment>
-            <Segment title={labels.deleteSegment.title} last>
-              <AppText>{labels.deleteSegment.explainer}</AppText>
-              <DeleteData
-                isDeletingData={isDeletingData}
-                onStartDeletion={() => this.setCurrentAction(ACTION_DELETE)}
-              />
-            </Segment>
-          </AppPage>
-        )}
-      </React.Fragment>
-    )
-  }
+  return (
+    <AppPage>
+      <Segment title={labels.export.button}>
+        <AppText>{labels.export.segmentExplainer}</AppText>
+        <Button isCTA onPress={startExport}>
+          {labels.export.button}
+        </Button>
+      </Segment>
+      <Segment title={labels.import.button}>
+        <AppText>{labels.import.segmentExplainer}</AppText>
+        <Button isCTA onPress={startImport}>
+          {labels.import.button}
+        </Button>
+      </Segment>
+      <Segment title={labels.deleteSegment.title} last>
+        <AppText>{labels.deleteSegment.explainer}</AppText>
+        <DeleteData
+          isDeletingData={isDeletingData}
+          onStartDeletion={() => setCurrentAction(ACTION_DELETE)}
+        />
+      </Segment>
+    </AppPage>
+  )
 }
+
+export default DataManagement