From 1c9eea3aa0b7159725ddad9ef7c4e535c81bbca6 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Wed, 19 Dec 2018 09:53:37 +0100 Subject: [PATCH] Split settings view up --- components/app.js | 4 +- components/menu.js | 2 +- components/settings/about.js | 14 ++-- .../{ => import-export}/export-dialog.js | 8 +- .../{ => import-export}/import-dialog.js | 8 +- components/settings/import-export/index.js | 50 +++++++++++++ components/settings/index.js | 75 ++----------------- components/settings/nfp-settings/index.js | 31 ++++++++ .../{ => nfp-settings}/temp-slider.js | 12 +-- .../settings/{ => nfp-settings}/use-cervix.js | 8 +- components/settings/password/index.js | 32 ++++---- components/settings/reminders/index.js | 22 ++++++ .../{ => reminders}/period-reminder.js | 8 +- .../{ => reminders}/temp-reminder-picker.js | 10 +-- components/settings/settings-menu.js | 38 ++++++++++ i18n/en/settings.js | 7 ++ 16 files changed, 210 insertions(+), 119 deletions(-) rename components/settings/{ => import-export}/export-dialog.js (79%) rename components/settings/{ => import-export}/import-dialog.js (86%) create mode 100644 components/settings/import-export/index.js create mode 100644 components/settings/nfp-settings/index.js rename components/settings/{ => nfp-settings}/temp-slider.js (86%) rename components/settings/{ => nfp-settings}/use-cervix.js (86%) create mode 100644 components/settings/reminders/index.js rename components/settings/{ => reminders}/period-reminder.js (84%) rename components/settings/{ => reminders}/temp-reminder-picker.js (89%) create mode 100644 components/settings/settings-menu.js diff --git a/components/app.js b/components/app.js index ce0eaf2..93a7428 100644 --- a/components/app.js +++ b/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 ( diff --git a/components/menu.js b/components/menu.js index 4e80cbb..7a692e0 100644 --- a/components/menu.js +++ b/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)} ) diff --git a/components/settings/about.js b/components/settings/about.js index 85a7721..fbeb32e 100644 --- a/components/settings/about.js +++ b/components/settings/about.js @@ -1,17 +1,17 @@ import React, { Component } from 'react' -import { - View -} from 'react-native' +import { View, ScrollView } 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 ( - - {`${labels.aboutSection.title} `} - {`${labels.aboutSection.segmentExplainer} `} - + + + {`${labels.aboutSection.title} `} + {`${labels.aboutSection.segmentExplainer} `} + + ) } } diff --git a/components/settings/export-dialog.js b/components/settings/import-export/export-dialog.js similarity index 79% rename from components/settings/export-dialog.js rename to components/settings/import-export/export-dialog.js index 97db9d3..e568a19 100644 --- a/components/settings/export-dialog.js +++ b/components/settings/import-export/export-dialog.js @@ -1,9 +1,9 @@ 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 { 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() { diff --git a/components/settings/import-dialog.js b/components/settings/import-export/import-dialog.js similarity index 86% rename from components/settings/import-dialog.js rename to components/settings/import-export/import-dialog.js index 5701b08..fe374c8 100644 --- a/components/settings/import-dialog.js +++ b/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 { shared as sharedLabels } from '../../i18n/en/labels' -import { settings as labels } from '../../i18n/en/settings' -import alertError from './alert-error' +import importCsv from '../../../lib/import-export/import-from-csv' +import { shared as sharedLabels } from '../../../i18n/en/labels' +import { settings as labels } from '../../../i18n/en/settings' +import alertError from '../alert-error' export default function openImportDialogAndImport() { Alert.alert( diff --git a/components/settings/import-export/index.js b/components/settings/import-export/index.js new file mode 100644 index 0000000..4ea77dd --- /dev/null +++ b/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 ( + + + + {labels.export.button} + + {labels.export.segmentExplainer} + + + {labels.export.button} + + + + + + {labels.import.button} + + {labels.import.segmentExplainer} + + + {labels.import.button} + + + + + ) + } +} diff --git a/components/settings/index.js b/components/settings/index.js index 8091867..3bc35c0 100644 --- a/components/settings/index.js +++ b/components/settings/index.js @@ -1,69 +1,10 @@ -import React, { Component } from 'react' -import { - View, - TouchableOpacity, - ScrollView, -} from 'react-native' -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' +import SettingsMenu from './settings-menu' +import Reminders from './reminders' +import NfpSettings from './nfp-settings' +import ImportExport from './import-export' +import Password from './password' +import About from './about' -export default class Settings extends Component { - constructor(props) { - super(props) - this.state = {} - } - - render() { - return ( - - - - - - {labels.tempScale.segmentTitle} - - {labels.tempScale.segmentExplainer} - - - - - - - {labels.export.button} - - {labels.export.segmentExplainer} - - - {labels.export.button} - - - - - - {labels.import.button} - - {labels.import.segmentExplainer} - - - {labels.import.button} - - - - - - ) - } +export default { + SettingsMenu, Reminders, NfpSettings, ImportExport, Password, About } diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js new file mode 100644 index 0000000..ceb48a8 --- /dev/null +++ b/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 ( + + + + + {labels.tempScale.segmentTitle} + + {labels.tempScale.segmentExplainer} + + + + ) + } +} diff --git a/components/settings/temp-slider.js b/components/settings/nfp-settings/temp-slider.js similarity index 86% rename from components/settings/temp-slider.js rename to components/settings/nfp-settings/temp-slider.js index 7052299..c4e2988 100644 --- a/components/settings/temp-slider.js +++ b/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' -import { secondaryColor } from '../../styles/index' -import { settings as labels } from '../../i18n/en/settings' -import config from '../../config' -import alertError from './alert-error' +} from '../../../local-storage' +import { secondaryColor } from '../../../styles/index' +import { settings as labels } from '../../../i18n/en/settings' +import config from '../../../config' +import alertError from '../alert-error' export default class TempSlider extends Component { constructor(props) { diff --git a/components/settings/use-cervix.js b/components/settings/nfp-settings/use-cervix.js similarity index 86% rename from components/settings/use-cervix.js rename to components/settings/nfp-settings/use-cervix.js index 668a0e8..2c7f868 100644 --- a/components/settings/use-cervix.js +++ b/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' -import styles from '../../styles/index' -import { settings as labels } from '../../i18n/en/settings' +} from '../../../local-storage' +import styles from '../../../styles/index' +import { settings as labels } from '../../../i18n/en/settings' export default class UseCervixSetting extends Component { constructor() { diff --git a/components/settings/password/index.js b/components/settings/password/index.js index 47e4848..22b48c7 100644 --- a/components/settings/password/index.js +++ b/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 ( - + + - - {labels.passwordSettings.title} - + + {labels.passwordSettings.title} + - {this.state.showUpdateAndDelete ? - {labels.passwordSettings.explainerEnabled} - : - {labels.passwordSettings.explainerDisabled} - } + {this.state.showUpdateAndDelete ? + {labels.passwordSettings.explainerEnabled} + : + {labels.passwordSettings.explainerDisabled} + } - {this.state.showUpdateAndDelete && + {this.state.showUpdateAndDelete && - } + } - {this.state.showCreate && + {this.state.showCreate && - } + } - + + ) } } \ No newline at end of file diff --git a/components/settings/reminders/index.js b/components/settings/reminders/index.js new file mode 100644 index 0000000..ca234d1 --- /dev/null +++ b/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 ( + + + + + ) + } +} diff --git a/components/settings/period-reminder.js b/components/settings/reminders/period-reminder.js similarity index 84% rename from components/settings/period-reminder.js rename to components/settings/reminders/period-reminder.js index 1bc41cb..b091741 100644 --- a/components/settings/period-reminder.js +++ b/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' -import styles from '../../styles/index' -import { settings as labels } from '../../i18n/en/settings' +} from '../../../local-storage' +import styles from '../../../styles/index' +import { settings as labels } from '../../../i18n/en/settings' export default class PeriodReminderPicker extends Component { constructor(props) { diff --git a/components/settings/temp-reminder-picker.js b/components/settings/reminders/temp-reminder-picker.js similarity index 89% rename from components/settings/temp-reminder-picker.js rename to components/settings/reminders/temp-reminder-picker.js index 48a7611..1a37d41 100644 --- a/components/settings/temp-reminder-picker.js +++ b/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' -import styles from '../../styles/index' -import { settings as labels } from '../../i18n/en/settings' -import padWithZeros from '../helpers/pad-time-with-zeros' +} from '../../../local-storage' +import styles from '../../../styles/index' +import { settings as labels } from '../../../i18n/en/settings' +import padWithZeros from '../../helpers/pad-time-with-zeros' export default class TempReminderPicker extends Component { constructor(props) { diff --git a/components/settings/settings-menu.js b/components/settings/settings-menu.js new file mode 100644 index 0000000..502759a --- /dev/null +++ b/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 ( + + { menu.map(menuItem)} + + ) + + function menuItem(item) { + return ( + props.navigate(item.component)} + > + {item.title} + + ) + } +} \ No newline at end of file diff --git a/i18n/en/settings.js b/i18n/en/settings.js index cc30955..24d9ef7 100644 --- a/i18n/en/settings.js +++ b/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',