Refactors the header

components/header/back-button.js

@@ -1,24 +0,0 @@
-import React from 'react'
-import {
-  Text,
-  View
-} from 'react-native'
-import styles from '../../styles'
-import NavigationArrow from './navigation-arrow'
-
-export default function BackButtonHeader(props) {
-  return (
-    <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
-      <View
-        style={styles.accentCircle}
-        left={props.middle - styles.accentCircle.width / 2}
-      />
-      <NavigationArrow testID='backButton' direction='left' {...props}/>
-      <View>
-        <Text style={styles.headerText} testID='pageTitle'>
-          {props.title}
-        </Text>
-      </View>
-    </View>
-  )
-}

components/header/cycle-day.js

@@ -1,29 +0,0 @@
-import React from 'react'
-import {
-  View,
-  Text} from 'react-native'
-import styles from '../../styles'
-import NavigationArrow from './navigation-arrow'
-import formatDate from '../helpers/format-date'
-
-export default function CycleDayHeader({ date, cycleDayNumber, ...props }) {
-  return (<View style={[styles.header, styles.headerCycleDay]}>
-    <View
-      style={styles.accentCircle}
-      left={props.middle - styles.accentCircle.width / 2}
-    />
-    <NavigationArrow testID='previousDateButton' direction='left' {...props}/>
-    <View>
-      <Text style={styles.dateHeader} testID='cycleDayTitleDate'>
-        {formatDate(date)}
-      </Text>
-      { cycleDayNumber &&
-        <Text style={styles.cycleDayNumber}>
-          {`Cycle day ${cycleDayNumber}`.toLowerCase()}
-        </Text>
-      }
-    </View>
-    <NavigationArrow direction='right' {...props}/>
-  </View>
-  )
-}

components/header/default.js

@@ -1,16 +0,0 @@
-import React from 'react'
-import {
-  View,
-  Text} from 'react-native'
-import styles from '../../styles'
-
-export default function DefaultHeader(props) {
-  return (
-    <View style={styles.header}>
-      <View style={styles.accentCircle} />
-      <Text testID='pageTitle' style={styles.headerText}>
-        {props.title}
-      </Text>
-    </View >
-  )
-}

components/header/delete-icon.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { TouchableOpacity } from 'react-native'
+import PropTypes from 'prop-types'
+
+import Icon from 'react-native-vector-icons/AntDesign'
+
+import styles, { iconStyles } from '../../styles'
+
+export default function DeleteIcon({ handleDelete }) {
+
+  return (
+    <TouchableOpacity
+      onPress={handleDelete}
+      style={styles.headerDeleteButton}
+    >
+      <Icon
+        name="delete"
+        {...iconStyles.symptomHeaderIcons}
+      />
+    </TouchableOpacity>
+  )
+}
+
+DeleteIcon.propTypes = {
+  handleDelete: PropTypes.func,
+}

components/header/index.js

@@ -1,19 +1,35 @@
 import React from 'react'
-import { Dimensions } from 'react-native'
-import CycleDayHeader from './cycle-day'
-import DefaultHeader from './default'
-import BackButtonHeader from './back-button'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
 
-export default function Header(p) {
-  const middle = Dimensions.get('window').width / 2
-  const props = Object.assign({}, p, {middle})
+import Title from './title'
+import NavigationArrow from './navigation-arrow'
+import DeleteIcon from './delete-icon'
 
-  if (props.isCycleDayOverView) {
-    return (<CycleDayHeader {...props} />)
-  } else if (props.showBackButton) {
-    return (<BackButtonHeader {...props} />)
-  }
-  else {
-    return (<DefaultHeader {...props} />)
-  }
+import styles from '../../styles'
+
+export default function Header({
+  handleBack,
+  handleNext,
+  handleDelete,
+  title,
+  subtitle,
+}) {
+
+  return (
+    <View style={styles.header}>
+      <View style={styles.accentCircle} />
+      { handleBack && <NavigationArrow handleBack={handleBack} /> }
+      <Title title={title} subtitle={subtitle} />
+      { handleNext && <NavigationArrow handleNext={handleNext} /> }
+      { handleDelete && <DeleteIcon handleDelete={handleDelete} /> }
+    </View >
+  )
+}
+
+Header.propTypes = {
+  handleBack: PropTypes.func,
+  handleNext: PropTypes.func,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
 }

components/header/navigation-arrow.js

@@ -1,36 +1,30 @@
 import React from 'react'
 import { TouchableOpacity } from 'react-native'
-import styles, { iconStyles } from '../../styles'
+import PropTypes from 'prop-types'
 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]
