Merge branch 'chore/make-function-components-7' into 'main'

Chore/make function components 7

See merge request bloodyhealth/drip!521

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 {
+const DayColumn = ({
-  static propTypes = {
+  dateString,
-    dateString: PropTypes.string.isRequired,
+  chartSymptoms,
-    chartSymptoms: PropTypes.array,
+  columnHeight,
-    columnHeight: PropTypes.number.isRequired,
+  getFhmAndLtlInfo,
-    getFhmAndLtlInfo: PropTypes.func.isRequired,
+  setDate,
-    navigate: PropTypes.func.isRequired,
+  navigate,
-    setDate: PropTypes.func.isRequired,
+  shouldShowTemperatureColumn,
-    shouldShowTemperatureColumn: PropTypes.bool,
+  symptomHeight,
-    symptomHeight: PropTypes.number.isRequired,
+  symptomRowSymptoms,
-    symptomRowSymptoms: PropTypes.array,
+  xAxisHeight,
-    xAxisHeight: PropTypes.number,
+}) => {
-  }
+  const cycleDayData = getCycleDay(dateString)
+  let data = {}
 
-  constructor(props) {
+  if (cycleDayData) {
-    super()
+    data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
+      const symptomData = cycleDayData[symptom]
 
-    const { dateString, chartSymptoms, columnHeight } = props
+      if (symptomData && symptom === 'temperature') {
-    const cycleDayData = getCycleDay(dateString)
+        symptomDataToDisplay[symptom] = getTemperatureProps(
-    this.data = {}
+          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) {
+          symptomDataToDisplay[symptom] = getSymptomColorIndex(symptomData)
-      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)
-          }
         }
+      }
 
-        return symptomDataToDisplay
+      return symptomDataToDisplay
-      }, this.data)
+    }, data)
-    }
-
-    this.fhmAndLtl = props.getFhmAndLtlInfo(
-      props.dateString,
-      this.data.temperature ? this.data.temperature.value : null,
-      props.columnHeight
-    )
   }
 
-  onDaySelect = (date) => {
+  const fhmAndLtl = getFhmAndLtlInfo(
-    this.props.setDate(date)
+    dateString,
-    this.props.navigate('CycleDay')
+    data.temperature ? data.temperature.value : null,
+    columnHeight
+  )
+
+  const onDaySelect = (date) => {
+    setDate(date)
+    navigate('CycleDay')
   }
 
-  shouldComponentUpdate() {
+  return (
-    return false
+    <TouchableOpacity onPress={() => onDaySelect(dateString)} activeOpacity={1}>
-  }
+      {shouldShowTemperatureColumn && (
+        <TemperatureColumn
+          horizontalLinePosition={fhmAndLtl.drawLtlAt}
+          isVerticalLine={fhmAndLtl.drawFhmLine}
+          data={data && data.temperature}
+          columnHeight={columnHeight}
+        />
+      )}
 
-  render() {
+      <CycleDayLabel height={xAxisHeight} date={dateString} />
-    const {
-      columnHeight,
-      dateString,
-      shouldShowTemperatureColumn,
-      symptomHeight,
-      symptomRowSymptoms,
-      xAxisHeight,
-    } = this.props
 
-    return (
+      {symptomRowSymptoms.map((symptom, i) => {
-      <TouchableOpacity
+        const hasSymptomData = Object.prototype.hasOwnProperty.call(
-        onPress={() => this.onDaySelect(dateString)}
+          data,
-        activeOpacity={1}
+          symptom
-      >
+        )
-        {shouldShowTemperatureColumn && (
+        return (
-          <TemperatureColumn
+          <SymptomCell
-            horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
+            index={i}
-            isVerticalLine={this.fhmAndLtl.drawFhmLine}
+            key={symptom}
-            data={this.data && this.data.temperature}
+            symptom={symptom}
-            columnHeight={columnHeight}
+            symptomValue={hasSymptomData && data[symptom]}
+            isSymptomDataComplete={
+              hasSymptomData && isSymptomDataComplete(symptom, dateString)
+            }
+            height={symptomHeight}
           />
-        )}
+        )
+      })}
+    </TouchableOpacity>
+  )
+}
 
-        <CycleDayLabel height={xAxisHeight} date={dateString} />
+DayColumn.propTypes = {
-
+  dateString: PropTypes.string.isRequired,
-        {symptomRowSymptoms.map((symptom, i) => {
+  chartSymptoms: PropTypes.array,
-          const hasSymptomData = Object.prototype.hasOwnProperty.call(
+  columnHeight: PropTypes.number.isRequired,
-            this.data,
+  getFhmAndLtlInfo: PropTypes.func.isRequired,
-            symptom
+  navigate: PropTypes.func.isRequired,
-          )
+  setDate: PropTypes.func.isRequired,
-          return (
+  shouldShowTemperatureColumn: PropTypes.bool,
-            <SymptomCell
+  symptomHeight: PropTypes.number.isRequired,
-              index={i}
+  symptomRowSymptoms: PropTypes.array,
-              key={symptom}
+  xAxisHeight: PropTypes.number,
-              symptom={symptom}
-              symptomValue={hasSymptomData && this.data[symptom]}
-              isSymptomDataComplete={
-                hasSymptomData && isSymptomDataComplete(symptom, dateString)
-              }
-              height={symptomHeight}
-            />
-          )
-        })}
-      </TouchableOpacity>
-    )
-  }
 }
 
 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,78 +11,73 @@ import {
   CHART_STROKE_WIDTH,
 } from '../../config'
 
