Add loading screen to data import

components/settings/data-management/import-dialog.js

@@ -6,23 +6,23 @@ import { shared as sharedLabels } from '../../../i18n/en/labels'
 import labels from '../../../i18n/en/settings'
 import alertError from '../shared/alert-error'
 
-export default function openImportDialogAndImport() {
+export function openImportDialog(onImportData) {
   Alert.alert(
     labels.import.title,
     labels.import.message,
     [{
       text: labels.import.replaceOption,
-      onPress: () => getFileContentAndImport({ deleteExisting: false })
+      onPress: () => onImportData(false)
     }, {
       text: labels.import.deleteOption,
-      onPress: () => getFileContentAndImport({ deleteExisting: true })
+      onPress: () => onImportData(true)
     }, {
       text: sharedLabels.cancel, style: 'cancel', onPress: () => { }
     }]
   )
 }
 
-async function getFileContentAndImport({ deleteExisting }) {
+export async function getFileContent() {
   let fileInfo
   try {
     fileInfo = await new Promise((resolve, reject) => {
@@ -45,8 +45,13 @@ async function getFileContentAndImport({ deleteExisting }) {
     return importError(labels.import.errors.couldNotOpenFile)
   }
 
+  return fileContent
+}
+
+export async function importData(shouldDeleteExistingData, fileContent) {
+
   try {
-    await importCsv(fileContent, deleteExisting)
+    await importCsv(fileContent, shouldDeleteExistingData)
     Alert.alert(sharedLabels.successTitle, labels.import.success.message)
   } catch(err) {
     importError(err.message)

components/settings/data-management/index.js

@@ -1,37 +1,76 @@
-import React from 'react'
-import { ScrollView } from 'react-native'
+import React, { Component } from 'react'
+import { ScrollView, View } from 'react-native'
 import AppText from '../../app-text'
 import FramedSegment from '../../framed-segment'
+import AppLoadingView from '../../app-loading'
 import SettingsButton from '../shared/settings-button'
-import openImportDialogAndImport from './import-dialog'
+import { openImportDialog, getFileContent, importData } from './import-dialog'
 import openShareDialogAndExport from './export-dialog'
 import DeleteData from './delete-data'
 import labels from '../../../i18n/en/settings'
 
-const DataManagement = () => {
-  return (
-    <ScrollView>
-      <FramedSegment title={labels.export.button}>
-        <AppText>{labels.export.segmentExplainer}</AppText>
-        <SettingsButton onPress={openShareDialogAndExport}>
-          {labels.export.button}
-        </SettingsButton>
-      </FramedSegment>
-      <FramedSegment title={labels.import.button}>
-        <AppText>{labels.import.segmentExplainer}</AppText>
-        <SettingsButton onPress={openImportDialogAndImport}>
-          {labels.import.button}
-        </SettingsButton>
-      </FramedSegment>
-      <FramedSegment
-        title={labels.deleteSegment.title}
-        last
-      >
-        <AppText>{labels.deleteSegment.explainer}</AppText>
-        <DeleteData />
-      </FramedSegment>
-    </ScrollView>
-  )
-}
+export default class DataManagement extends Component {
 
-export default DataManagement
+  constructor(props) {
+    super(props)
+    this.state = { isLoading: false }
+  }
+
+  onStartLoading = () => {
+    this.setState({ isLoading: true })
+  }
+
+  onEndLoading = () => {
+    this.setState({ isLoading: false })
+  }
+
+  onImportData = async (shouldDeleteExistingData) => {
+
+    try {
+      this.onStartLoading()
+      const fileContent = await getFileContent()
+      if (fileContent) {
+        await importData(shouldDeleteExistingData, fileContent)
+      }
+    } catch(err) {
+      return
+    } finally {
+      this.onEndLoading()
+    }
+  }
+
+  render() {
+    return (
+      <View flex={1}>
+        {this.state.isLoading && <AppLoadingView />}
+        {!this.state.isLoading &&
+          <ScrollView>
+            <View>
+              <FramedSegment title={labels.export.button}>
+                <AppText>{labels.export.segmentExplainer}</AppText>
+                <SettingsButton onPress={openShareDialogAndExport}>
+                  {labels.export.button}
+                </SettingsButton>
+              </FramedSegment>
+              <FramedSegment title={labels.import.button}>
+                <AppText>{labels.import.segmentExplainer}</AppText>
+                <SettingsButton
+                  onPress= {() => openImportDialog(this.onImportData)}
+                >
+                  {labels.import.button}
+                </SettingsButton>
+              </FramedSegment>
+              <FramedSegment
+                title={labels.deleteSegment.title}
+                last
+              >
+                <AppText>{labels.deleteSegment.explainer}</AppText>
+                <DeleteData />
+              </FramedSegment>
+            </View>
+          </ScrollView>
+        }
+      </View>
+    )
+  }
+}