-  const iconPosition = {
-    left: 'navigationArrowLeft',
-    right: 'navigationArrowRight'
-  }[props.direction]
-  let pressHandler
-  if (props.goBack) {
-    pressHandler = () => props.goBack()
-  } else {
-    pressHandler = () => {
-      const target = props.direction === 'left' ? 'before' : 'after'
-      props.goToCycleDay(target)
-    }
-  }
+import styles, { iconStyles } from '../../styles'
+
+export default function NavigationArrow({ handleBack, handleNext }) {
+  const navigationDirection = handleBack ? 'Left' : 'Right'
   return (
     <TouchableOpacity
-      style={[styles.navigationArrow, styles[iconPosition]]}
-      onPress={pressHandler}
-      testID={props.testID}
+      style={[
+        styles.navigationArrow,
+        styles[`navigationArrow${navigationDirection}`]
+      ]}
+      onPress={ handleBack || handleNext }
+      testID={ handleBack ? 'backButton' : 'nextButton'}
     >
       <Icon
-        name={iconName}
+        name={`chevron-thin-${navigationDirection.toLowerCase()}`}
         {...iconStyles.navigationArrow}
       />
     </TouchableOpacity>
   )
+}
+
+NavigationArrow.propTypes = {
+  handleBack: PropTypes.func,
+  handleNext: PropTypes.func,
 }

components/header/symptom-view.js

@@ -1,54 +0,0 @@
-import React from 'react'
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  Dimensions
-} from 'react-native'
-import PropTypes from 'prop-types'
-
-import styles, { iconStyles } from '../../styles'
-import Icon from 'react-native-vector-icons/AntDesign'
-import NavigationArrow from './navigation-arrow'
-import formatDate from '../helpers/format-date'
-
-SymptomViewHeader.propTypes = {
-  title: PropTypes.string,
-  date: PropTypes.string,
-  goBack: PropTypes.func,
-  deleteIconActive: PropTypes.bool,
-  onDelete: PropTypes.func,
-}
-
-export default function SymptomViewHeader(props) {
-  const { goBack, title, date, shouldShowDelete, onDelete } = props
-  const middle = Dimensions.get('window').width / 2
-  return (
-    <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
-      <View
-        style={styles.accentCircle}
-        left={middle - styles.accentCircle.width / 2}
-      />
-      <NavigationArrow direction='left' goBack={goBack} />
-      <View>
-        <Text style={styles.dateHeader} testID='symptomViewTitleName'>
-          {title}
-        </Text>
-        { date &&
-          <Text style={styles.cycleDayNumber} testID='symptomViewTitleDate'>
-            {formatDate(date)}
-          </Text>
-        }
-      </View >
-      { shouldShowDelete && <DeleteButton onDelete={onDelete} />}
-    </View>
-  )
-}
-
-const DeleteButton = ({ onDelete }) => {
-  return (
-    <TouchableOpacity onPress={onDelete} style={styles.headerDeleteButton}>
-      <Icon name="delete" {...iconStyles.symptomHeaderIcons} />
-    </TouchableOpacity>
-  )
-}

components/header/title.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { View, Text} from 'react-native'
+import PropTypes from 'prop-types'
+
+import styles from '../../styles'
+
+export default function Title({ title, subtitle }) {
+
+  if (subtitle !== undefined) {
+    return (
+      <View>
+        <Text style={styles.dateHeader} testID='headerTitle'>
+          {title}
+        </Text>
+        { subtitle &&
+          <Text style={styles.cycleDayNumber} testID='headerSubtitle'>
+            {subtitle}
+          </Text>
+        }
+      </View>
+    )
+  }
+
+  return <Text testID='headerTitle' style={styles.headerText}>{title}</Text>
+}
+
+Title.propTypes = {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+}