Lint rule react prop types addition

components/cycle-day/symptoms/desire.js

@@ -21,7 +21,7 @@ class Desire extends Component {
     const symptom = 'desire'
     const { cycleDay } = props
 
-    const defaultSymptomData = { value: '' }
+    const defaultSymptomData = { value: null }
 
     const symptomData =
       cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData

components/cycle-day/symptoms/info-symptom.js

@@ -1,22 +1,28 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { ScrollView, View, TouchableOpacity } from 'react-native'
 import Icon from 'react-native-vector-icons/SimpleLineIcons'
 import AppText from '../../app-text'
 import labels from '../../../i18n/en/symptom-info.js'
 import styles, {iconStyles} from '../../../styles/index'
 
-export default function InfoSymptom(props) {
+export default function InfoSymptom({ close, symptom }) {
   return (
     <View style={styles.infoPopUpWrapper}>
       <View style={styles.dimmed}></View>
       <View style={styles.infoPopUp} testID="symptomInfoPopup">
-        <TouchableOpacity onPress={props.close} style={styles.infoSymptomClose}>
+        <TouchableOpacity onPress={close} style={styles.infoSymptomClose}>
           <Icon name='close' {...iconStyles.infoPopUpClose}/>
         </TouchableOpacity>
         <ScrollView style={styles.infoSymptomText}>
-          <AppText>{labels[props.symptom].text}</AppText>
+          <AppText>{labels[symptom].text}</AppText>
         </ScrollView>
       </View>
     </View>
   )
 }
+
+InfoSymptom.propTypes = {
+  close: PropTypes.func.isRequired,
+  symptom: PropTypes.string.isRequired
+}

components/cycle-day/symptoms/note.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { TextInput } from 'react-native'
 
 import SymptomSection from './symptom-section'
@@ -9,6 +10,11 @@ import SymptomView from './symptom-view'
 import { saveSymptom } from '../../../db'
 
 class Note extends Component {
+  static propTypes = {
+    cycleDay: PropTypes.object.isRequired,
+    date: PropTypes.string.isRequired
+  }
+
   constructor(props) {
     super(props)
     const symptom = 'note'
@@ -41,16 +47,12 @@ class Note extends Component {
         values={this.state}
         date={this.props.date}
       >
-        <SymptomSection
-          explainer={noteExplainer}
-        >
+        <SymptomSection explainer={noteExplainer} >
           <TextInput
             autoFocus={true}
             multiline={true}
             placeholder={sharedLabels.enter}
-            onChangeText={(val) => {
-              this.setState({ value: val })
-            }}
+            onChangeText={(val) => { this.setState({ value: val })}}
             value={this.state.value}
             testID='noteInput'
           />

components/cycle-day/symptoms/symptom-section.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
-import AppText, { SymptomSectionHeader } from '../../app-text'
+import AppText from '../../app-text'
 import styles from '../../../styles'
 
 export default class SymptomSection extends Component {
@@ -16,7 +16,7 @@ export default class SymptomSection extends Component {
     return (
       <View style={[placeHeadingInline, styles.symptomSection]}>
         { p.header &&
-          <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+          <AppText style={styles.symptomViewHeading}>{p.header}</AppText>
         }
         <View
           flexDirection={p.inline ? 'row' : null}

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

@@ -77,15 +77,16 @@ class SymptomView extends Component {
 
   render() {
     const { symptom, date, goBack } = this.props
+    const { shouldShowDelete } = this.state
+    const handleDelete = shouldShowDelete ? this.showConfirmationAlert : null
+
     return (
       <View style={{flex: 1}}>
         <Header
           title={headerTitles[symptom]}
           subtitle={formatDate(date)}
           handleBack={goBack}
-          handleDelete={
-            this.state.shouldShowDelete && this.showConfirmationAlert
-          }
+          handleDelete={handleDelete}
         />
         <View flex={1}>
           <ScrollView style={styles.page}>

components/cycle-day/symptoms/temperature-input.js

@@ -102,3 +102,7 @@ const OutOfRangeWarning = ({ temperature }) => {
 
   return <AppText style={styles.hint}>{warningMsg}</AppText>
 }
+
+OutOfRangeWarning.propTypes = {
+  temperature: PropTypes.string.isRequired
+}