symptom-box.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { StyleSheet, View, TouchableOpacity } from 'react-native'
import { scale } from 'react-native-size-matters'

import AppText from '../common/app-text'
import DripIcon from '../../assets/drip-icons'
import SymptomEditView from './symptom-edit-view'

import { connect } from 'react-redux'
import { getDate } from '../../slices/date'
import { isDateInFuture } from '../helpers/cycle-day'

import { Colors, Sizes, Spacing } from '../../styles'
import { headerTitles as symptomTitles } from '../../i18n/en/labels'

class SymptomBox extends Component {
  static propTypes = {
    date: PropTypes.string.isRequired,
    isSymptomEdited: PropTypes.bool,
    symptom: PropTypes.string.isRequired,
    symptomData: PropTypes.object,
    symptomDataToDisplay: PropTypes.string,
    updateCycleDayData: PropTypes.func.isRequired,
  }

  static defaultProps = {
    isSymptomEdited: false,
  }

  constructor(props) {
    super(props)

    this.state = {
      isSymptomEdited: props.isSymptomEdited,
    }
  }

  onFinishEditing = () => {
    const { date, updateCycleDayData } = this.props

    updateCycleDayData(date)
    this.setState({ isSymptomEdited: false })
  }

  onEditSymptom = () => {
    this.setState({ isSymptomEdited: true })
  }

  render() {
    const { date, symptom, symptomData, symptomDataToDisplay } = this.props
    const { isSymptomEdited } = this.state
    const isSymptomDisabled = isDateInFuture(date) && symptom !== 'note'
    const isExcluded = symptomData !== null ? symptomData.exclude : false

    const iconColor = isSymptomDisabled ? Colors.greyLight : Colors.grey
    const iconName = `drip-icon-${symptom}`
    const symptomNameStyle = [
      styles.symptomName,
      isSymptomDisabled && styles.symptomNameDisabled,
      isExcluded && styles.symptomNameExcluded,
    ]
    const textStyle = [
      styles.text,
      isSymptomDisabled && styles.textDisabled,
      isExcluded && styles.textExcluded,
    ]

    return (
      <React.Fragment>
        {isSymptomEdited && (
          <SymptomEditView
            symptom={symptom}
            symptomData={symptomData}
            onClose={this.onFinishEditing}
          />
        )}

        <TouchableOpacity
          disabled={isSymptomDisabled}
          onPress={this.onEditSymptom}
          style={styles.container}
          testID={iconName}
        >
          <DripIcon
            color={iconColor}
            isActive={!isSymptomDisabled}
            name={iconName}
            size={Sizes.icon}
          />
          <View style={styles.textContainer}>
            <AppText style={symptomNameStyle}>
              {symptomTitles[symptom].toLowerCase()}
            </AppText>
            {symptomDataToDisplay && (
              <AppText style={textStyle} numberOfLines={4}>
                {symptomDataToDisplay}
              </AppText>
            )}
          </View>
        </TouchableOpacity>
      </React.Fragment>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: scale(10),
    elevation: 4,
    flexDirection: 'row',
    height: scale(110),
    marginBottom: Spacing.base,
    paddingHorizontal: Spacing.small,
    paddingVertical: Spacing.base,
    width: Spacing.symptomTileWidth,
  },
  symptomName: {
    paddingTop: Sizes.tiny,
    color: Colors.purple,
    fontSize: Sizes.base,
    lineHeight: Sizes.base,
  },
  symptomNameDisabled: {
    color: Colors.grey,
  },
  symptomNameExcluded: {
    color: Colors.greyDark,
  },
  textContainer: {
    flexDirection: 'column',
    justifyContent: 'center',
    marginLeft: Spacing.tiny,
    maxWidth: Spacing.textWidth,
  },
  text: {
    fontSize: Sizes.small,
    fontStyle: 'italic',
  },
  textDisabled: {
    color: Colors.greyLight,
  },
  textExcluded: {
    color: Colors.grey,
  },
})

const mapStateToProps = (state) => {
  return {
    date: getDate(state),
  }
}

export default connect(mapStateToProps, null)(SymptomBox)