From 636e5e2f9d8e1ae072b1f37a9af9c99d5fe8f389 Mon Sep 17 00:00:00 2001 From: Julia Friesel 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 0c951c8..0baccba 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 19e0084..35e1e3f 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 ( - - this.props.showView('BleedingEditView')} - data={getLabel('bleeding', cycleDay.bleeding)} - /> - this.props.showView('TemperatureEditView')} - data={getLabel('temperature', cycleDay.temperature)} - /> - this.props.showView('MucusEditView')} - data={getLabel('mucus', cycleDay.mucus)} - /> - this.props.showView('CervixEditView')} - data={getLabel('cervix', cycleDay.cervix)} - /> - this.props.showView('NoteEditView')} - data={getLabel('note', cycleDay.note)} - /> - this.props.showView('DesireEditView')} - data={getLabel('desire', cycleDay.desire)} - /> - this.props.showView('SexEditView')} - data={getLabel('sex', cycleDay.sex)} - /> - {/* this is just to make the last row adhere to the grid + + + this.goToCycleDay('before')} + /> + + + {formatDateForViewHeader(cycleDay.date)} + + {cycleDayNumber && + + Cycle day {cycleDayNumber} + } + + this.goToCycleDay('after')} + /> + + + this.navigate('BleedingEditView')} + data={getLabel('bleeding', cycleDay.bleeding)} + /> + this.navigate('TemperatureEditView')} + data={getLabel('temperature', cycleDay.temperature)} + /> + this.navigate('MucusEditView')} + data={getLabel('mucus', cycleDay.mucus)} + /> + this.navigate('CervixEditView')} + data={getLabel('cervix', cycleDay.cervix)} + /> + this.navigate('NoteEditView')} + data={getLabel('note', cycleDay.note)} + /> + this.navigate('DesireEditView')} + data={getLabel('desire', cycleDay.desire)} + /> + 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 */} - - + + + ) } } diff --git a/components/cycle-day/index.js b/components/cycle-day/index.js deleted file mode 100644 index d162a26..0000000 --- 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 ( - - - this.goToCycleDay('before')} - /> - - - {formatDateForViewHeader(this.state.cycleDay.date)} - - {cycleDayNumber && - - Cycle day {cycleDayNumber} - } - - this.goToCycleDay('after')} - /> - - - { cycleDayViews[this.state.visibleComponent] } - - - ) - } -} \ No newline at end of file diff --git a/components/cycle-day/symptoms/index.js b/components/cycle-day/symptoms/index.js index c3583df..3c0f834 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 ( + + + + + {titles[this.state.visibleComponent]} + + + + {React.createElement( + symptomViews[this.state.visibleComponent], + { + cycleDay: this.state.cycleDay, + makeActionButtons: this.makeActionButtons + } + )} + + ) + } +}