Move auxiliary functions from day-column.js component file to helpers file

components/chart/day-column.js

@@ -4,14 +4,17 @@ import { connect } from 'react-redux'
 
 import { setDate } from '../../slices/date'
 
-import { LocalDate } from 'js-joda'
 import { getCycleDay } from '../../db'
 
 import SymptomCell from './symptom-cell'
 import TemperatureColumn from './temperature-column'
 import CycleDayLabel from './cycle-day-label'
 
-import { normalizeToScale } from '../helpers/chart'
+import {
+  symptomColorMethods,
+  getTemperatureProps,
+  isSymptomDataComplete
+} from '../helpers/chart'
 
 class DayColumn extends Component {
   constructor(props) {
@@ -27,14 +30,13 @@ class DayColumn extends Component {
 
         if (symptomData && symptom === 'temperature') {
           symptomDataToDisplay[symptom] =
-           this.getTemperatureProps(symptomData, columnHeight, dateString)
+           getTemperatureProps(symptomData, columnHeight, dateString)
         } else {
           if (symptomData && ! symptomData.exclude) {
             // if symptomColorMethods entry doesn't exist for given symptom,
             // use 'default'
             const getSymptomColorIndex =
-              this.symptomColorMethods[symptom] ||
-              this.symptomColorMethods['default']
+              symptomColorMethods[symptom] || symptomColorMethods['default']
 
             symptomDataToDisplay[symptom] = getSymptomColorIndex(symptomData)
           }
@@ -51,75 +53,6 @@ class DayColumn extends Component {
     )
   }
 
-  getTemperatureProps = (symptomData, columnHeight, dateString) => {
-    const extractedData = {}
-    const { value, exclude } = symptomData
-    const neighborTemperatureGraphPoints =
-      getInfoForNeighborColumns(dateString, columnHeight)
-
-    for (const key in neighborTemperatureGraphPoints) {
-      extractedData[key] = neighborTemperatureGraphPoints[key]
-    }
-    return Object.assign({
-      value,
-      y: normalizeToScale(value, columnHeight),
-      temperatureExclude: exclude,
-    }, extractedData)
-  }
-
-  symptomColorMethods = {
-    'mucus': (symptomData) => {
-      const { feeling, texture } = symptomData
-      const colorIndex = feeling + texture
-      return colorIndex
-    },
-    'cervix': (symptomData) => {
-      const { opening, firmness } = symptomData
-      const isDataComplete = opening !== null && firmness !== null
-      const isClosedAndHard =
-        isDataComplete &&
-        (opening === 0 && firmness === 0)
-      const colorIndex = isClosedAndHard ? 0 : 2
-      return colorIndex
-    },
-    'sex': (symptomData) => {
-      const { solo, partner } = symptomData
-      const colorIndex = (solo !== null && partner !== null) ?
-        (solo + 2 * partner - 1) : 0
-      return colorIndex
-    },
-    'bleeding': (symptomData) => {
-      const { value } = symptomData
-      const colorIndex = value
-      return colorIndex
-    },
-    'default': () => { // desire, pain, mood, note
-      const colorIndex = 0
-      return colorIndex
-    }
-  }
-
-  isSymptomDataComplete = (symptom) => {
-    const { dateString } = this.props
-    const cycleDayData = getCycleDay(dateString)
-    const symptomData = cycleDayData[symptom]
-
-    const dataCompletenessCheck = {
-      'cervix': () => {
-        const { opening, firmness } = symptomData
-        return (opening !== null) && (firmness !== null)
-      },
-      'mucus': () => {
-        const { feeling, texture } = symptomData
-        return (feeling !== null) && (texture !== null)
-      },
-      'default': () => {
-        return true
-      }
-    }
-    return (dataCompletenessCheck[symptom] || dataCompletenessCheck['default'])()
-  }
-
   onDaySelect = (date) => {
     this.props.setDate(date)
     this.props.navigate('CycleDay')
@@ -149,7 +82,7 @@ class DayColumn extends Component {
               symptom={symptom}
               symptomValue={hasSymptomData && this.data[symptom]}
               isSymptomDataComplete={
-                hasSymptomData && this.isSymptomDataComplete(symptom)
+                hasSymptomData && isSymptomDataComplete(symptom, dateString)
               }
               height={this.props.symptomHeight}
             />)
@@ -183,27 +116,3 @@ export default connect(
   null,
   mapDispatchToProps,
 )(DayColumn)
-
-function getInfoForNeighborColumns(dateString, columnHeight) {
-  const ret = {
-    rightY: null,
-    rightTemperatureExclude: null,
-    leftY: null,
-    leftTemperatureExclude: null
-  }
-  const target = LocalDate.parse(dateString)
-  const dayBefore = target.minusDays(1).toString()
-  const dayAfter = target.plusDays(1).toString()
-  const cycleDayBefore = getCycleDay(dayBefore)
-  const cycleDayAfter = getCycleDay(dayAfter)
-  if (cycleDayAfter && cycleDayAfter.temperature) {
-    ret.rightY = normalizeToScale(cycleDayAfter.temperature.value, columnHeight)
-    ret.rightTemperatureExclude = cycleDayAfter.temperature.exclude
-  }
-  if (cycleDayBefore && cycleDayBefore.temperature) {
-    ret.leftY = normalizeToScale(cycleDayBefore.temperature.value, columnHeight)
-    ret.leftTemperatureExclude = cycleDayBefore.temperature.exclude
-  }
-
-  return ret
-}

components/helpers/chart.js

+import { LocalDate } from 'js-joda'
+
 import { scaleObservable, unitObservable } from '../../local-storage'
+import { getCycleDay } from '../../db'
+
 import config from '../../config'
 
 export function normalizeToScale(temp, columnHeight) {
@@ -65,3 +69,96 @@ export function getTickList(columnHeight) {
     }
   })
 }
+
+export function isSymptomDataComplete(symptom, dateString) {
+  const cycleDayData = getCycleDay(dateString)
+  const symptomData = cycleDayData[symptom]
+
+  const dataCompletenessCheck = {
+    'cervix': () => {
+      const { opening, firmness } = symptomData
+      return (opening !== null) && (firmness !== null)
+    },
+    'mucus': () => {
+      const { feeling, texture } = symptomData
+      return (feeling !== null) && (texture !== null)
+    },
+    'default': () => {
+      return true
+    }
+  }
+  return (dataCompletenessCheck[symptom] || dataCompletenessCheck['default'])()
+}
+
+function getInfoForNeighborColumns(dateString, columnHeight) {
+  const ret = {
+    rightY: null,
+    rightTemperatureExclude: null,
+    leftY: null,
+    leftTemperatureExclude: null
+  }
+  const target = LocalDate.parse(dateString)
+  const dayBefore = target.minusDays(1).toString()
+  const dayAfter = target.plusDays(1).toString()
+  const cycleDayBefore = getCycleDay(dayBefore)
+  const cycleDayAfter = getCycleDay(dayAfter)
+
+  if (cycleDayAfter && cycleDayAfter.temperature) {
+    ret.rightY = normalizeToScale(cycleDayAfter.temperature.value, columnHeight)
+    ret.rightTemperatureExclude = cycleDayAfter.temperature.exclude
+  }
+  if (cycleDayBefore && cycleDayBefore.temperature) {
+    ret.leftY = normalizeToScale(cycleDayBefore.temperature.value, columnHeight)
+    ret.leftTemperatureExclude = cycleDayBefore.temperature.exclude
+  }
+
+  return ret
+}
+
+export function getTemperatureProps(symptomData, columnHeight, dateString) {
+  const extractedData = {}
+  const { value, exclude } = symptomData
+  const neighborTemperatureGraphPoints =
+    getInfoForNeighborColumns(dateString, columnHeight)
+
+  for (const key in neighborTemperatureGraphPoints) {
+    extractedData[key] = neighborTemperatureGraphPoints[key]
+  }
+  return Object.assign({
+    value,
+    y: normalizeToScale(value, columnHeight),
+    temperatureExclude: exclude,
+  }, extractedData)
+}
+
+export const symptomColorMethods = {
+  'mucus': (symptomData) => {
+    const { feeling, texture } = symptomData
+    const colorIndex = feeling + texture
+    return colorIndex
+  },
+  'cervix': (symptomData) => {
+    const { opening, firmness } = symptomData
+    const isDataComplete = opening !== null && firmness !== null
+    const isClosedAndHard =
+      isDataComplete &&
+      (opening === 0 && firmness === 0)
+    const colorIndex = isClosedAndHard ? 0 : 2
+    return colorIndex
+  },
+  'sex': (symptomData) => {
+    const { solo, partner } = symptomData
+    const colorIndex = (solo !== null && partner !== null) ?
+      (solo + 2 * partner - 1) : 0
+    return colorIndex
+  },
+  'bleeding': (symptomData) => {
+    const { value } = symptomData
+    const colorIndex = value
+    return colorIndex
+  },
+  'default': () => { // desire, pain, mood, note
+    const colorIndex = 0
+    return colorIndex
+  }
+}