Lint rule react prop types addition

components/cycle-day/SymptomBox.js

@@ -1,4 +1,5 @@
-import React, { Component } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { View, TouchableOpacity } from 'react-native'
 
 import AppText from '../app-text'
@@ -124,47 +125,50 @@ const l = {
   }
 }
 
-export default class SymptomBox extends Component {
-  getLabel = () => {
-    const { symptom, symptomData } = this.props
-    return symptomData && l[symptom](symptomData)
-  }
-
-  render() {
-    const { symptom, onPress, disabled } = this.props
-    const data = this.getLabel()
-    const iconName = `drip-icon-${symptom}`
-
-    const disabledStyle = disabled ? styles.symptomInFuture : null
-    const containerStyle = [
-      styles.symptomBox,
-      data && styles.symptomBoxActive,
-      disabledStyle
-    ]
-    const titleStyle = [
-      data && styles.symptomTextActive,
-      disabledStyle,
-      {fontSize: 15}
-    ]
-    const dataBoxStyle = [styles.symptomDataBox, disabledStyle]
-
-    return (
-      <TouchableOpacity onPress={onPress} disabled={disabled} testID={iconName}>
-        <View style={containerStyle}>
-          <Icon name={iconName} isActive={data} />
-          <AppText style={titleStyle} numberOfLines={1}>
-            {symptomTitles[symptom].toLowerCase()}
-          </AppText>
-        </View>
-        <View style={dataBoxStyle}>
-          <AppText style={styles.symptomDataText} numberOfLines={3}>
-            {data}
-          </AppText>
-        </View>
-      </TouchableOpacity>
-    )
-  }
+const getLabel = (symptom, symptomData) => {
+  return symptomData && l[symptom](symptomData)
 }
 
-const Icon = ({name, isActive}) =>
-  <DripIcon name={name} size={50} color={isActive ? 'white' : 'black'} />
+export default function SymptomBox(
+  { disabled, onPress, symptom, symptomData }) {
+
+  const data = getLabel(symptom, symptomData)
+  const iconName = `drip-icon-${symptom}`
+
+  const disabledStyle = disabled ? styles.symptomInFuture : null
+  const containerStyle = [
+    styles.symptomBox,
+    data && styles.symptomBoxActive,
+    disabledStyle
+  ]
+  const titleStyle = [
+    data && styles.symptomTextActive,
+    disabledStyle,
+    {fontSize: 15}
+  ]
+  const dataBoxStyle = [styles.symptomDataBox, disabledStyle]
+  const iconColor = data ? 'white' : 'black'
+
+  return (
+    <TouchableOpacity onPress={onPress} disabled={disabled} testID={iconName}>
+      <View style={containerStyle}>
+        <DripIcon name={iconName} size={50} color={iconColor} />
+        <AppText style={titleStyle} numberOfLines={1}>
+          {symptomTitles[symptom].toLowerCase()}
+        </AppText>
+      </View>
+      <View style={dataBoxStyle}>
+        <AppText style={styles.symptomDataText} numberOfLines={3}>
+          {data}
+        </AppText>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+SymptomBox.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+  onPress: PropTypes.func.isRequired,
+  symptom: PropTypes.string.isRequired,
+  symptomData: PropTypes.object
+}

components/cycle-day/select-box-group.js

@@ -1,34 +1,38 @@
-import React, { Component } from 'react'
-import {
-  View,
-  TouchableOpacity,
-} from 'react-native'
-import styles from '../../styles'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, TouchableOpacity } from 'react-native'
+
 import AppText from '../app-text'
 
-export default class SelectBoxGroup extends Component {
-  render() {
-    return (
-      <View style={styles.selectBoxSection}>
-        {Object.keys(this.props.labels).map(key => {
-          const style = [styles.selectBox]
-          const textStyle = []
-          if (this.props.optionsState[key]) {
-            style.push(styles.selectBoxActive)
-            textStyle.push(styles.selectBoxTextActive)
-          }
-          return (
-            <TouchableOpacity
-              onPress={() => this.props.onSelect(key)}
-              key={key}
-            >
-              <View style={style}>
-                <AppText style={textStyle}>{this.props.labels[key]}</AppText>
-              </View>
-            </TouchableOpacity>
-          )
-        })}
-      </View>
-    )
-  }
-}
+import styles from '../../styles'
+
+export default function SelectBoxGroup({ labels, onSelect, optionsState }) {
+  return (
+    <View style={styles.selectBoxSection}>
+      {Object.keys(labels).map(key => {
+        const style = [styles.selectBox]
+        const textStyle = []
+        if (optionsState[key]) {
+          style.push(styles.selectBoxActive)
+          textStyle.push(styles.selectBoxTextActive)
+        }
+        return (
+          <TouchableOpacity
+            onPress={() => onSelect(key)}
+            key={key}
+          >
+            <View style={style}>
+              <AppText style={textStyle}>{labels[key]}</AppText>
+            </View>
+          </TouchableOpacity>
+        )
+      })}
+    </View>
+  )
+}
+
+SelectBoxGroup.propTypes = {
+  labels: PropTypes.object.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  optionsState: PropTypes.object.isRequired
+}

components/cycle-day/select-tab-group.js

@@ -1,47 +1,50 @@
-import React, { Component } from 'react'
-import {
-  View,
-  TouchableOpacity,
-} from 'react-native'
-import styles from '../../styles'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, TouchableOpacity } from 'react-native'
+
 import AppText from '../app-text'
 
