Add navigation arrows

components/cycle-day/cycle-day-overview.js

@@ -17,37 +17,10 @@ import {
   cervixPosition as positionLabels,
   intensity as intensityLabels
 } from './labels/labels'
-import cycleDayModule from '../../lib/cycle'
-import { bleedingDaysSortedByDate } from '../../db'
-
-const getCycleDayNumber = cycleDayModule().getCycleDayNumber
 
 export default class DayView extends Component {
-  constructor(props) {
-    super(props)
-    this.cycleDay = props.cycleDay
-    this.showView = props.showView
-    this.state = {
-      cycleDayNumber: getCycleDayNumber(this.cycleDay.date),
-    }
-
-    this.setStateWithCycleDayNumber = (function (DayViewComponent) {
-      return function () {
-        DayViewComponent.setState({
-          cycleDayNumber: getCycleDayNumber(DayViewComponent.cycleDay.date)
-        })
-      }
-    })(this)
-
-    bleedingDaysSortedByDate.addListener(this.setStateWithCycleDayNumber)
-  }
-
-  componentWillUnmount() {
-    bleedingDaysSortedByDate.removeListener(this.setStateWithCycleDayNumber)
-  }
-
   render() {
-    const cycleDay = this.cycleDay
+    const cycleDay = this.props.cycleDay
     return (
       <View style={styles.symptomBoxesView}>
         <SymptomBox

components/cycle-day/index.js

@@ -4,66 +4,88 @@ import {
   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 from '../../styles'
+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.cycleDay = props.navigation.state.params.cycleDay
 
     this.state = {
       visibleComponent: 'DayView',
+      cycleDay: props.navigation.state.params.cycleDay
     }
 
-    const showView = view => {
+    this.showView = view => {
       this.setState({visibleComponent: view})
     }
+    this.makeActionButtons = actionButtonModule(this.showView)
+  }
 
-    const makeActionButtons = actionButtonModule(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)})
+  }
 
-    const symptomComponentNames = Object.keys(symptomComponents)
-    this.cycleDayViews = symptomComponentNames.reduce((acc, curr) => {
+  render() {
+    const cycleDayNumber = getCycleDayNumber(this.state.cycleDay.date)
+    const cycleDayViews = symptomComponentNames.reduce((acc, curr) => {
       acc[curr] = React.createElement(
         symptomComponents[curr],
         {
-          cycleDay: this.cycleDay,
-          makeActionButtons
+          cycleDay: this.state.cycleDay,
+          makeActionButtons: this.makeActionButtons
         }
       )
       return acc
     }, {})
-
     // DayView needs showView instead of makeActionButtons
-    this.cycleDayViews.DayView = React.createElement(DayView, {
-      cycleDay: this.cycleDay,
-      showView
+    cycleDayViews.DayView = React.createElement(DayView, {
+      dateString: this.state.cycleDay.date,
+      cycleDay: this.state.cycleDay,
+      showView: this.showView
     })
-  }
 
-  render() {
-    const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
     return (
       <ScrollView>
         <View style={ styles.cycleDayDateView }>
-          <Text style={styles.dateHeader}>
-            {formatDateForViewHeader(this.cycleDay.date)}
-          </Text>
-          { cycleDayNumber &&
-            <Text style={styles.cycleDayNumber} >
-              Cycle day {cycleDayNumber}
-            </Text> }
+          <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>
-          { this.cycleDayViews[this.state.visibleComponent] }
+          { cycleDayViews[this.state.visibleComponent] }
         </View >
       </ScrollView >
     )
   }
-}
+}

styles/index.js

@@ -2,6 +2,7 @@ import { StyleSheet } from 'react-native'
 
 export const primaryColor = '#ff7e5f'
 export const secondaryColor = '#351c4d'
+export const fontOnPrimaryColor = 'white'
 
 export default StyleSheet.create({
   container: {
@@ -17,12 +18,12 @@ export default StyleSheet.create({
   dateHeader: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: 'white',
+    color: fontOnPrimaryColor,
     textAlign: 'center',
   },
   cycleDayNumber: {
     fontSize: 15,
-    color: 'white',
+    color: fontOnPrimaryColor,
     textAlign: 'center',
     marginLeft: 15
   },
@@ -70,10 +71,15 @@ export default StyleSheet.create({
   },
   cycleDayDateView: {
     backgroundColor: primaryColor,
-    padding: 10,
+    paddingVertical: 18,
+    paddingHorizontal: 15,
+    alignItems: 'center',
     flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center'
+    justifyContent: 'space-between'
+  },
+  navigationArrow: {
+    fontSize: 60,
+    color: fontOnPrimaryColor
   },
   homeButtons: {
     marginHorizontal: 15
@@ -107,6 +113,13 @@ export default StyleSheet.create({
   },
   menuLabel: {
     fontSize: 15,
-    color: 'white'
+    color: fontOnPrimaryColor
   },
-})
+})
+
+export const iconStyles = {
+  navigationArrow: {
+    size: 45,
+    color: fontOnPrimaryColor
+  }
+}