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,29 +14,23 @@ 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,
-  }
-
-  constructor(props) {
-    super()
-
-    const { dateString, chartSymptoms, columnHeight } = props
+const DayColumn = ({
+  dateString,
+  chartSymptoms,
+  columnHeight,
+  getFhmAndLtlInfo,
+  setDate,
+  navigate,
+  shouldShowTemperatureColumn,
+  symptomHeight,
+  symptomRowSymptoms,
+  xAxisHeight,
+}) => {
   const cycleDayData = getCycleDay(dateString)
-    this.data = {}
+  let data = {}
 
   if (cycleDayData) {
-      this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
+    data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
       const symptomData = cycleDayData[symptom]
 
       if (symptomData && symptom === 'temperature') {
@@ -57,45 +51,27 @@ class DayColumn extends Component {
       }
 
       return symptomDataToDisplay
-      }, this.data)
+    }, data)
   }
 
-    this.fhmAndLtl = props.getFhmAndLtlInfo(
-      props.dateString,
-      this.data.temperature ? this.data.temperature.value : null,
-      props.columnHeight
-    )
-  }
-
-  onDaySelect = (date) => {
-    this.props.setDate(date)
-    this.props.navigate('CycleDay')
-  }
-
-  shouldComponentUpdate() {
-    return false
-  }
-
-  render() {
-    const {
-      columnHeight,
+  const fhmAndLtl = getFhmAndLtlInfo(
     dateString,
-      shouldShowTemperatureColumn,
-      symptomHeight,
-      symptomRowSymptoms,
-      xAxisHeight,
-    } = this.props
+    data.temperature ? data.temperature.value : null,
+    columnHeight
+  )
+
+  const onDaySelect = (date) => {
+    setDate(date)
+    navigate('CycleDay')
+  }
 
   return (
-      <TouchableOpacity
-        onPress={() => this.onDaySelect(dateString)}
-        activeOpacity={1}
-      >
+    <TouchableOpacity onPress={() => onDaySelect(dateString)} activeOpacity={1}>
       {shouldShowTemperatureColumn && (
         <TemperatureColumn
-            horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
-            isVerticalLine={this.fhmAndLtl.drawFhmLine}
-            data={this.data && this.data.temperature}
+          horizontalLinePosition={fhmAndLtl.drawLtlAt}
+          isVerticalLine={fhmAndLtl.drawFhmLine}
+          data={data && data.temperature}
           columnHeight={columnHeight}
         />
       )}
@@ -104,7 +80,7 @@ class DayColumn extends Component {
 
       {symptomRowSymptoms.map((symptom, i) => {
         const hasSymptomData = Object.prototype.hasOwnProperty.call(
-            this.data,
+          data,
           symptom
         )
         return (
@@ -112,7 +88,7 @@ class DayColumn extends Component {
             index={i}
             key={symptom}
             symptom={symptom}
-              symptomValue={hasSymptomData && this.data[symptom]}
+            symptomValue={hasSymptomData && data[symptom]}
             isSymptomDataComplete={
               hasSymptomData && isSymptomDataComplete(symptom, dateString)
             }
@@ -123,6 +99,18 @@ class DayColumn extends Component {
     </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

components/chart/dot-and-line.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Path, Shape } from '@react-native-community/art'
 
@@ -11,29 +11,14 @@ import {
   CHART_STROKE_WIDTH,
 } from '../../config'
 
-export default class DotAndLine extends Component {
-  static propTypes = {
-    exclude: PropTypes.bool,
-    leftY: PropTypes.number,
-    leftTemperatureExclude: PropTypes.bool,
-    rightY: PropTypes.number,
-    rightTemperatureExclude: PropTypes.bool,
-    y: PropTypes.number.isRequired,
-  }
-
-  shouldComponentUpdate(newProps) {
-    return Object.keys(newProps).some((key) => newProps[key] != this.props[key])
-  }
-
-  render() {
-    const {
+const DotAndLine = ({
   exclude,
   leftTemperatureExclude,
   leftY,
   rightTemperatureExclude,
   rightY,
   y,
-    } = this.props
+}) => {
   let excludeLeftLine, excludeRightLine, lineLeft, lineRight
 
   if (leftY) {
@@ -85,4 +70,14 @@ export default class DotAndLine extends Component {
     </React.Fragment>
   )
 }
+
+DotAndLine.propTypes = {
+  exclude: PropTypes.bool,
+  leftY: PropTypes.number,
+  leftTemperatureExclude: PropTypes.bool,
+  rightY: PropTypes.number,
+  rightTemperatureExclude: PropTypes.bool,
+  y: PropTypes.number.isRequired,
 }
+
+export default DotAndLine