create settings segment component, create new section on settings page

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

@@ -0,0 +1,43 @@
+import Share from 'react-native-share'
+
+import { getCycleDaysSortedByDate } from '../../../db'
+import getDataAsCsvDataUri from '../../../lib/import-export/export-to-csv'
+import alertError from '../alert-error'
+import settings from '../../../i18n/en/settings'
+import RNFS from 'react-native-fs'
+
+export default async function exportData() {
+  let data
+  const labels = settings.export
+  const cycleDaysByDate = getCycleDaysSortedByDate()
+
+  if (!cycleDaysByDate.length) return alertError(labels.errors.noData)
+
+  try {
+    data = getDataAsCsvDataUri(cycleDaysByDate)
+    if (!data) {
+      return alertError(labels.errors.noData)
+    }
+  } catch (err) {
+    console.error(err)
+    return alertError(labels.errors.couldNotConvert)
+  }
+
+  try {
+    const path = RNFS.DocumentDirectoryPath + '/data.csv'
+    await RNFS.writeFile(path, data)
+
+    await Share.open({
+      title: labels.title,
+      url: `file://${path}`,
+      subject: labels.subject,
+      type: 'text/csv',
+      showAppsToView: true
+    })
+
+  } catch (err) {
+    console.error(err)
+    return alertError(labels.errors.problemSharing)
+  }
+}
+

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

@@ -0,0 +1,59 @@
+import { Alert } from 'react-native'
+import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker'
+import rnfs from 'react-native-fs'
+import importCsv from '../../../lib/import-export/import-from-csv'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
+import labels from '../../../i18n/en/settings'
+import alertError from '../alert-error'
+
+export default function openImportDialogAndImport() {
+  Alert.alert(
+    labels.import.title,
+    labels.import.message,
+    [{
+      text: labels.import.replaceOption,
+      onPress: () => getFileContentAndImport({ deleteExisting: false })
+    }, {
+      text: labels.import.deleteOption,
+      onPress: () => getFileContentAndImport({ deleteExisting: true })
+    }, {
+      text: sharedLabels.cancel, style: 'cancel', onPress: () => { }
+    }]
+  )
+}
+
+async function getFileContentAndImport({ deleteExisting }) {
+  let fileInfo
+  try {
+    fileInfo = await new Promise((resolve, reject) => {
+      DocumentPicker.show({
+        filetype: [DocumentPickerUtil.allFiles()],
+      }, (err, res) => {
+        if (err) return reject(err)
+        resolve(res)
+      })
+    })
+  } catch (err) {
+    // because cancelling also triggers an error, we do nothing here
+    return
+  }
+
+  let fileContent
+  try {
+    fileContent = await rnfs.readFile(fileInfo.uri, 'utf8')
+  } catch (err) {
+    return importError(labels.import.errors.couldNotOpenFile)
+  }
+
+  try {
+    await importCsv(fileContent, deleteExisting)
+    Alert.alert(sharedLabels.successTitle, labels.import.success.message)
+  } catch(err) {
+    importError(err.message)
+  }
+}
+
+function importError(msg) {
+  const postFixed = `${msg}\n\n${labels.import.errors.postFix}`
+  alertError(postFixed)
+}

components/settings/data-management/index.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { ScrollView } from 'react-native'
+import labels from '../../../i18n/en/settings'
+import AppText from '../../app-text'
+import SettingsSegment from '../settings-segment'
+import SettingsButton from '../settings-button'
+import openImportDialogAndImport from './import-dialog'
+import openShareDialogAndExport from './export-dialog'
+
+const Settings = () => {
+  return (
+    <ScrollView>
+      <SettingsSegment title={labels.export.button}>
+        <AppText>{labels.export.segmentExplainer}</AppText>
+        <SettingsButton onPress={openShareDialogAndExport}>
+          {labels.export.button}
+        </SettingsButton>
+      </SettingsSegment>
+      <SettingsSegment title={labels.import.button}>
+        <AppText>{labels.import.segmentExplainer}</AppText>
+        <SettingsButton onPress={openImportDialogAndImport}>
+          {labels.import.button}
+        </SettingsButton>
+      </SettingsSegment>
+      <SettingsSegment title={labels.deleteSegment.title}>
+        <AppText>{labels.deleteSegment.explainer}</AppText>
+        <SettingsButton onPress={openImportDialogAndImport}>
+          {labels.deleteSegment.title}
+        </SettingsButton>
+      </SettingsSegment>
+    </ScrollView>
+  )
+}
+
+export default Settings