-export default class SelectTabGroup extends Component {
-  render() {
-    const { buttons, onSelect } = this.props
-    return (
-      <View style={styles.selectTabGroup}>
-        {
-          buttons.map(({ label, value }, i) => {
-            let firstOrLastStyle
-            if (i === buttons.length - 1) {
-              firstOrLastStyle = styles.selectTabLast
-            } else if (i === 0) {
-              firstOrLastStyle = styles.selectTabFirst
-            }
-            let activeStyle
-            const isActive = value === this.props.active
-            if (isActive) activeStyle = styles.selectTabActive
-            return (
-              <TouchableOpacity
-                onPress={() => onSelect(isActive ? null : value)}
-                key={i}
-                activeOpacity={1}
-              >
-                <View>
-                  <View style={[
-                    styles.selectTab,
-                    firstOrLastStyle,
-                    activeStyle
-                  ]}>
-                    <AppText style={activeStyle}>{label}</AppText>
-                  </View>
+import styles from '../../styles'
+
+export default function SelectTabGroup({ active, buttons, onSelect }) {
+  return (
+    <View style={styles.selectTabGroup}>
+      {
+        buttons.map(({ label, value }, i) => {
+          let firstOrLastStyle
+          if (i === buttons.length - 1) {
+            firstOrLastStyle = styles.selectTabLast
+          } else if (i === 0) {
+            firstOrLastStyle = styles.selectTabFirst
+          }
+          let activeStyle
+          const isActive = value === active
+          if (isActive) activeStyle = styles.selectTabActive
+          return (
+            <TouchableOpacity
+              onPress={() => onSelect(isActive ? null : value)}
+              key={i}
+              activeOpacity={1}
+            >
+              <View>
+                <View style={[
+                  styles.selectTab,
+                  firstOrLastStyle,
+                  activeStyle
+                ]}>
+                  <AppText style={activeStyle}>{label}</AppText>
                 </View>
-              </TouchableOpacity>
-            )
-          })
-        }
-      </View>
-    )
-  }
+              </View>
+            </TouchableOpacity>
+          )
+        })
+      }
+    </View>
+  )
+}
+
+SelectTabGroup.propTypes = {
+  active: PropTypes.number,
+  buttons: PropTypes.array.isRequired,
+  onSelect: PropTypes.func.isRequired
 }

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
+}