From 51629f67e2d7a6d823be611fff6a3a6e998ab461 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 17 Aug 2018 16:26:00 +0200
Subject: [PATCH] Place header as component

---
 components/calendar.js                     | 16 +++++---
 components/cycle-day/cycle-day-overview.js | 32 ++++------------
 components/cycle-day/symptoms/index.js     | 16 ++------
 components/header.js                       | 43 ++++++++++++++++++++++
 components/home.js                         |  2 +
 components/settings.js                     |  2 +
 components/stats.js                        |  2 +
 styles/index.js                            |  5 ++-
 8 files changed, 73 insertions(+), 45 deletions(-)
 create mode 100644 components/header.js

diff --git a/components/calendar.js b/components/calendar.js
index 4aa7f13..dbff83c 100644
--- a/components/calendar.js
+++ b/components/calendar.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
+import Header from './header'
 import * as styles from '../styles'
 import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
 
@@ -34,12 +35,15 @@ export default class CalendarView extends Component {
 
   render() {
     return (
-      <View style={styles.container}>
-        <CalendarList
-          onDayPress={ this.passDateToDayView.bind(this) }
-          markedDates = { this.state.bleedingDaysInCalFormat }
-          markingType = {'period'}
-        />
+      <View>
+        <Header title='Calendar' />
+        <View style={styles.container}>
+          <CalendarList
+            onDayPress={this.passDateToDayView.bind(this)}
+            markedDates={this.state.bleedingDaysInCalFormat}
+            markingType={'period'}
+          />
+        </View>
       </View>
     )
   }
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 35e1e3f..78178fe 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -7,11 +7,10 @@ import {
   Dimensions
 } from 'react-native'
 import { LocalDate } from 'js-joda'
+import Header from '../header'
 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,
@@ -24,8 +23,6 @@ import {
   intensity as intensityLabels
 } from './labels/labels'
 
-const getCycleDayNumber = cycleModule().getCycleDayNumber
-
 export default class CycleDayOverView extends Component {
   constructor(props) {
     super(props)
@@ -51,30 +48,15 @@ export default class CycleDayOverView extends Component {
 
   render() {
     const cycleDay = this.state.cycleDay
+    const getCycleDayNumber = cycleModule().getCycleDayNumber
     const cycleDayNumber = getCycleDayNumber(cycleDay.date)
     return (
       <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 >
+        <Header
+          cycleDayOverView={true}
+          cycleDayNumber={cycleDayNumber}
+          date={cycleDay.date}
+        />
         <View style={styles.symptomBoxesView}>
           <SymptomBox
             title='Bleeding'
diff --git a/components/cycle-day/symptoms/index.js b/components/cycle-day/symptoms/index.js
index 3c0f834..c2c050b 100644
--- a/components/cycle-day/symptoms/index.js
+++ b/components/cycle-day/symptoms/index.js
@@ -1,10 +1,6 @@
 import React, { Component } from 'react'
-import {
-  View,
-  Text,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import { ScrollView } from 'react-native'
+import Header from '../../header'
 import actionButtonModule from '../action-buttons'
 import BleedingEditView from './bleeding'
 import TemperatureEditView from './temperature'
@@ -51,13 +47,7 @@ export default class SymptomView extends Component {
   render() {
     return (
       <ScrollView>
-        <View style={ styles.header }>
-          <View>
-            <Text style={styles.dateHeader}>
-              {titles[this.state.visibleComponent]}
-            </Text>
-          </View >
-        </View >
+        <Header title={titles[this.state.visibleComponent]}/>
         {React.createElement(
           symptomViews[this.state.visibleComponent],
           {
diff --git a/components/header.js b/components/header.js
new file mode 100644
index 0000000..1fd285e
--- /dev/null
+++ b/components/header.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text
+} from 'react-native'
+import styles, { iconStyles } from '../styles'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { formatDateForViewHeader } from '../components/cycle-day/labels/format'
+
+export default class Header extends Component {
+  render() {
+    return (
+      this.props.cycleDayOverView ?
+        <View style={[styles.header, styles.headerCycleDay]}>
+          <Icon
+            name='arrow-left-drop-circle'
+            {...iconStyles.navigationArrow}
+            onPress={() => this.goToCycleDay('before')}
+          />
+          <View>
+            <Text style={styles.dateHeader}>
+              {formatDateForViewHeader(this.props.date)}
+            </Text>
+            {this.props.cycleDayNumber &&
+              <Text style={styles.cycleDayNumber} >
+                Cycle day {this.props.cycleDayNumber}
+              </Text>}
+          </View >
+          <Icon
+            name='arrow-right-drop-circle'
+            {...iconStyles.navigationArrow}
+            onPress={() => this.goToCycleDay('after')}
+          />
+        </View >
+        :
+        <View style={styles.header}>
+          <Text style={styles.dateHeader}>
+            {this.props.title}
+          </Text>
+        </View >
+    )
+  }
+}
\ No newline at end of file
diff --git a/components/home.js b/components/home.js
index 5381e3b..9c8d14f 100644
--- a/components/home.js
+++ b/components/home.js
@@ -6,6 +6,7 @@ import {
   ScrollView
 } from 'react-native'
 import { LocalDate } from 'js-joda'
+import Header from './header'
 import styles from '../styles/index'
 import cycleModule from '../lib/cycle'
 import { getOrCreateCycleDay, bleedingDaysSortedByDate, fillWithDummyData, deleteAll } from '../db'
@@ -48,6 +49,7 @@ export default class Home extends Component {
   render() {
     return (
       <ScrollView>
+        <Header title='Home'/>
         <Text style={styles.welcome}>{this.state.welcomeText}</Text>
         <View style={styles.homeButtons}>
           <View style={styles.homeButton}>
diff --git a/components/settings.js b/components/settings.js
index 97907b1..3552872 100644
--- a/components/settings.js
+++ b/components/settings.js
@@ -9,6 +9,7 @@ import {
 import Share from 'react-native-share'
 import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker'
 import rnfs from 'react-native-fs'
+import Header from './header'
 import styles from '../styles/index'
 import { settings as labels } from './labels'
 import getDataAsCsvDataUri from '../lib/import-export/export-to-csv'
@@ -18,6 +19,7 @@ export default class Settings extends Component {
   render() {
     return (
       <ScrollView>
+        <Header title='Settings'/>
         <View style={styles.homeButtons}>
           <View style={styles.homeButton}>
             <Button
diff --git a/components/stats.js b/components/stats.js
index 4021fde..c37a518 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -5,6 +5,7 @@ import {
   ScrollView
 } from 'react-native'
 import { LocalDate, ChronoUnit } from 'js-joda'
+import Header from './header'
 import styles from '../styles/index'
 import cycleModule from '../lib/cycle'
 import getCycleInfo from '../lib/cycle-length'
@@ -15,6 +16,7 @@ export default class Stats extends Component {
     const statsText = determineStatsText(allMensesStarts)
     return (
       <ScrollView>
+        <Header title='Statistics' />
         <View>
           <Text style={styles.stats}>{statsText}</Text>
         </View>
diff --git a/styles/index.js b/styles/index.js
index 087d20d..f55ef4e 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -75,11 +75,14 @@ export default StyleSheet.create({
     alignItems: 'center',
     height: 50
   },
-  cycleDayDateView: {
+  header: {
     backgroundColor: primaryColor,
     paddingVertical: 18,
     paddingHorizontal: 15,
     alignItems: 'center',
+    justifyContent: 'center'
+  },
+  headerCycleDay: {
     flexDirection: 'row',
     justifyContent: 'space-between'
   },