create settings segment component, create new section on settings page

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

components/settings/import-export/index.js

@@ -1,50 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View, ScrollView,
-  TouchableOpacity,
-} from 'react-native'
-import styles from '../../../styles/index'
-import labels from '../../../i18n/en/settings'
-import AppText from '../../app-text'
-import openImportDialogAndImport from './import-dialog'
-import openShareDialogAndExport from './export-dialog'
-
-export default class Settings extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {}
-  }
-
-  render() {
-    return (
-      <ScrollView>
-        <View style={styles.settingsSegment}>
-          <AppText style={styles.settingsSegmentTitle}>
-            {labels.export.button}
-          </AppText>
-          <AppText>{labels.export.segmentExplainer}</AppText>
-          <TouchableOpacity
-            onPress={openShareDialogAndExport}
-            style={styles.settingsButton}>
-            <AppText style={styles.settingsButtonText}>
-              {labels.export.button}
-            </AppText>
-          </TouchableOpacity>
-        </View>
-        <View style={styles.settingsSegment}>
-          <AppText style={styles.settingsSegmentTitle}>
-            {labels.import.button}
-          </AppText>
-          <AppText>{labels.import.segmentExplainer}</AppText>
-          <TouchableOpacity
-            onPress={openImportDialogAndImport}
-            style={styles.settingsButton}>
-            <AppText style={styles.settingsButtonText}>
-              {labels.import.button}
-            </AppText>
-          </TouchableOpacity>
-        </View>
-      </ScrollView>
-    )
-  }
-}

components/settings/index.js

@@ -1,9 +1,9 @@
 import Reminders from './reminders'
 import NfpSettings from './nfp-settings'
-import ImportExport from './import-export'
+import DataManagement from './data-management'
 import Password from './password'
 import About from './about'
 
 export default {
-  Reminders, NfpSettings, ImportExport, Password, About
+  Reminders, NfpSettings, DataManagement, Password, About
 }

components/settings/password/create.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { View } from 'react-native'
 import settings from '../../../i18n/en/settings'
 import EnterNewPassword from './enter-new-password'
-import SettingsButton from './settings-button'
+import SettingsButton from '../settings-button'
 import showBackUpReminder from './show-backup-reminder'
 
 export default class CreatePassword extends Component {

components/settings/password/enter-new-password.js

@@ -5,7 +5,7 @@ import nodejs from 'nodejs-mobile-react-native'
 import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
 import AppText from '../../app-text'
 import PasswordField from './password-field'
-import SettingsButton from './settings-button'
+import SettingsButton from '../settings-button'
 
 import styles from '../../../styles'
 import settings from '../../../i18n/en/settings'

components/settings/password/update.js

@@ -6,7 +6,7 @@ import settings from '../../../i18n/en/settings'
 import { requestHash } from '../../../db'
 import EnterNewPassword from './enter-new-password'
 import PasswordField from './password-field'
-import SettingsButton from './settings-button'
+import SettingsButton from '../settings-button'
 import showBackUpReminder from './show-backup-reminder'
 import checkCurrentPassword from './check-current-password'
 

components/settings/settings-button.js

@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { TouchableOpacity } from 'react-native'
-import AppText from '../../app-text'
-import styles from '../../../styles'
+import AppText from '../app-text'
+import styles from '../../styles'
 
 const SettingsButton = ({ children, ...props }) => {
   return (

components/settings/settings-menu.js

@@ -7,14 +7,12 @@ import styles from '../../styles/index'
 import settingsLabels from '../../i18n/en/settings'
 import AppText from '../app-text'
 
-console.log(settingsLabels.menuTitles)
 const labels = settingsLabels.menuTitles
-console.log(settingsLabels.menuTitles)
 
 const menu = [
   {title: labels.reminders, component: 'Reminders'},
   {title: labels.nfpSettings, component: 'NfpSettings'},
-  {title: labels.importExport, component: 'ImportExport'},
+  {title: labels.dataManagement, component: 'DataManagement'},
   {title: labels.password, component: 'Password'},
   {title: labels.about, component: 'About'}
 ]

components/settings/settings-segment.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { View } from 'react-native'
+import AppText from '../app-text'
+import styles from '../../styles'
+
+const SettingsSegment = ({ children, ...props }) => {
+  return (
+    <View style={styles.settingsSegment}>
+      <AppText style={styles.settingsSegmentTitle}>{props.title}</AppText>
+      {children}
+    </View>
+  )
+}
+
+SettingsSegment.propTypes = {
+  title: PropTypes.string.isRequired
+}
+
+export default SettingsSegment

i18n/en/labels.js

@@ -27,7 +27,7 @@ export const headerTitles = {
   SettingsMenu: 'Settings',
   Reminders: settingsTitles.reminders,
   NfpSettings: settingsTitles.nfpSettings,
-  ImportExport: settingsTitles.importExport,
+  DataManagement: settingsTitles.dataManagement,
   Password: settingsTitles.password,
   About: settingsTitles.about,
   BleedingEditView: 'Bleeding',

i18n/en/settings.js

@@ -2,7 +2,7 @@
 export default {
   menuTitles: {
     reminders: 'Reminders',
-    importExport: 'Import and Export',
+    dataManagement: 'Data management',
     nfpSettings: 'NFP settings',
     password: 'Password',
     about: 'About'
@@ -35,6 +35,10 @@ export default {
     },
     segmentExplainer: 'Import data in CSV format'
   },
+  deleteSegment: {
+    title: 'Delete app data',
+    explainer: 'Delete all app data from this phone'
+  },
   tempScale: {
     segmentTitle: 'Temperature scale',
     segmentExplainer: 'Change the minimum and maximum value for the temperature chart',