Introduces SymptomCell component

components/chart/day-column.js

@@ -18,7 +18,10 @@ import styles from './styles'
 import config from '../../config'
 import cycleModule from '../../lib/cycle'
 import { getCycleDay } from '../../db'
+
 import DotAndLine from './dot-and-line'
+import SymptomCell from './symptom-cell'
+
 import { normalizeToScale } from '../helpers/chart'
 
 const label = styles.column.label
@@ -139,42 +142,6 @@ class DayColumn extends Component {
     return false
   }
 
-  drawSymptom = (symptom) => {
-
-    const { symptomHeight } = this.props
-    const shouldDrawSymptom = this.data.hasOwnProperty(symptom)
-    const styleParent = [styles.symptomRow, {height: symptomHeight}]
-
-    if (shouldDrawSymptom) {
-      const styleSymptom = styles.iconColors[symptom]
-      const symptomData = this.data[symptom]
-      const symptomColor = styleSymptom.shades[symptomData]
-
-      const dataIsComplete = this.isSymptomDataComplete(symptom)
-      const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
-
-      const backgroundColor = (isMucusOrCervix && !dataIsComplete) ?
-        'white' : symptomColor
-      const borderWidth = (isMucusOrCervix && !dataIsComplete) ? 2 : 0
-      const borderColor = symptomColor
-      const styleChild = [styles.symptomDot, {
-        backgroundColor,
-        borderColor,
-        borderWidth
-      }]
-
-      return (
-        <View style={styleParent} key={symptom}>
-          <View style={styleChild} />
-        </View>
-      )
-    } else {
-      return (
-        <View style={styleParent} key={symptom} />
-      )
-    }
-  }
-
   render() {
     const columnElements = []
     const { dateString,
@@ -264,9 +231,21 @@ class DayColumn extends Component {
         onPress={() => this.onDaySelect(dateString)}
         activeOpacity={1}
       >
-        <View>
+
-          {symptomRowSymptoms.map(symptom => this.drawSymptom(symptom))}
+        { symptomRowSymptoms.map(symptom => {
-        </View>
+          const hasSymptomData = this.data.hasOwnProperty(symptom)
+          return (
+            <SymptomCell
+              key={symptom}
+              symptom={symptom}
+              symptomValue={hasSymptomData && this.data[symptom]}
+              isSymptomDataComplete={
+                hasSymptomData && this.isSymptomDataComplete(symptom)
+              }
+              height={this.props.symptomHeight}
+            />)
+        }
+        )}
 
         <Surface width={config.columnWidth} height={columnHeight}>
           {column}

components/chart/symptom-cell.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import styles from './styles'
+
+const SymptomCell = ({
+  height,
+  symptom,
+  symptomValue,
+  isSymptomDataComplete
+}) => {
+
+  const shouldDrawDot = symptomValue !== false
+  const styleParent = [styles.symptomRow, { height }]
+  let styleChild
+
+  if (shouldDrawDot) {
+    const styleSymptom = styles.iconColors[symptom]
+    const symptomColor = styleSymptom.shades[symptomValue]
+
+    const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
+
+    const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ?
+      'white' : symptomColor
+    const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0
+    const borderColor = symptomColor
+    styleChild = [styles.symptomDot, {
+      backgroundColor,
+      borderColor,
+      borderWidth
+    }]
+  }
+
+  return (
+    <View style={styleParent} key={symptom}>
+      {shouldDrawDot && <View style={styleChild} />}
+    </View>
+  )
+}
+
+SymptomCell.propTypes = {
+  height: PropTypes.number,
+  symptom: PropTypes.string,
+  symptomValue: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number,
+  ]),
+  isSymptomDataComplete: PropTypes.bool,
+}
+
+export default SymptomCell