-export default class DotAndLine extends Component {
+const DotAndLine = ({
-  static propTypes = {
+  exclude,
-    exclude: PropTypes.bool,
+  leftTemperatureExclude,
-    leftY: PropTypes.number,
+  leftY,
-    leftTemperatureExclude: PropTypes.bool,
+  rightTemperatureExclude,
-    rightY: PropTypes.number,
+  rightY,
-    rightTemperatureExclude: PropTypes.bool,
+  y,
-    y: PropTypes.number.isRequired,
+}) => {
+  let excludeLeftLine, excludeRightLine, lineLeft, lineRight
+
+  if (leftY) {
+    const middleY = (leftY - y) / 2 + y
+    excludeLeftLine = leftTemperatureExclude || exclude
+    lineLeft = new Path().moveTo(CHART_COLUMN_MIDDLE, y).lineTo(0, middleY)
+  }
+  if (rightY) {
+    const middleY = (y - rightY) / 2 + rightY
+    excludeRightLine = rightTemperatureExclude || exclude
+    lineRight = new Path()
+      .moveTo(CHART_COLUMN_MIDDLE, y)
+      .lineTo(CHART_COLUMN_WIDTH, middleY)
   }
 
-  shouldComponentUpdate(newProps) {
+  const dot = new Path()
-    return Object.keys(newProps).some((key) => newProps[key] != this.props[key])
+    .moveTo(CHART_COLUMN_MIDDLE, y - CHART_DOT_RADIUS)
-  }
+    .arc(0, CHART_DOT_RADIUS * 2, CHART_DOT_RADIUS)
+    .arc(0, CHART_DOT_RADIUS * -2, CHART_DOT_RADIUS)
+  const dotColor = exclude ? Colors.turquoise : Colors.turquoiseDark
+  const lineColorLeft = excludeLeftLine
+    ? Colors.turquoise
+    : Colors.turquoiseDark
+  const lineColorRight = excludeRightLine
+    ? Colors.turquoise
+    : Colors.turquoiseDark
 
-  render() {
+  return (
-    const {
+    <React.Fragment>
-      exclude,
+      <Shape
-      leftTemperatureExclude,
+        d={lineLeft}
-      leftY,
+        stroke={lineColorLeft}
-      rightTemperatureExclude,
+        strokeWidth={CHART_STROKE_WIDTH}
-      rightY,
+        key={y}
-      y,
+      />
-    } = this.props
+      <Shape
-    let excludeLeftLine, excludeRightLine, lineLeft, lineRight
+        d={lineRight}
-
+        stroke={lineColorRight}
-    if (leftY) {
+        strokeWidth={CHART_STROKE_WIDTH}
-      const middleY = (leftY - y) / 2 + y
+        key={y + CHART_DOT_RADIUS}
-      excludeLeftLine = leftTemperatureExclude || exclude
+      />
-      lineLeft = new Path().moveTo(CHART_COLUMN_MIDDLE, y).lineTo(0, middleY)
+      <Shape
-    }
+        d={dot}
-    if (rightY) {
+        stroke={dotColor}
-      const middleY = (y - rightY) / 2 + rightY
+        strokeWidth={CHART_STROKE_WIDTH}
-      excludeRightLine = rightTemperatureExclude || exclude
+        fill="white"
-      lineRight = new Path()
+        key="dot"
-        .moveTo(CHART_COLUMN_MIDDLE, y)
+      />
-        .lineTo(CHART_COLUMN_WIDTH, middleY)
+    </React.Fragment>
-    }
+  )
-
-    const dot = new Path()
-      .moveTo(CHART_COLUMN_MIDDLE, y - CHART_DOT_RADIUS)
-      .arc(0, CHART_DOT_RADIUS * 2, CHART_DOT_RADIUS)
-      .arc(0, CHART_DOT_RADIUS * -2, CHART_DOT_RADIUS)
-    const dotColor = exclude ? Colors.turquoise : Colors.turquoiseDark
-    const lineColorLeft = excludeLeftLine
-      ? Colors.turquoise
-      : Colors.turquoiseDark
-    const lineColorRight = excludeRightLine
-      ? Colors.turquoise
-      : Colors.turquoiseDark
-
-    return (
-      <React.Fragment>
-        <Shape
-          d={lineLeft}
-          stroke={lineColorLeft}
-          strokeWidth={CHART_STROKE_WIDTH}
-          key={y}
-        />
-        <Shape
-          d={lineRight}
-          stroke={lineColorRight}
-          strokeWidth={CHART_STROKE_WIDTH}
-          key={y + CHART_DOT_RADIUS}
-        />
-        <Shape
-          d={dot}
-          stroke={dotColor}
-          strokeWidth={CHART_STROKE_WIDTH}
-          fill="white"
-          key="dot"
-        />
-      </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