Chore/make function components 4

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