Split settings view up

components/app.js

@@ -7,7 +7,7 @@ import Calendar from './calendar'
 import CycleDay from './cycle-day/cycle-day-overview'
 import symptomViews from './cycle-day/symptoms'
 import Chart from './chart/chart'
-import Settings from './settings'
+import settingsViews from './settings'
 import Stats from './stats'
 import {headerTitles, menuTitles} from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
@@ -68,7 +68,7 @@ export default class App extends Component {
 
   render() {
     const page = {
-      Home, Calendar, CycleDay, Chart, Settings, Stats, ...symptomViews
+      Home, Calendar, CycleDay, Chart, ...settingsViews, Stats, ...symptomViews
     }[this.state.currentPage]
     return (
       <View style={{flex: 1}}>

components/menu.js

@@ -38,7 +38,7 @@ export default class Menu extends Component {
           { title: t.Calendar, icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
           { title: t.Chart, icon: 'chart-line', onPress: () => this.goTo('Chart') },
           { title: t.Stats, icon: 'chart-pie', onPress: () => this.goTo('Stats') },
-          { title: t.Settings, icon: 'settings', onPress: () => this.goTo('Settings') },
+          { title: t.Settings, icon: 'settings', onPress: () => this.goTo('SettingsMenu') },
         ].map(this.makeMenuItem)}
       </View >
     )

components/settings/about.js

@@ -1,17 +1,17 @@
 import React, { Component } from 'react'
-import {
+import { View, ScrollView } from 'react-native'
-  View
-} from 'react-native'
 import AppText from '../app-text'
 import styles from '../../styles/index'
 import { settings as labels } from '../../i18n/en/settings'
 export default class AboutSection extends Component {
   render() {
     return (
-      <View style={styles.settingsSegment}>
+      <ScrollView>
-        <AppText style={styles.settingsSegmentTitle}>{`${labels.aboutSection.title} `}</AppText>
+        <View style={styles.settingsSegment}>
-        <AppText>{`${labels.aboutSection.segmentExplainer} `}</AppText>
+          <AppText style={styles.settingsSegmentTitle}>{`${labels.aboutSection.title} `}</AppText>
-      </View>
+          <AppText>{`${labels.aboutSection.segmentExplainer} `}</AppText>
+        </View>
+      </ScrollView>
     )
   }
 }

components/settings/import-export/export-dialog.js

@@ -1,9 +1,9 @@
 import Share from 'react-native-share'
 
-import { getCycleDaysSortedByDate } from '../../db'
+import { getCycleDaysSortedByDate } from '../../../db'
-import getDataAsCsvDataUri from '../../lib/import-export/export-to-csv'
+import getDataAsCsvDataUri from '../../../lib/import-export/export-to-csv'
-import alertError from './alert-error'
+import alertError from '../alert-error'
-import { settings } from '../../i18n/en/settings'
+import { settings } from '../../../i18n/en/settings'
 import RNFS from 'react-native-fs'
 
 export default async function exportData() {

components/settings/import-export/import-dialog.js

@@ -1,10 +1,10 @@
 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 importCsv from '../../../lib/import-export/import-from-csv'
-import { shared as sharedLabels } from '../../i18n/en/labels'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
-import { settings as labels } from '../../i18n/en/settings'
+import { settings as labels } from '../../../i18n/en/settings'
-import alertError from './alert-error'
+import alertError from '../alert-error'
 
 export default function openImportDialogAndImport() {
   Alert.alert(

components/settings/import-export/index.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+import {
+  View, ScrollView,
+  TouchableOpacity,
+} from 'react-native'
+import styles from '../../../styles/index'
+import { settings as 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,69 +1,10 @@
-import React, { Component } from 'react'
+import SettingsMenu from './settings-menu'
-import {
+import Reminders from './reminders'
-  View,
+import NfpSettings from './nfp-settings'
-  TouchableOpacity,
+import ImportExport from './import-export'
-  ScrollView,
+import Password from './password'
-} from 'react-native'
+import About from './about'
-import styles from '../../styles/index'
-import { settings as labels } from '../../i18n/en/settings'
-import AppText from '../app-text'
-import TempReminderPicker from './temp-reminder-picker'
-import PeriodReminderPicker from './period-reminder'
-import TempSlider from './temp-slider'
-import AboutSection from './about'
-import openImportDialogAndImport from './import-dialog'
-import openShareDialogAndExport from './export-dialog'
-import PasswordSetting from './password'
-import UseCervixSetting from './use-cervix'
 
-export default class Settings extends Component {
+export default {
-  constructor(props) {
+  SettingsMenu, Reminders, NfpSettings, ImportExport, Password, About
-    super(props)
-    this.state = {}
-  }
-
-  render() {
-    return (
-      <ScrollView>
-        <TempReminderPicker/>
-        <UseCervixSetting/>
-        <View style={styles.settingsSegment}>
-          <AppText style={styles.settingsSegmentTitle}>
-            {labels.tempScale.segmentTitle}
-          </AppText>
-          <AppText>{labels.tempScale.segmentExplainer}</AppText>
-          <TempSlider/>
-        </View>
-        <PeriodReminderPicker/>
-        <PasswordSetting />
-        <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>
-        <AboutSection/>
-      </ScrollView>
-    )
-  }
 }

components/settings/nfp-settings/index.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import {
+  ScrollView, View
+} from 'react-native'
+import styles from '../../../styles'
+import { settings as labels } from '../../../i18n/en/settings'
+import AppText from '../../app-text'
+import TempSlider from './temp-slider'
+import UseCervixSetting from './use-cervix'
+
+export default class Settings extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <UseCervixSetting/>
+        <View style={styles.settingsSegment}>
+          <AppText style={styles.settingsSegmentTitle}>
+            {labels.tempScale.segmentTitle}
+          </AppText>
+          <AppText>{labels.tempScale.segmentExplainer}</AppText>
+          <TempSlider/>
+        </View>
+      </ScrollView>
+    )
+  }
+}

components/settings/nfp-settings/temp-slider.js

@@ -1,15 +1,15 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
 import Slider from '@ptomasroos/react-native-multi-slider'
-import AppText from '../app-text'
+import AppText from '../../app-text'
 import {
   scaleObservable,
   saveTempScale,
-} from '../../local-storage'
+} from '../../../local-storage'
-import { secondaryColor } from '../../styles/index'
+import { secondaryColor } from '../../../styles/index'
-import { settings as labels } from '../../i18n/en/settings'
+import { settings as labels } from '../../../i18n/en/settings'
-import config from '../../config'
+import config from '../../../config'
-import alertError from './alert-error'
+import alertError from '../alert-error'
 
 export default class TempSlider extends Component {
   constructor(props) {

components/settings/nfp-settings/use-cervix.js

@@ -4,13 +4,13 @@ import {
   TouchableOpacity,
   Switch
 } from 'react-native'
-import AppText from '../app-text'
+import AppText from '../../app-text'
 import {
   useCervixObservable,
   saveUseCervix
-} from '../../local-storage'
+} from '../../../local-storage'
-import styles from '../../styles/index'
+import styles from '../../../styles/index'
-import { settings as labels } from '../../i18n/en/settings'
+import { settings as labels } from '../../../i18n/en/settings'
 
 export default class UseCervixSetting extends Component {
   constructor() {

components/settings/password/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View } from 'react-native'
+import { View, ScrollView } from 'react-native'
 import CreatePassword from './create'
 import ChangePassword from './update'
 import DeletePassword from './delete'
@@ -21,30 +21,32 @@ export default class PasswordSetting extends Component {
 
   render() {
     return (
-      <View style={styles.settingsSegment}>
+      <ScrollView>
+        <View style={styles.settingsSegment}>
 
-        <AppText style={styles.settingsSegmentTitle}>
+          <AppText style={styles.settingsSegmentTitle}>
-          {labels.passwordSettings.title}
+            {labels.passwordSettings.title}
-        </AppText>
+          </AppText>
 
-        {this.state.showUpdateAndDelete ?
+          {this.state.showUpdateAndDelete ?
-          <AppText>{labels.passwordSettings.explainerEnabled}</AppText>
+            <AppText>{labels.passwordSettings.explainerEnabled}</AppText>
-          :
+            :
-          <AppText>{labels.passwordSettings.explainerDisabled}</AppText>
+            <AppText>{labels.passwordSettings.explainerDisabled}</AppText>
-        }
+          }
 
-        {this.state.showUpdateAndDelete &&
+          {this.state.showUpdateAndDelete &&
           <View>
             <ChangePassword/>
             <DeletePassword/>
           </View>
-        }
+          }
 
-        {this.state.showCreate &&
+          {this.state.showCreate &&
           <CreatePassword/>
-        }
+          }
 
-      </View>
+        </View>
+      </ScrollView>
     )
   }
 }

components/settings/reminders/index.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import {
+  ScrollView,
+} from 'react-native'
+import TempReminderPicker from './temp-reminder-picker'
+import PeriodReminderPicker from './period-reminder'
+
+export default class Settings extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <TempReminderPicker/>
+        <PeriodReminderPicker/>
+      </ScrollView>
+    )
+  }
+}

components/settings/reminders/period-reminder.js

@@ -3,13 +3,13 @@ import {
   View,
   Switch
 } from 'react-native'
-import AppText from '../app-text'
+import AppText from '../../app-text'
 import {
   periodReminderObservable,
   savePeriodReminder
-} from '../../local-storage'
+} from '../../../local-storage'
-import styles from '../../styles/index'
+import styles from '../../../styles/index'
-import { settings as labels } from '../../i18n/en/settings'
+import { settings as labels } from '../../../i18n/en/settings'
 
 export default class PeriodReminderPicker extends Component {
   constructor(props) {

components/settings/reminders/temp-reminder-picker.js

@@ -5,14 +5,14 @@ import {
   Switch
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
-import AppText from '../app-text'
+import AppText from '../../app-text'
 import {
   tempReminderObservable,
   saveTempReminder
-} from '../../local-storage'
+} from '../../../local-storage'
-import styles from '../../styles/index'
+import styles from '../../../styles/index'
-import { settings as labels } from '../../i18n/en/settings'
+import { settings as labels } from '../../../i18n/en/settings'
-import padWithZeros from '../helpers/pad-time-with-zeros'
+import padWithZeros from '../../helpers/pad-time-with-zeros'
 
 export default class TempReminderPicker extends Component {
   constructor(props) {

components/settings/settings-menu.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import {
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native'
+import styles from '../../styles/index'
+import { settings as settingsLabels } from '../../i18n/en/settings'
+import AppText from '../app-text'
+
+const labels = settingsLabels.menuTitles
+
+const menu = [
+  {title: labels.reminders, component: 'Reminders'},
+  {title: labels.nfpSettings, component: 'NfpSettings'},
+  {title: labels.importExport, component: 'ImportExport'},
+  {title: labels.password, component: 'Password'},
+  {title: labels.about, component: 'About'}
+]
+
+export default function SettingsMenu(props) {
+  return (
+    <ScrollView>
+      { menu.map(menuItem)}
+    </ScrollView>
+  )
+
+  function menuItem(item) {
+    return (
+      <TouchableOpacity
+        style={styles.settingsSegment}
+        key={item.title}
+        onPress={() => props.navigate(item.component)}
+      >
+        <AppText>{item.title}</AppText>
+      </TouchableOpacity>
+    )
+  }
+}

i18n/en/settings.js

@@ -1,4 +1,11 @@
 export const settings = {
+  menuTitles: {
+    reminders: 'Reminders',
+    importExport: 'Import and Export',
+    nfpSettings: 'NFP settings',
+    password: 'Password',
+    about: 'About'
+  },
   export: {
     errors: {
       noData: 'There is no data to export',