540 Refactor temperature to functional component

components/cycle-day/symptom-edit-view.js

@@ -23,12 +23,11 @@ import info from '../../i18n/en/symptom-info'
 import { Colors, Containers, Sizes, Spacing } from '../../styles'
 
 class SymptomEditView extends Component {
-
   static propTypes = {
     date: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
     symptom: PropTypes.string.isRequired,
-    symptomData: PropTypes.object
+    symptomData: PropTypes.object,
   }
 
   constructor(props) {
@@ -49,7 +48,7 @@ class SymptomEditView extends Component {
       shouldShowInfo: false,
       shouldShowNote,
       shouldBoxGroup,
-      shouldTabGroup
+      shouldTabGroup,
     }
   }
 
@@ -97,8 +96,8 @@ class SymptomEditView extends Component {
 
   onSaveTemperature = (value, field) => {
     const data = this.getParsedData()
-    const dataToSave = field === 'value'
-      ? { [field]: Number(value) } : { [field]: value }
+    const dataToSave =
+      field === 'value' ? { [field]: Number(value) } : { [field]: value }
     Object.assign(data, { ...dataToSave })
 
     this.setState({ data })
@@ -106,10 +105,10 @@ class SymptomEditView extends Component {
 
   onSelectBox = (key) => {
     const data = this.getParsedData()
-    if (key === "other") {
+    if (key === 'other') {
       Object.assign(data, {
         note: null,
-        [key]: !this.state.data[key]
+        [key]: !this.state.data[key],
       })
     } else {
       Object.assign(data, { [key]: !this.state.data[key] })
@@ -118,7 +117,7 @@ class SymptomEditView extends Component {
     this.setState({ data })
   }
 
-  onSelectBoxNote= (value) => {
+  onSelectBoxNote = (value) => {
     const data = this.getParsedData()
     Object.assign(data, { note: value !== '' ? value : null })
 
@@ -147,12 +146,13 @@ class SymptomEditView extends Component {
 
   render() {
     const { symptom } = this.props
-    const { data,
+    const {
+      data,
       shouldShowExclude,
       shouldShowInfo,
       shouldShowNote,
       shouldBoxGroup,
-      shouldTabGroup
+      shouldTabGroup,
     } = this.state
     const iconName = shouldShowInfo ? 'chevron-up' : 'chevron-down'
     const noteText = symptom === 'note' ? data.value : data.note
@@ -166,73 +166,73 @@ class SymptomEditView extends Component {
           <View style={styles.headerContainer}>
             <CloseIcon onClose={this.closeView} />
           </View>
-          {symptom === 'temperature' &&
+          {symptom === 'temperature' && (
             <Temperature
               data={data}
               save={(value, field) => this.onSaveTemperature(value, field)}
             />
-          }
-          {shouldTabGroup && symtomPage[symptom].selectTabGroups.map(group => {
-            return (
-              <Segment key={group.key} style={styles.segmentBorder}>
-                <AppText style={styles.title}>{group.title}</AppText>
-                <SelectTabGroup
-                  activeButton={data[group.key]}
-                  buttons={group.options}
-                  onSelect={value => this.onSelectTab(group, value)}
-                />
-              </Segment>
-            )
-          })
-          }
-          {shouldBoxGroup && symtomPage[symptom].selectBoxGroups.map(group => {
-            const isOtherSelected =
-              data['other'] !== null
-              && data['other'] !== false
-              && Object.keys(group.options).includes('other')
-
-            return (
-              <Segment key={group.key} style={styles.segmentBorder} >
-                <AppText style={styles.title}>{group.title}</AppText>
-                <SelectBoxGroup
-                  labels={group.options}
-                  onSelect={value => this.onSelectBox(value)}
-                  optionsState={data}
-                />
-                {isOtherSelected &&
-                  <AppTextInput
-                    multiline={true}
-                    placeholder={sharedLabels.enter}
-                    value={data.note}
-                    onChangeText={value => this.onSelectBoxNote(value)}
+          )}
+          {shouldTabGroup &&
+            symtomPage[symptom].selectTabGroups.map((group) => {
+              return (
+                <Segment key={group.key} style={styles.segmentBorder}>
+                  <AppText style={styles.title}>{group.title}</AppText>
+                  <SelectTabGroup
+                    activeButton={data[group.key]}
+                    buttons={group.options}
+                    onSelect={(value) => this.onSelectTab(group, value)}
                   />
-                }
-              </Segment>
-            )
-          })
-          }
-          {shouldShowExclude &&
-            <Segment style={styles.segmentBorder} >
+                </Segment>
+              )
+            })}
+          {shouldBoxGroup &&
+            symtomPage[symptom].selectBoxGroups.map((group) => {
+              const isOtherSelected =
+                data['other'] !== null &&
+                data['other'] !== false &&
+                Object.keys(group.options).includes('other')
+
+              return (
+                <Segment key={group.key} style={styles.segmentBorder}>
+                  <AppText style={styles.title}>{group.title}</AppText>
+                  <SelectBoxGroup
+                    labels={group.options}
+                    onSelect={(value) => this.onSelectBox(value)}
+                    optionsState={data}
+                  />
+                  {isOtherSelected && (
+                    <AppTextInput
+                      multiline={true}
+                      placeholder={sharedLabels.enter}
+                      value={data.note}
+                      onChangeText={(value) => this.onSelectBoxNote(value)}
+                    />
+                  )}
+                </Segment>
+              )
+            })}
+          {shouldShowExclude && (
+            <Segment style={styles.segmentBorder}>
               <AppSwitch
                 onToggle={this.onExcludeToggle}
                 text={symtomPage[symptom].excludeText}
                 value={data.exclude}
               />
             </Segment>
-          }
-          {shouldShowNote &&
-            <Segment style={styles.segmentBorder} >
+          )}
+          {shouldShowNote && (
+            <Segment style={styles.segmentBorder}>
               <AppText>{symtomPage[symptom].note}</AppText>
               <AppTextInput
                 multiline={true}
                 numberOfLines={3}
                 onChangeText={this.onEditNote}
                 placeholder={sharedLabels.enter}
-                testID='noteInput'
+                testID="noteInput"
                 value={noteText !== null ? noteText : ''}
               />
             </Segment>
-          }
+          )}
           <View style={styles.buttonsContainer}>
             <Button iconName={iconName} isSmall onPress={this.onPressLearnMore}>
               {sharedLabels.learnMore}
@@ -244,11 +244,11 @@ class SymptomEditView extends Component {
               {sharedLabels.save}
             </Button>
           </View>
-          {shouldShowInfo &&
-            <Segment last style={styles.segmentBorder} >
+          {shouldShowInfo && (
+            <Segment last style={styles.segmentBorder}>
               <AppText>{info[symptom].text}</AppText>
             </Segment>
-          }
+          )}
         </ScrollView>
       </AppModal>
     )
@@ -257,7 +257,7 @@ class SymptomEditView extends Component {
 
 const styles = StyleSheet.create({
   buttonsContainer: {
-    ...Containers.rowContainer
+    ...Containers.rowContainer,
   },
   headerContainer: {
     flexDirection: 'row',
@@ -275,23 +275,20 @@ const styles = StyleSheet.create({
     marginVertical: Sizes.huge * 2,
     position: 'absolute',
     minHeight: '40%',
-    maxHeight: Dimensions.get('window').height * 0.7
+    maxHeight: Dimensions.get('window').height * 0.7,
   },
   segmentBorder: {
-    borderBottomColor: Colors.greyLight
+    borderBottomColor: Colors.greyLight,
   },
   title: {
-    fontSize: Sizes.subtitle
-  }
+    fontSize: Sizes.subtitle,
+  },
 })
 
 const mapStateToProps = (state) => {
-  return({
+  return {
     date: getDate(state),
-  })
+  }
 }
 
-export default connect(
-  mapStateToProps,
-  null,
-)(SymptomEditView)
+export default connect(mapStateToProps, null)(SymptomEditView)

components/cycle-day/temperature.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { Keyboard } from 'react-native'
@@ -12,129 +12,92 @@ import Segment from '../common/segment'
 import { connect } from 'react-redux'
 import { getDate } from '../../slices/date'
 import {
-  isTemperatureOutOfRange,
+  getTemperatureOutOfRangeMessage,
   getPreviousTemperature,
+  formatTemperature,
 } from '../helpers/cycle-day'
 
 import { temperature as labels } from '../../i18n/en/cycle-day'
 
 import { Colors, Containers, Sizes, Spacing } from '../../styles'
 
-const formatTemperature = (value) =>
-  value === null ? value : Number.parseFloat(value).toFixed(2)
+const Temperature = ({ data, date, save }) => {
+  const [isTimePickerVisible, setIsTimePickerVisible] = useState(false)
+  const [temperature, setTemperature] = useState(
+    formatTemperature(data.value) || getPreviousTemperature(date)
+  )
 
-class Temperature extends Component {
-  static propTypes = {
-    data: PropTypes.object,
-    date: PropTypes.string.isRequired,
-    save: PropTypes.func,
-  }
-
-  constructor(props) {
-    super(props)
-
-    const { data, date } = this.props
-    const { value } = data
-    const { shouldShowSuggestion, suggestedTemperature } =
-      getPreviousTemperature(date)
-
-    this.state = {
-      isTimePickerVisible: false,
-      shouldShowSuggestion,
-      suggestedTemperature: formatTemperature(suggestedTemperature),
-      value: formatTemperature(value),
+  // update state in parent component once to ensure
+  // that pre-filled values are saved on button click
+  useEffect(() => {
+    if (temperature) {
+      save(temperature, 'value')
     }
+  }, [])
+
+  function onChangeTemperature(value) {
+    const formattedValue = value.replace(',', '.').trim()
+    if (!Number(formattedValue) && value !== '') return false
+    setTemperature(formattedValue)
   }
 
-  onCancelTimePicker = () => {
-    this.setState({ isTimePickerVisible: false })
-  }
-
-  onChangeTemperature = (value) => {
-    if (!Number(value)) return false
-
-    this.setState({
-      value: value.trim(),
-      shouldShowSuggestion: false,
-    })
-  }
-
-  onShowTimePicker = () => {
+  function onShowTimePicker() {
     Keyboard.dismiss()
-    this.setState({ isTimePickerVisible: true })
+    setIsTimePickerVisible(true)
   }
 
-  setTemperature = () => {
-    const { value } = this.state
-    this.props.save(value, 'value')
-  }
-
-  setTime = (jsDate) => {
+  function setTime(jsDate) {
     const time = moment(jsDate).format('HH:mm')
-    const isTimePickerVisible = false
 
-    this.props.save(time, 'time')
-    this.setState({ isTimePickerVisible })
+    save(time, 'time')
+    setIsTimePickerVisible(false)
   }
 
-  render() {
-    const { shouldShowSuggestion, suggestedTemperature, value } = this.state
-    const { time } = this.props.data
+  const { time } = data
 
-    const inputStyle =
-      shouldShowSuggestion && value === null
-        ? { color: Colors.grey }
-        : { color: Colors.greyDark }
-    const outOfRangeWarning = isTemperatureOutOfRange(value)
-    let temperatureToShow = null
+  const inputStyle = { color: Colors.greyDark }
+  const outOfRangeWarning = getTemperatureOutOfRangeMessage(temperature)
 
-    if (value) {
-      temperatureToShow = value
-    } else if (shouldShowSuggestion) {
-      temperatureToShow = suggestedTemperature
-    }
-
-    return (
-      <React.Fragment>
-        <Segment>
-          <AppText style={styles.title}>{labels.temperature.explainer}</AppText>
-          <View style={styles.container}>
-            <AppTextInput
-              value={temperatureToShow === null ? '' : temperatureToShow}
-              onChangeText={this.onChangeTemperature}
-              onEndEditing={this.setTemperature}
-              keyboardType="numeric"
-              maxLength={5}
-              style={inputStyle}
-              testID="temperatureInput"
-              underlineColorAndroid="transparent"
-            />
-            <AppText>°C</AppText>
-          </View>
-          {outOfRangeWarning !== null && (
-            <View style={styles.hintContainer}>
-              <AppText style={styles.hint}>{outOfRangeWarning}</AppText>
-            </View>
-          )}
-        </Segment>
-        <Segment>
-          <AppText style={styles.title}>{labels.time}</AppText>
+  return (
+    <React.Fragment>
+      <Segment>
+        <AppText style={styles.title}>{labels.temperature.explainer}</AppText>
+        <View style={styles.container}>
           <AppTextInput
-            onFocus={this.onShowTimePicker}
-            testID="timeInput"
-            value={time}
+            value={temperature}
+            onChangeText={onChangeTemperature}
+            onEndEditing={() => save(temperature, 'value')}
+            keyboardType="numeric"
+            maxLength={5}
+            style={inputStyle}
+            testID="temperatureInput"
+            underlineColorAndroid="transparent"
           />
-          <DateTimePicker
-            isVisible={this.state.isTimePickerVisible}
-            mode="time"
-            onConfirm={this.setTime}
-            onCancel={this.onCancelTimePicker}
-            display={Platform.OS === 'ios' ? 'spinner' : 'default'}
-          />
-        </Segment>
-      </React.Fragment>
-    )
-  }
+          <AppText>°C</AppText>
+        </View>
+        {!!outOfRangeWarning && (
+          <View style={styles.hintContainer}>
+            <AppText style={styles.hint}>{outOfRangeWarning}</AppText>
+          </View>
+        )}
+      </Segment>
+      <Segment>
+        <AppText style={styles.title}>{labels.time}</AppText>
+        <AppTextInput
+          onFocus={onShowTimePicker}
+          testID="timeInput"
+          value={time}
+        />
+        <DateTimePicker
+          isVisible={isTimePickerVisible}
+          mode="time"
+          onConfirm={setTime}
+          onCancel={() => setIsTimePickerVisible(false)}
+          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+        />
+      </Segment>
+    </React.Fragment>
+  )
 }
 
 const styles = StyleSheet.create({
@@ -153,6 +116,12 @@ const styles = StyleSheet.create({
   },
 })
 
+Temperature.propTypes = {
+  data: PropTypes.object.isRequired,
+  date: PropTypes.string.isRequired,
+  save: PropTypes.func.isRequired,
+}
+
 const mapStateToProps = (state) => {
   return {
     date: getDate(state),

components/helpers/cycle-day.js

@@ -35,22 +35,17 @@ export const getPreviousTemperature = (date) => {
   return formatTemperature(previousTemperature)
 }
 
-export const isTemperatureOutOfRange = (temperature) => {
+export const getTemperatureOutOfRangeMessage = (temperature) => {
   if (!temperature) return null
 
   const value = Number(temperature)
-  const range = { min: TEMP_MIN, max: TEMP_MAX }
   const scale = scaleObservable.value
 
-  let warningMsg = null
-
-  if (value < range.min || value > range.max) {
-    warningMsg = labels.temperature.outOfAbsoluteRangeWarning
-  } else if (value < scale.min || value > scale.max) {
-    warningMsg = labels.temperature.outOfRangeWarning
-  }
-
-  return warningMsg
+  return value < TEMP_MIN || value > TEMP_MAX
+    ? labels.temperature.outOfAbsoluteRangeWarning
+    : value < scale.min || value > scale.max
+    ? labels.temperature.outOfRangeWarning
+    : ''
 }
 
 export const blank = {