From 1ed771a50c08f3eaee17bbbd5547669e00a64471 Mon Sep 17 00:00:00 2001
From: Anne Menzel <bata@systemli.org>
Date: Sun, 9 Dec 2018 17:05:08 +0100
Subject: [PATCH] add date to symptom screen header

---
 components/app.js                 |  1 +
 components/header/cycle-day.js    | 14 +++-----------
 components/header/symptom-view.js |  6 +++++-
 components/helpers/format-date.js |  9 +++++++++
 4 files changed, 18 insertions(+), 12 deletions(-)
 create mode 100644 components/helpers/format-date.js

diff --git a/components/app.js b/components/app.js
index b3218a5..ce0eaf2 100644
--- a/components/app.js
+++ b/components/app.js
@@ -81,6 +81,7 @@ export default class App extends Component {
             title={headerTitlesLowerCase[this.state.currentPage]}
             isSymptomView={true}
             goBack={this.handleBackButtonPress}
+            date={this.state.currentProps.date}
           />}
 
 
diff --git a/components/header/cycle-day.js b/components/header/cycle-day.js
index b5dbbdf..0cb3252 100644
--- a/components/header/cycle-day.js
+++ b/components/header/cycle-day.js
@@ -2,17 +2,9 @@ import React from 'react'
 import {
   View,
   Text} from 'react-native'
-import { LocalDate } from 'js-joda'
-import moment from 'moment'
 import styles from '../../styles'
 import NavigationArrow from './navigation-arrow'
-
-const FormattedDate = ({ date }) => {
-  const today = LocalDate.now()
-  const dateToDisplay = LocalDate.parse(date)
-  const formattedDate = today.equals(dateToDisplay) ? 'today' : moment(date).format('MMMM Do YYYY')
-  return formattedDate.toLowerCase()
-}
+import formatDate from '../helpers/format-date'
 
 export default function CycleDayHeader({ date, ...props }) {
   return (<View style={[styles.header, styles.headerCycleDay]}>
@@ -23,7 +15,7 @@ export default function CycleDayHeader({ date, ...props }) {
     <NavigationArrow direction='left' {...props}/>
     <View>
       <Text style={styles.dateHeader}>
-        <FormattedDate date={date} />
+        {formatDate(date)}
       </Text>
       {props.cycleDayNumber &&
         <Text style={styles.cycleDayNumber}>
@@ -33,4 +25,4 @@ export default function CycleDayHeader({ date, ...props }) {
     <NavigationArrow direction='right' {...props}/>
   </View>
   )
-}
\ No newline at end of file
+}
diff --git a/components/header/symptom-view.js b/components/header/symptom-view.js
index 3f6a21f..d091a4c 100644
--- a/components/header/symptom-view.js
+++ b/components/header/symptom-view.js
@@ -5,6 +5,7 @@ import {
 import styles, { iconStyles } from '../../styles'
 import FeatherIcon from 'react-native-vector-icons/Feather'
 import NavigationArrow from './navigation-arrow'
+import formatDate from '../helpers/format-date'
 
 export default function SymptomViewHeader(props) {
   return (
@@ -19,6 +20,9 @@ export default function SymptomViewHeader(props) {
       />
       <View>
         <Text style={styles.dateHeader}>
+          {formatDate(props.date)}
+        </Text>
+        <Text style={styles.cycleDayNumber}>
           {props.title}
         </Text>
       </View >
@@ -29,4 +33,4 @@ export default function SymptomViewHeader(props) {
       />
     </View>
   )
-}
\ No newline at end of file
+}
diff --git a/components/helpers/format-date.js b/components/helpers/format-date.js
new file mode 100644
index 0000000..079ea4d
--- /dev/null
+++ b/components/helpers/format-date.js
@@ -0,0 +1,9 @@
+import { LocalDate } from 'js-joda'
+import moment from 'moment'
+
+export default function (date) {
+  const today = LocalDate.now()
+  const dateToDisplay = LocalDate.parse(date)
+  const formattedDate = today.equals(dateToDisplay) ? 'today' : moment(date).format('MMMM Do YYYY')
+  return formattedDate.toLowerCase()
+}