From 1898770fb00b731d6e8f577b1b5594558b1d6bcb Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 16 Nov 2018 15:07:59 +0100
Subject: [PATCH 1/3] Extract cycle day header

---
 components/header.js           | 70 ----------------------------------
 components/header/cycle-day.js | 28 ++++++++++++++
 components/header/index.js     | 50 ++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 70 deletions(-)
 delete mode 100644 components/header.js
 create mode 100644 components/header/cycle-day.js
 create mode 100644 components/header/index.js

diff --git a/components/header.js b/components/header.js
deleted file mode 100644
index 9ebbe58..0000000
--- a/components/header.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View,
-  Text,
-  Dimensions
-} from 'react-native'
-import moment from 'moment'
-import styles, { iconStyles } from '../styles'
-import Icon from 'react-native-vector-icons/Entypo'
-import FeatherIcon from 'react-native-vector-icons/Feather'
-
-export default class Header extends Component {
-  render() {
-    const middle = Dimensions.get('window').width / 2
-    return (
-      this.props.isCycleDayOverView ?
-        <View style={[styles.header, styles.headerCycleDay]}>
-          <View
-            style={styles.accentCircle}
-            left={middle - styles.accentCircle.width / 2}
-          />
-          <Icon
-            name='chevron-thin-left'
-            {...iconStyles.navigationArrow}
-            onPress={() => this.props.goToCycleDay('before')}
-          />
-          <View>
-            <Text style={styles.dateHeader}>
-              {moment(this.props.date).format('MMMM Do YYYY')}
-            </Text>
-            {this.props.cycleDayNumber &&
-              <Text style={styles.cycleDayNumber} >
-                Cycle day {this.props.cycleDayNumber}
-              </Text>}
-          </View >
-          <Icon
-            name='chevron-thin-right'
-            {...iconStyles.navigationArrow}
-            onPress={() => this.props.goToCycleDay('after')}
-          />
-        </View >
-        : this.props.isSymptomView ?
-          <View style={[styles.header, styles.headerSymptom]}>
-            <View style={styles.accentCircle} left={middle - styles.accentCircle.width / 2}/>
-            <Icon
-              name='chevron-thin-left'
-              {...iconStyles.navigationArrow}
-              onPress={() => this.props.goBack()}
-
-            />
-            <View>
-              <Text style={styles.dateHeader}>
-                {this.props.title}
-              </Text>
-            </View >
-            <FeatherIcon
-              name='info'
-              {...iconStyles.symptomHeaderIcons}
-            />
-          </View>
-          :
-          <View style={styles.header}>
-            <View style={styles.accentCircle} />
-            <Text style={styles.headerText}>
-              {this.props.title}
-            </Text>
-          </View >
-    )
-  }
-}
\ No newline at end of file
diff --git a/components/header/cycle-day.js b/components/header/cycle-day.js
new file mode 100644
index 0000000..e7c5e13
--- /dev/null
+++ b/components/header/cycle-day.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import {
+  View,
+  Text} from 'react-native'
+import moment from 'moment'
+import styles, { iconStyles } from '../../styles'
+import Icon from 'react-native-vector-icons/Entypo'
+
+export default function CycleDayHeader(props) {
+  return (<View style={[styles.header, styles.headerCycleDay]}>
+    <View
+      style={styles.accentCircle}
+      left={props.middle - styles.accentCircle.width / 2}
+    />
+    <Icon name='chevron-thin-left' {...iconStyles.navigationArrow} onPress={() => props.goToCycleDay('before')} />
+    <View>
+      <Text style={styles.dateHeader}>
+        {moment(props.date).format('MMMM Do YYYY')}
+      </Text>
+      {props.cycleDayNumber &&
+        <Text style={styles.cycleDayNumber}>
+          Cycle day {props.cycleDayNumber}
+        </Text>}
+    </View>
+    <Icon name='chevron-thin-right' {...iconStyles.navigationArrow} onPress={() => props.goToCycleDay('after')} />
+  </View>
+  )
+}
\ No newline at end of file
diff --git a/components/header/index.js b/components/header/index.js
new file mode 100644
index 0000000..0822c85
--- /dev/null
+++ b/components/header/index.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  Dimensions
+} from 'react-native'
+import styles, { iconStyles } from '../../styles'
+import Icon from 'react-native-vector-icons/Entypo'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+import CycleDayHeader from './cycle-day'
+
+export default function Header(props) {
+  const middle = Dimensions.get('window').width / 2
+  return (
+    props.isCycleDayOverView ?
+      <CycleDayHeader
+        middle={middle}
+        {...props}
+      />
+      : props.isSymptomView ?
+        <View style={[styles.header, styles.headerSymptom]}>
+          <View
+            style={styles.accentCircle}
+            left={middle - styles.accentCircle.width / 2}
+          />
+          <Icon
+            name='chevron-thin-left'
+            {...iconStyles.navigationArrow}
+            onPress={() => props.goBack()}
+
+          />
+          <View>
+            <Text style={styles.dateHeader}>
+              {props.title}
+            </Text>
+          </View >
+          <FeatherIcon
+            name='info'
+            {...iconStyles.symptomHeaderIcons}
+          />
+        </View>
+        :
+        <View style={styles.header}>
+          <View style={styles.accentCircle} />
+          <Text style={styles.headerText}>
+            {props.title}
+          </Text>
+        </View >
+  )
+}
\ No newline at end of file

