Chore/make function components 7

components/chart/day-column.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { TouchableOpacity } from 'react-native'
 
@@ -14,115 +14,103 @@ import {
   isSymptomDataComplete,
 } from '../helpers/chart'
 
-class DayColumn extends Component {
-  static propTypes = {
-    dateString: PropTypes.string.isRequired,
-    chartSymptoms: PropTypes.array,
-    columnHeight: PropTypes.number.isRequired,
-    getFhmAndLtlInfo: PropTypes.func.isRequired,
-    navigate: PropTypes.func.isRequired,
-    setDate: PropTypes.func.isRequired,
-    shouldShowTemperatureColumn: PropTypes.bool,
-    symptomHeight: PropTypes.number.isRequired,
-    symptomRowSymptoms: PropTypes.array,
-    xAxisHeight: PropTypes.number,
-  }
+const DayColumn = ({
+  dateString,
+  chartSymptoms,
+  columnHeight,
+  getFhmAndLtlInfo,
+  setDate,
+  navigate,
+  shouldShowTemperatureColumn,
+  symptomHeight,
+  symptomRowSymptoms,
+  xAxisHeight,
+}) => {
+  const cycleDayData = getCycleDay(dateString)
+  let data = {}
 
-  constructor(props) {
-    super()
+  if (cycleDayData) {
+    data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
+      const symptomData = cycleDayData[symptom]
 
-    const { dateString, chartSymptoms, columnHeight } = props
-    const cycleDayData = getCycleDay(dateString)
-    this.data = {}
+      if (symptomData && symptom === 'temperature') {
+        symptomDataToDisplay[symptom] = getTemperatureProps(
+          symptomData,
+          columnHeight,
+          dateString
+        )
+      } else {
+        if (symptomData && !symptomData.exclude) {
+          // if symptomColorMethods entry doesn't exist for given symptom,
+          // use 'default'
+          const getSymptomColorIndex =
+            symptomColorMethods[symptom] || symptomColorMethods['default']
 
-    if (cycleDayData) {
-      this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
-        const symptomData = cycleDayData[symptom]
-
-        if (symptomData && symptom === 'temperature') {
-          symptomDataToDisplay[symptom] = getTemperatureProps(
-            symptomData,
-            columnHeight,
-            dateString
-          )
-        } else {
-          if (symptomData && !symptomData.exclude) {
-            // if symptomColorMethods entry doesn't exist for given symptom,
-            // use 'default'
-            const getSymptomColorIndex =
-              symptomColorMethods[symptom] || symptomColorMethods['default']
-
-            symptomDataToDisplay[symptom] = getSymptomColorIndex(symptomData)
-          }
+          symptomDataToDisplay[symptom] = getSymptomColorIndex(symptomData)
         }
+      }
 
-        return symptomDataToDisplay
-      }, this.data)
-    }
-
-    this.fhmAndLtl = props.getFhmAndLtlInfo(
-      props.dateString,
-      this.data.temperature ? this.data.temperature.value : null,
-      props.columnHeight
-    )
+      return symptomDataToDisplay
+    }, data)
   }
 
-  onDaySelect = (date) => {
-    this.props.setDate(date)
-    this.props.navigate('CycleDay')
+  const fhmAndLtl = getFhmAndLtlInfo(
+    dateString,
+    data.temperature ? data.temperature.value : null,
+    columnHeight
+  )
+
+  const onDaySelect = (date) => {
+    setDate(date)
+    navigate('CycleDay')
   }
 
-  shouldComponentUpdate() {
-    return false
-  }
+  return (
+    <TouchableOpacity onPress={() => onDaySelect(dateString)} activeOpacity={1}>
+      {shouldShowTemperatureColumn && (
+        <TemperatureColumn
+          horizontalLinePosition={fhmAndLtl.drawLtlAt}
+          isVerticalLine={fhmAndLtl.drawFhmLine}
+          data={data && data.temperature}
+          columnHeight={columnHeight}
+        />
+      )}
 
-  render() {
-    const {
-      columnHeight,
-      dateString,
-      shouldShowTemperatureColumn,
-      symptomHeight,
-      symptomRowSymptoms,
-      xAxisHeight,
-    } = this.props
+      <CycleDayLabel height={xAxisHeight} date={dateString} />
 
-    return (
-      <TouchableOpacity
-        onPress={() => this.onDaySelect(dateString)}
-        activeOpacity={1}
-      >
-        {shouldShowTemperatureColumn && (
-          <TemperatureColumn
-            horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
-            isVerticalLine={this.fhmAndLtl.drawFhmLine}
-            data={this.data && this.data.temperature}
-            columnHeight={columnHeight}
+      {symptomRowSymptoms.map((symptom, i) => {
+        const hasSymptomData = Object.prototype.hasOwnProperty.call(
+          data,
+          symptom
+        )
+        return (
+          <SymptomCell
+            index={i}
+            key={symptom}
+            symptom={symptom}
+            symptomValue={hasSymptomData && data[symptom]}
+            isSymptomDataComplete={
+              hasSymptomData && isSymptomDataComplete(symptom, dateString)
+            }
+            height={symptomHeight}
           />
-        )}
+        )
+      })}
+    </TouchableOpacity>
+  )
+}
 
-        <CycleDayLabel height={xAxisHeight} date={dateString} />
-
-        {symptomRowSymptoms.map((symptom, i) => {
-          const hasSymptomData = Object.prototype.hasOwnProperty.call(
-            this.data,
-            symptom
-          )
-          return (
-            <SymptomCell
-              index={i}
-              key={symptom}
-              symptom={symptom}
-              symptomValue={hasSymptomData && this.data[symptom]}
-              isSymptomDataComplete={
-                hasSymptomData && isSymptomDataComplete(symptom, dateString)
-              }
-              height={symptomHeight}
-            />
-          )
-        })}
-      </TouchableOpacity>
-    )
-  }
+DayColumn.propTypes = {
+  dateString: PropTypes.string.isRequired,
+  chartSymptoms: PropTypes.array,
+  columnHeight: PropTypes.number.isRequired,
+  getFhmAndLtlInfo: PropTypes.func.isRequired,
+  navigate: PropTypes.func.isRequired,
+  setDate: PropTypes.func.isRequired,
+  shouldShowTemperatureColumn: PropTypes.bool,
+  symptomHeight: PropTypes.number.isRequired,
+  symptomRowSymptoms: PropTypes.array,
+  xAxisHeight: PropTypes.number,
 }
 
 export default DayColumn