From 17a2ca995252ae9e4bb5f20f1f4b59dc0cd1e709 Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Mon, 12 Sep 2022 10:14:26 +0000 Subject: [PATCH] Chore/make function components 7 --- components/chart/day-column.js | 182 +++++++++++++++---------------- components/chart/dot-and-line.js | 139 ++++++++++++----------- 2 files changed, 152 insertions(+), 169 deletions(-) diff --git a/components/chart/day-column.js b/components/chart/day-column.js index 942fe31..ac4ac55 100644 --- a/components/chart/day-column.js +++ b/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 ( + onDaySelect(dateString)} activeOpacity={1}> + {shouldShowTemperatureColumn && ( + + )} - render() { - const { - columnHeight, - dateString, - shouldShowTemperatureColumn, - symptomHeight, - symptomRowSymptoms, - xAxisHeight, - } = this.props + - return ( - this.onDaySelect(dateString)} - activeOpacity={1} - > - {shouldShowTemperatureColumn && ( - { + const hasSymptomData = Object.prototype.hasOwnProperty.call( + data, + symptom + ) + return ( + - )} + ) + })} + + ) +} - - - {symptomRowSymptoms.map((symptom, i) => { - const hasSymptomData = Object.prototype.hasOwnProperty.call( - this.data, - symptom - ) - return ( - - ) - })} - - ) - } +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 diff --git a/components/chart/dot-and-line.js b/components/chart/dot-and-line.js index 1aad91d..8c83935 100644 --- a/components/chart/dot-and-line.js +++ b/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 { - static propTypes = { - exclude: PropTypes.bool, - leftY: PropTypes.number, - leftTemperatureExclude: PropTypes.bool, - rightY: PropTypes.number, - rightTemperatureExclude: PropTypes.bool, - y: PropTypes.number.isRequired, +const DotAndLine = ({ + exclude, + leftTemperatureExclude, + leftY, + rightTemperatureExclude, + rightY, + y, +}) => { + 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) { - return Object.keys(newProps).some((key) => newProps[key] != this.props[key]) - } + 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 - render() { - const { - exclude, - leftTemperatureExclude, - leftY, - rightTemperatureExclude, - rightY, - y, - } = this.props - 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) - } - - 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 ( - - - - - - ) - } + return ( + + + + + + ) } + +DotAndLine.propTypes = { + exclude: PropTypes.bool, + leftY: PropTypes.number, + leftTemperatureExclude: PropTypes.bool, + rightY: PropTypes.number, + rightTemperatureExclude: PropTypes.bool, + y: PropTypes.number.isRequired, +} + +export default DotAndLine