From d9123584c3fa5ea5574cc6e85f1df03b91bf6861 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 16 Nov 2018 15:13:31 +0100
Subject: [PATCH 2/3] Extract symptom header

---
 components/header/index.js        | 30 ++++++----------------------
 components/header/symptom-view.js | 33 +++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 24 deletions(-)
 create mode 100644 components/header/symptom-view.js

diff --git a/components/header/index.js b/components/header/index.js
index 0822c85..afec4aa 100644
--- a/components/header/index.js
+++ b/components/header/index.js
@@ -4,10 +4,9 @@ import {
   Text,
   Dimensions
 } from 'react-native'
-import styles, { iconStyles } from '../../styles'
-import Icon from 'react-native-vector-icons/Entypo'
-import FeatherIcon from 'react-native-vector-icons/Feather'
+import styles from '../../styles'
 import CycleDayHeader from './cycle-day'
+import SymptomViewHeader from './symptom-view'
 
 export default function Header(props) {
   const middle = Dimensions.get('window').width / 2
@@ -18,27 +17,10 @@ export default function Header(props) {
         {...props}
       />
       : props.isSymptomView ?
-        <View style={[styles.header, styles.headerSymptom]}>
-          <View
-            style={styles.accentCircle}
-            left={middle - styles.accentCircle.width / 2}
-          />
-          <Icon
-            name='chevron-thin-left'
-            {...iconStyles.navigationArrow}
-            onPress={() => props.goBack()}
-
-          />
-          <View>
-            <Text style={styles.dateHeader}>
-              {props.title}
-            </Text>
-          </View >
-          <FeatherIcon
-            name='info'
-            {...iconStyles.symptomHeaderIcons}
-          />
-        </View>
+        <SymptomViewHeader
+          middle={middle}
+          {...props}
+        />
         :
         <View style={styles.header}>
           <View style={styles.accentCircle} />
diff --git a/components/header/symptom-view.js b/components/header/symptom-view.js
new file mode 100644
index 0000000..85d2262
--- /dev/null
+++ b/components/header/symptom-view.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import {
+  View,
+  Text} from 'react-native'
+import styles, { iconStyles } from '../../styles'
+import Icon from 'react-native-vector-icons/Entypo'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+
+export default function SymptomViewHeader(props) {
+  return (
+    <View style={[styles.header, styles.headerSymptom]}>
+      <View
+        style={styles.accentCircle}
+        left={props.middle - styles.accentCircle.width / 2}
+      />
+      <Icon
+        name='chevron-thin-left'
+        {...iconStyles.navigationArrow}
+        onPress={() => props.goBack()}
+
+      />
+      <View>
+        <Text style={styles.dateHeader}>
+          {props.title}
+        </Text>
+      </View >
+      <FeatherIcon
+        name='info'
+        {...iconStyles.symptomHeaderIcons}
+      />
+    </View>
+  )
+}
\ No newline at end of file

From 3aacff6f83c8e36a7d916688d9cc80ec15e7a3c4 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 16 Nov 2018 16:01:53 +0100
Subject: [PATCH 3/3] Extract navigation arrow and give it more padding

---
 components/header/cycle-day.js        |  8 +++----
 components/header/index.js            | 13 ++++-------
 components/header/navigation-arrow.js | 31 +++++++++++++++++++++++++++
 components/header/symptom-view.js     | 12 +++++------
 styles/index.js                       | 23 +++++++++-----------
 5 files changed, 54 insertions(+), 33 deletions(-)
 create mode 100644 components/header/navigation-arrow.js

diff --git a/components/header/cycle-day.js b/components/header/cycle-day.js
index e7c5e13..a78cf1b 100644
--- a/components/header/cycle-day.js
+++ b/components/header/cycle-day.js
@@ -3,8 +3,8 @@ import {
   View,
   Text} from 'react-native'
 import moment from 'moment'
-import styles, { iconStyles } from '../../styles'
-import Icon from 'react-native-vector-icons/Entypo'
+import styles from '../../styles'
+import NavigationArrow from './navigation-arrow'
 
 export default function CycleDayHeader(props) {
   return (<View style={[styles.header, styles.headerCycleDay]}>
@@ -12,7 +12,7 @@ export default function CycleDayHeader(props) {
       style={styles.accentCircle}
       left={props.middle - styles.accentCircle.width / 2}
     />
-    <Icon name='chevron-thin-left' {...iconStyles.navigationArrow} onPress={() => props.goToCycleDay('before')} />
+    <NavigationArrow direction='left' {...props}/>
     <View>
       <Text style={styles.dateHeader}>
         {moment(props.date).format('MMMM Do YYYY')}
@@ -22,7 +22,7 @@ export default function CycleDayHeader(props) {
           Cycle day {props.cycleDayNumber}
         </Text>}
     </View>
-    <Icon name='chevron-thin-right' {...iconStyles.navigationArrow} onPress={() => props.goToCycleDay('after')} />
+    <NavigationArrow direction='right' {...props}/>
   </View>
   )
 }
\ No newline at end of file
diff --git a/components/header/index.js b/components/header/index.js
index afec4aa..c935f6e 100644
--- a/components/header/index.js
+++ b/components/header/index.js
@@ -8,19 +8,14 @@ import styles from '../../styles'
 import CycleDayHeader from './cycle-day'
 import SymptomViewHeader from './symptom-view'
 
-export default function Header(props) {
+export default function Header(p) {
   const middle = Dimensions.get('window').width / 2
+  const props = Object.assign({}, p, {middle})
   return (
     props.isCycleDayOverView ?
-      <CycleDayHeader
-        middle={middle}
-        {...props}
-      />
+      <CycleDayHeader {...props} />
       : props.isSymptomView ?
-        <SymptomViewHeader
-          middle={middle}
-          {...props}
-        />
+        <SymptomViewHeader {...props}/>
         :
         <View style={styles.header}>
           <View style={styles.accentCircle} />
diff --git a/components/header/navigation-arrow.js b/components/header/navigation-arrow.js
new file mode 100644
index 0000000..6a7b95b
--- /dev/null
+++ b/components/header/navigation-arrow.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { TouchableOpacity } from 'react-native'
+import styles, { iconStyles } from '../../styles'
+import Icon from 'react-native-vector-icons/Entypo'
+
+export default function NavigationArrow(props) {
+  const iconName = {
+    left: 'chevron-thin-left',
+    right: 'chevron-thin-right'
+  }[props.direction]
+  let pressHandler
+  if (props.goBack) {
+    pressHandler = () => props.goBack()
+  } else {
+    pressHandler = () => {
+      const target = props.direction === 'left' ? 'before' : 'after'
+      props.goToCycleDay(target)
+    }
+  }
+  return (
+    <TouchableOpacity
+      style={styles.navigationArrow}
+      onPress={pressHandler}
+    >
+      <Icon
+        name={iconName}
+        {...iconStyles.navigationArrow}
+      />
+    </TouchableOpacity>
+  )
+}
\ No newline at end of file
diff --git a/components/header/symptom-view.js b/components/header/symptom-view.js
index 85d2262..df8b4be 100644
--- a/components/header/symptom-view.js
+++ b/components/header/symptom-view.js
@@ -3,21 +3,19 @@ import {
   View,
   Text} from 'react-native'
 import styles, { iconStyles } from '../../styles'
-import Icon from 'react-native-vector-icons/Entypo'
 import FeatherIcon from 'react-native-vector-icons/Feather'
+import NavigationArrow from './navigation-arrow'
 
 export default function SymptomViewHeader(props) {
   return (
-    <View style={[styles.header, styles.headerSymptom]}>
+    <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
       <View
         style={styles.accentCircle}
         left={props.middle - styles.accentCircle.width / 2}
       />
-      <Icon
-        name='chevron-thin-left'
-        {...iconStyles.navigationArrow}
-        onPress={() => props.goBack()}
-
+      <NavigationArrow
+        direction='left'
+        {...props}
       />
       <View>
         <Text style={styles.dateHeader}>
diff --git a/styles/index.js b/styles/index.js
index 31e62f7..9c3b016 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -191,11 +191,20 @@ export default StyleSheet.create({
   },
   header: {
     backgroundColor: primaryColor,
-    paddingHorizontal: 15,
     alignItems: 'center',
     justifyContent: 'center',
     height: 80
   },
+  headerCycleDay: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  headerSymptom: {
+    paddingRight: 20
+  },
+  navigationArrow: {
+    padding: 20
+  },
   menu: {
     backgroundColor: primaryColor,
     alignItems: 'center',
@@ -215,18 +224,6 @@ export default StyleSheet.create({
   menuTextInActive: {
     color: colorInActive
   },
-  headerCycleDay: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  headerSymptom: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  navigationArrow: {
-    fontSize: 60,
-    color: fontOnPrimaryColor
-  },
   temperatureTextInput: {
     fontSize: 20,
     color: 'black',