Split settings view up

2018-12-19 09:53:37 +01:00
parent f7fc65507e
commit 1c9eea3aa0
16 changed files with 210 additions and 119 deletions
@@ -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>
+    )
+  }
+}
@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Switch
+} from 'react-native'
+import AppText from '../../app-text'
+import {
+  periodReminderObservable,
+  savePeriodReminder
+} from '../../../local-storage'
+import styles from '../../../styles/index'
+import { settings as labels } from '../../../i18n/en/settings'
+
+export default class PeriodReminderPicker extends Component {
+  constructor(props) {
+    super(props)
+    this.state = periodReminderObservable.value
+  }
+
+  render() {
+    return (
+      <View style={styles.settingsSegment}>
+        <AppText style={styles.settingsSegmentTitle}>
+          {labels.periodReminder.title}
+        </AppText>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <View style={{ flex: 1 }}>
+            <AppText>{labels.periodReminder.reminderText}</AppText>
+          </View>
+          <Switch
+            value={this.state.enabled}
+            onValueChange={switchOn => {
+              this.setState({ enabled: switchOn })
+              savePeriodReminder({enabled: switchOn})
+            }}
+          />
+        </View>
+      </View>
+    )
+  }
+}
@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+import {
+  View,
+  TouchableOpacity,
+  Switch
+} from 'react-native'
+import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
+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'
+
+export default class TempReminderPicker extends Component {
+  constructor(props) {
+    super(props)
+    this.state = Object.assign({}, tempReminderObservable.value)
+  }
+
+  render() {
+    return (
+      <TouchableOpacity
+        style={styles.settingsSegment}
+        onPress={() => this.setState({ isTimePickerVisible: true })}
+      >
+        <AppText style={styles.settingsSegmentTitle}>
+          {labels.tempReminder.title}
+        </AppText>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <View style={{ flex: 1 }}>
+            {this.state.time && this.state.enabled ?
+              <AppText>{labels.tempReminder.timeSet(this.state.time)}</AppText>
+              :
+              <AppText>{labels.tempReminder.noTimeSet}</AppText>
+            }
+          </View>
+          <Switch
+            value={this.state.enabled}
+            onValueChange={switchOn => {
+              this.setState({ enabled: switchOn })
+              if (switchOn && !this.state.time) {
+                this.setState({ isTimePickerVisible: true })
+              }
+              if (!switchOn) saveTempReminder({ enabled: false })
+            }}
+          />
+          <DateTimePicker
+            mode="time"
+            isVisible={this.state.isTimePickerVisible}
+            onConfirm={jsDate => {
+              const time = padWithZeros(jsDate)
+              this.setState({
+                time,
+                isTimePickerVisible: false,
+                enabled: true
+              })
+              saveTempReminder({
+                time,
+                enabled: true
+              })
+            }}
+            onCancel={() => {
+              this.setState({ isTimePickerVisible: false })
+              if (!this.state.time) this.setState({enabled: false})
+            }}
+          />
+        </View>
+      </TouchableOpacity>
+    )
+  }
+}