From 636e5e2f9d8e1ae072b1f37a9af9c99d5fe8f389 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 17 Aug 2018 10:17:17 +0200
Subject: [PATCH] Use navigator for symptom views also
---
app.js | 9 +-
components/cycle-day/cycle-day-overview.js | 136 ++++++++++++++-------
components/cycle-day/index.js | 91 --------------
components/cycle-day/symptoms/index.js | 56 ++++++++-
4 files changed, 156 insertions(+), 136 deletions(-)
delete mode 100644 components/cycle-day/index.js
diff --git a/app.js b/app.js
index 0c951c89..0baccba9 100644
--- a/app.js
+++ b/app.js
@@ -2,7 +2,8 @@ import { createStackNavigator, createBottomTabNavigator } from 'react-navigation
import Home from './components/home'
import Calendar from './components/calendar'
-import CycleDay from './components/cycle-day'
+import CycleDay from './components/cycle-day/cycle-day-overview'
+import SymptomView from './components/cycle-day/symptoms'
import Chart from './components/chart/chart'
import Settings from './components/settings'
import Stats from './components/stats'
@@ -14,9 +15,11 @@ import styles, { primaryColor } from './styles'
import { YellowBox } from 'react-native'
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
+const CycleDayStack = createStackNavigator({CycleDay, SymptomView}, {headerMode: 'none'})
+
const routes = {
- Home: createStackNavigator({Home, CycleDay}, {headerMode: 'none'}),
- Calendar: createStackNavigator({Calendar, CycleDay}, {headerMode: 'none'}),
+ Home: createStackNavigator({Home, CycleDayStack}, {headerMode: 'none'}),
+ Calendar: createStackNavigator({Calendar, CycleDayStack}, {headerMode: 'none'}),
Chart: createStackNavigator({Chart, CycleDay}, {headerMode: 'none'}),
Settings: { screen: Settings },
Stats: { screen: Stats}
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 19e00842..35e1e3f6 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -1,11 +1,17 @@
import React, { Component } from 'react'
import {
+ ScrollView,
View,
Text,
TouchableOpacity,
Dimensions
} from 'react-native'
+import { LocalDate } from 'js-joda'
+import { getOrCreateCycleDay } from '../../db'
+import cycleModule from '../../lib/cycle'
import Icon from 'react-native-vector-icons/FontAwesome'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { formatDateForViewHeader } from './labels/format'
import styles, { iconStyles } from '../../styles'
import {
bleeding as bleedingLabels,
@@ -18,50 +24,98 @@ import {
intensity as intensityLabels
} from './labels/labels'
-export default class DayView extends Component {
+const getCycleDayNumber = cycleModule().getCycleDayNumber
+
+export default class CycleDayOverView extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ cycleDay: props.navigation.state.params.cycleDay
+ }
+ }
+
+ goToCycleDay(target) {
+ const localDate = LocalDate.parse(this.state.cycleDay.date)
+ const targetDate = target === 'before' ?
+ localDate.minusDays(1).toString() :
+ localDate.plusDays(1).toString()
+ this.setState({cycleDay: getOrCreateCycleDay(targetDate)})
+ }
+
+ navigate(symptom) {
+ this.props.navigation.navigate('SymptomView', {
+ symptom,
+ cycleDay: this.state.cycleDay
+ })
+ }
+
render() {
- const cycleDay = this.props.cycleDay
+ const cycleDay = this.state.cycleDay
+ const cycleDayNumber = getCycleDayNumber(cycleDay.date)
return (
- <View style={styles.symptomBoxesView}>
- <SymptomBox
- title='Bleeding'
- onPress={() => this.props.showView('BleedingEditView')}
- data={getLabel('bleeding', cycleDay.bleeding)}
- />
- <SymptomBox
- title='Temperature'
- onPress={() => this.props.showView('TemperatureEditView')}
- data={getLabel('temperature', cycleDay.temperature)}
- />
- <SymptomBox
- title='Mucus'
- onPress={() => this.props.showView('MucusEditView')}
- data={getLabel('mucus', cycleDay.mucus)}
- />
- <SymptomBox
- title='Cervix'
- onPress={() => this.props.showView('CervixEditView')}
- data={getLabel('cervix', cycleDay.cervix)}
- />
- <SymptomBox
- title='Note'
- onPress={() => this.props.showView('NoteEditView')}
- data={getLabel('note', cycleDay.note)}
- />
- <SymptomBox
- title='Desire'
- onPress={() => this.props.showView('DesireEditView')}
- data={getLabel('desire', cycleDay.desire)}
- />
- <SymptomBox
- title='Sex'
- onPress={() => this.props.showView('SexEditView')}
- data={getLabel('sex', cycleDay.sex)}
- />
- {/* this is just to make the last row adhere to the grid
+ <ScrollView>
+ <View style={ styles.cycleDayDateView }>
+ <MaterialIcon
+ name='arrow-left-drop-circle'
+ {...iconStyles.navigationArrow}
+ onPress={() => this.goToCycleDay('before')}
+ />
+ <View>
+ <Text style={styles.dateHeader}>
+ {formatDateForViewHeader(cycleDay.date)}
+ </Text>
+ {cycleDayNumber &&
+ <Text style={styles.cycleDayNumber} >
+ Cycle day {cycleDayNumber}
+ </Text>}
+ </View >
+ <MaterialIcon
+ name='arrow-right-drop-circle'
+ {...iconStyles.navigationArrow}
+ onPress={() => this.goToCycleDay('after')}
+ />
+ </View >
+ <View style={styles.symptomBoxesView}>
+ <SymptomBox
+ title='Bleeding'
+ onPress={() => this.navigate('BleedingEditView')}
+ data={getLabel('bleeding', cycleDay.bleeding)}
+ />
+ <SymptomBox
+ title='Temperature'
+ onPress={() => this.navigate('TemperatureEditView')}
+ data={getLabel('temperature', cycleDay.temperature)}
+ />
+ <SymptomBox
+ title='Mucus'
+ onPress={() => this.navigate('MucusEditView')}
+ data={getLabel('mucus', cycleDay.mucus)}
+ />
+ <SymptomBox
+ title='Cervix'
+ onPress={() => this.navigate('CervixEditView')}
+ data={getLabel('cervix', cycleDay.cervix)}
+ />
+ <SymptomBox
+ title='Note'
+ onPress={() => this.navigate('NoteEditView')}
+ data={getLabel('note', cycleDay.note)}
+ />
+ <SymptomBox
+ title='Desire'
+ onPress={() => this.navigate('DesireEditView')}
+ data={getLabel('desire', cycleDay.desire)}
+ />
+ <SymptomBox
+ title='Sex'
+ onPress={() => this.navigate('SexEditView')}
+ data={getLabel('sex', cycleDay.sex)}
+ />
+ {/* this is just to make the last row adhere to the grid
(and) because there are no pseudo properties in RN */}
- <FillerBoxes/>
- </View >
+ <FillerBoxes />
+ </View >
+ </ScrollView >
)
}
}
diff --git a/components/cycle-day/index.js b/components/cycle-day/index.js
deleted file mode 100644
index d162a26e..00000000
--- a/components/cycle-day/index.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { Component } from 'react'
-import {
- View,
- Text,
- ScrollView
-} from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-import cycleModule from '../../lib/cycle'
-import { formatDateForViewHeader } from './labels/format'
-import styles, { iconStyles } from '../../styles'
-import actionButtonModule from './action-buttons'
-import symptomComponents from './symptoms'
-import DayView from './cycle-day-overview'
-import { LocalDate } from 'js-joda'
-import { getOrCreateCycleDay } from '../../db'
-
-const getCycleDayNumber = cycleModule().getCycleDayNumber
-const symptomComponentNames = Object.keys(symptomComponents)
-
-export default class Day extends Component {
- constructor(props) {
- super(props)
-
- this.state = {
- visibleComponent: 'DayView',
- cycleDay: props.navigation.state.params.cycleDay
- }
-
- this.showView = view => {
- this.setState({visibleComponent: view})
- }
- this.makeActionButtons = actionButtonModule(this.showView)
- }
-
- goToCycleDay(target) {
- const localDate = LocalDate.parse(this.state.cycleDay.date)
- const targetDate = target === 'before' ?
- localDate.minusDays(1).toString() :
- localDate.plusDays(1).toString()
- this.setState({cycleDay: getOrCreateCycleDay(targetDate)})
- }
-
- render() {
- const cycleDayNumber = getCycleDayNumber(this.state.cycleDay.date)
- const cycleDayViews = symptomComponentNames.reduce((acc, curr) => {
- acc[curr] = React.createElement(
- symptomComponents[curr],
- {
- cycleDay: this.state.cycleDay,
- makeActionButtons: this.makeActionButtons
- }
- )
- return acc
- }, {})
- // DayView needs showView instead of makeActionButtons
- cycleDayViews.DayView = React.createElement(DayView, {
- dateString: this.state.cycleDay.date,
- cycleDay: this.state.cycleDay,
- showView: this.showView
- })
-
- return (
- <ScrollView>
- <View style={ styles.cycleDayDateView }>
- <Icon
- name='arrow-left-drop-circle'
- {...iconStyles.navigationArrow}
- onPress={() => this.goToCycleDay('before')}
- />
- <View>
- <Text style={styles.dateHeader}>
- {formatDateForViewHeader(this.state.cycleDay.date)}
- </Text>
- {cycleDayNumber &&
- <Text style={styles.cycleDayNumber} >
- Cycle day {cycleDayNumber}
- </Text>}
- </View >
- <Icon
- name='arrow-right-drop-circle'
- {...iconStyles.navigationArrow}
- onPress={() => this.goToCycleDay('after')}
- />
- </View >
- <View>
- { cycleDayViews[this.state.visibleComponent] }
- </View >
- </ScrollView >
- )
- }
-}
\ No newline at end of file
diff --git a/components/cycle-day/symptoms/index.js b/components/cycle-day/symptoms/index.js
index c3583df8..3c0f834b 100644
--- a/components/cycle-day/symptoms/index.js
+++ b/components/cycle-day/symptoms/index.js
@@ -1,3 +1,11 @@
+import React, { Component } from 'react'
+import {
+ View,
+ Text,
+ ScrollView
+} from 'react-native'
+import styles from '../../../styles'
+import actionButtonModule from '../action-buttons'
import BleedingEditView from './bleeding'
import TemperatureEditView from './temperature'
import MucusEditView from './mucus'
@@ -6,7 +14,7 @@ import NoteEditView from './note'
import DesireEditView from './desire'
import SexEditView from './sex'
-export default {
+const symptomViews = {
BleedingEditView,
TemperatureEditView,
MucusEditView,
@@ -15,3 +23,49 @@ export default {
DesireEditView,
SexEditView
}
+const titles = {
+ BleedingEditView: 'Bleeding',
+ TemperatureEditView: 'Temperature',
+ MucusEditView: 'Mucus',
+ CervixEditView: 'Cervix',
+ NoteEditView: 'Note',
+ DesireEditView: 'Desire',
+ SexEditView: 'Sex'
+}
+
+export default class SymptomView extends Component {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ visibleComponent: props.navigation.state.params.symptom,
+ cycleDay: props.navigation.state.params.cycleDay
+ }
+
+ this.showView = view => {
+ this.setState({visibleComponent: view})
+ }
+ this.makeActionButtons = actionButtonModule(this.showView)
+ }
+
+ render() {
+ return (
+ <ScrollView>
+ <View style={ styles.header }>
+ <View>
+ <Text style={styles.dateHeader}>
+ {titles[this.state.visibleComponent]}
+ </Text>
+ </View >
+ </View >
+ {React.createElement(
+ symptomViews[this.state.visibleComponent],
+ {
+ cycleDay: this.state.cycleDay,
+ makeActionButtons: this.makeActionButtons
+ }
+ )}
+ </ScrollView >
+ )
+ }
+}
--
GitLab