Chore: make function components 6
This commit is contained in:
Maria Zadnepryanets
@@ -1,4 +1,4 @@
|
|||||||
import React, { Component } from 'react'
|
import React, { useState } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { Dimensions, ScrollView, StyleSheet, View } from 'react-native'
|
import { Dimensions, ScrollView, StyleSheet, View } from 'react-native'
|
||||||
|
|
||||||
@@ -20,238 +20,199 @@ import { shared as sharedLabels } from '../../i18n/en/labels'
|
|||||||
import info from '../../i18n/en/symptom-info'
|
import info from '../../i18n/en/symptom-info'
|
||||||
import { Colors, Containers, Sizes, Spacing } from '../../styles'
|
import { Colors, Containers, Sizes, Spacing } from '../../styles'
|
||||||
|
|
||||||
class SymptomEditView extends Component {
|
const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
|
||||||
static propTypes = {
|
const symptomConfig = symtomPage[symptom]
|
||||||
date: PropTypes.string.isRequired,
|
const [data, setData] = useState(symptomData ? symptomData : blank[symptom])
|
||||||
onClose: PropTypes.func.isRequired,
|
const [shouldShowInfo, setShouldShowInfo] = useState(false)
|
||||||
symptom: PropTypes.string.isRequired,
|
const getParsedData = () => JSON.parse(JSON.stringify(data))
|
||||||
symptomData: PropTypes.object,
|
const onPressLearnMore = () => setShouldShowInfo(!shouldShowInfo)
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
const onEditNote = (note) => {
|
||||||
super(props)
|
const parsedData = getParsedData()
|
||||||
|
|
||||||
const { symptomData, symptom } = this.props
|
|
||||||
const data = symptomData ? symptomData : blank[symptom]
|
|
||||||
|
|
||||||
const symptomConfig = symtomPage[symptom]
|
|
||||||
const shouldShowExclude = shouldShow(symptomConfig.excludeText)
|
|
||||||
const shouldShowNote = shouldShow(symptomConfig.note)
|
|
||||||
const shouldBoxGroup = shouldShow(symptomConfig.selectBoxGroups)
|
|
||||||
const shouldTabGroup = shouldShow(symptomConfig.selectTabGroups)
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
data,
|
|
||||||
shouldShowExclude,
|
|
||||||
shouldShowInfo: false,
|
|
||||||
shouldShowNote,
|
|
||||||
shouldBoxGroup,
|
|
||||||
shouldTabGroup,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate() {
|
|
||||||
this.saveData()
|
|
||||||
}
|
|
||||||
|
|
||||||
getParsedData = () => JSON.parse(JSON.stringify(this.state.data))
|
|
||||||
|
|
||||||
onEditNote = (note) => {
|
|
||||||
const data = this.getParsedData()
|
|
||||||
const { symptom } = this.props
|
|
||||||
|
|
||||||
if (symptom === 'note') {
|
if (symptom === 'note') {
|
||||||
Object.assign(data, { value: note })
|
Object.assign(parsedData, { value: note })
|
||||||
} else {
|
} else {
|
||||||
data['note'] = note
|
parsedData['note'] = note
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({ data })
|
setData(parsedData)
|
||||||
}
|
}
|
||||||
|
|
||||||
onExcludeToggle = () => {
|
const onExcludeToggle = () => {
|
||||||
const data = this.getParsedData()
|
const parsedData = getParsedData()
|
||||||
Object.assign(data, { exclude: !data.exclude })
|
|
||||||
|
|
||||||
this.setState({ data })
|
Object.assign(parsedData, { exclude: !parsedData.exclude })
|
||||||
|
|
||||||
|
setData(parsedData)
|
||||||
}
|
}
|
||||||
|
|
||||||
onPressLearnMore = () => {
|
const onRemove = () => {
|
||||||
this.setState({ shouldShowInfo: !this.state.shouldShowInfo })
|
save[symptom](data, date, true)
|
||||||
}
|
|
||||||
|
|
||||||
onRemove = () => {
|
|
||||||
this.saveData(true)
|
|
||||||
showToast(sharedLabels.dataDeleted)
|
showToast(sharedLabels.dataDeleted)
|
||||||
this.props.onClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
onSave = () => {
|
|
||||||
this.saveData()
|
|
||||||
showToast(sharedLabels.dataSaved)
|
|
||||||
this.props.onClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
onSaveTemperature = (value, field) => {
|
|
||||||
const data = this.getParsedData()
|
|
||||||
const dataToSave =
|
|
||||||
field === 'value' ? { [field]: Number(value) } : { [field]: value }
|
|
||||||
Object.assign(data, { ...dataToSave })
|
|
||||||
|
|
||||||
this.setState({ data })
|
|
||||||
}
|
|
||||||
|
|
||||||
onSelectBox = (key) => {
|
|
||||||
const data = this.getParsedData()
|
|
||||||
if (key === 'other') {
|
|
||||||
Object.assign(data, {
|
|
||||||
note: null,
|
|
||||||
[key]: !this.state.data[key],
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
Object.assign(data, { [key]: !this.state.data[key] })
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({ data })
|
|
||||||
}
|
|
||||||
|
|
||||||
onSelectBoxNote = (value) => {
|
|
||||||
const data = this.getParsedData()
|
|
||||||
Object.assign(data, { note: value !== '' ? value : null })
|
|
||||||
|
|
||||||
this.setState({ data })
|
|
||||||
}
|
|
||||||
|
|
||||||
onSelectTab = (group, value) => {
|
|
||||||
const data = this.getParsedData()
|
|
||||||
Object.assign(data, { [group.key]: value })
|
|
||||||
|
|
||||||
this.setState({ data })
|
|
||||||
}
|
|
||||||
|
|
||||||
saveData = (shouldDeleteData) => {
|
|
||||||
const { date, symptom } = this.props
|
|
||||||
const { data } = this.state
|
|
||||||
save[symptom](data, date, shouldDeleteData)
|
|
||||||
}
|
|
||||||
|
|
||||||
closeView = () => {
|
|
||||||
const { onClose } = this.props
|
|
||||||
|
|
||||||
showToast(sharedLabels.dataSaved)
|
|
||||||
onClose()
|
onClose()
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
const onSave = () => {
|
||||||
const { symptom } = this.props
|
const hasDataChanged = () => {
|
||||||
const {
|
const initialData = symptomData ? symptomData : blank[symptom]
|
||||||
data,
|
|
||||||
shouldShowExclude,
|
|
||||||
shouldShowInfo,
|
|
||||||
shouldShowNote,
|
|
||||||
shouldBoxGroup,
|
|
||||||
shouldTabGroup,
|
|
||||||
} = this.state
|
|
||||||
const iconName = shouldShowInfo ? 'chevron-up' : 'chevron-down'
|
|
||||||
const noteText = symptom === 'note' ? data.value : data.note
|
|
||||||
|
|
||||||
return (
|
return JSON.stringify(data) !== JSON.stringify(initialData)
|
||||||
<AppModal onClose={this.closeView}>
|
}
|
||||||
<ScrollView
|
|
||||||
contentContainerStyle={styles.modalContainer}
|
|
||||||
style={styles.modalWindow}
|
|
||||||
>
|
|
||||||
<View style={styles.headerContainer}>
|
|
||||||
<CloseIcon onClose={this.closeView} />
|
|
||||||
</View>
|
|
||||||
{symptom === 'temperature' && (
|
|
||||||
<Temperature
|
|
||||||
date={this.props.date}
|
|
||||||
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 (
|
if (hasDataChanged()) {
|
||||||
<Segment key={group.key} style={styles.segmentBorder}>
|
save[symptom](data, date, false)
|
||||||
<AppText style={styles.title}>{group.title}</AppText>
|
showToast(sharedLabels.dataSaved)
|
||||||
<SelectBoxGroup
|
}
|
||||||
labels={group.options}
|
|
||||||
onSelect={(value) => this.onSelectBox(value)}
|
onClose()
|
||||||
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}>
|
|
||||||
<AppText>{symtomPage[symptom].note}</AppText>
|
|
||||||
<AppTextInput
|
|
||||||
multiline={true}
|
|
||||||
numberOfLines={3}
|
|
||||||
onChangeText={this.onEditNote}
|
|
||||||
placeholder={sharedLabels.enter}
|
|
||||||
testID="noteInput"
|
|
||||||
value={noteText !== null ? noteText : ''}
|
|
||||||
/>
|
|
||||||
</Segment>
|
|
||||||
)}
|
|
||||||
<View style={styles.buttonsContainer}>
|
|
||||||
<Button iconName={iconName} isSmall onPress={this.onPressLearnMore}>
|
|
||||||
{sharedLabels.learnMore}
|
|
||||||
</Button>
|
|
||||||
<Button isSmall onPress={this.onRemove}>
|
|
||||||
{sharedLabels.remove}
|
|
||||||
</Button>
|
|
||||||
<Button isCTA isSmall onPress={this.onSave}>
|
|
||||||
{sharedLabels.save}
|
|
||||||
</Button>
|
|
||||||
</View>
|
|
||||||
{shouldShowInfo && (
|
|
||||||
<Segment last style={styles.segmentBorder}>
|
|
||||||
<AppText>{info[symptom].text}</AppText>
|
|
||||||
</Segment>
|
|
||||||
)}
|
|
||||||
</ScrollView>
|
|
||||||
</AppModal>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onSaveTemperature = (value, field) => {
|
||||||
|
const parsedData = getParsedData()
|
||||||
|
const dataToSave =
|
||||||
|
field === 'value' ? { [field]: Number(value) } : { [field]: value }
|
||||||
|
|
||||||
|
Object.assign(parsedData, { ...dataToSave })
|
||||||
|
|
||||||
|
setData(parsedData)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSelectBox = (key) => {
|
||||||
|
const parsedData = getParsedData()
|
||||||
|
if (key === 'other') {
|
||||||
|
Object.assign(parsedData, {
|
||||||
|
note: null,
|
||||||
|
[key]: !data[key],
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
Object.assign(parsedData, { [key]: !data[key] })
|
||||||
|
}
|
||||||
|
|
||||||
|
setData(parsedData)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSelectBoxNote = (value) => {
|
||||||
|
const parsedData = getParsedData()
|
||||||
|
|
||||||
|
Object.assign(parsedData, { note: value !== '' ? value : null })
|
||||||
|
|
||||||
|
setData(parsedData)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSelectTab = (group, value) => {
|
||||||
|
const parsedData = getParsedData()
|
||||||
|
|
||||||
|
Object.assign(parsedData, { [group.key]: value })
|
||||||
|
|
||||||
|
setData(parsedData)
|
||||||
|
}
|
||||||
|
const iconName = shouldShowInfo ? 'chevron-up' : 'chevron-down'
|
||||||
|
const noteText = symptom === 'note' ? data.value : data.note
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AppModal onClose={onSave}>
|
||||||
|
<ScrollView
|
||||||
|
contentContainerStyle={styles.modalContainer}
|
||||||
|
style={styles.modalWindow}
|
||||||
|
>
|
||||||
|
<View style={styles.headerContainer}>
|
||||||
|
<CloseIcon onClose={onSave} />
|
||||||
|
</View>
|
||||||
|
{symptom === 'temperature' && (
|
||||||
|
<Temperature
|
||||||
|
date={date}
|
||||||
|
data={data}
|
||||||
|
save={(value, field) => onSaveTemperature(value, field)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{shouldShow(symptomConfig.selectTabGroups) &&
|
||||||
|
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) => onSelectTab(group, value)}
|
||||||
|
/>
|
||||||
|
</Segment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
{shouldShow(symptomConfig.selectBoxGroups) &&
|
||||||
|
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) => onSelectBox(value)}
|
||||||
|
optionsState={data}
|
||||||
|
/>
|
||||||
|
{isOtherSelected && (
|
||||||
|
<AppTextInput
|
||||||
|
multiline={true}
|
||||||
|
placeholder={sharedLabels.enter}
|
||||||
|
value={data.note}
|
||||||
|
onChangeText={(value) => onSelectBoxNote(value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Segment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
{shouldShow(symptomConfig.excludeText) && (
|
||||||
|
<Segment style={styles.segmentBorder}>
|
||||||
|
<AppSwitch
|
||||||
|
onToggle={onExcludeToggle}
|
||||||
|
text={symtomPage[symptom].excludeText}
|
||||||
|
value={data.exclude}
|
||||||
|
/>
|
||||||
|
</Segment>
|
||||||
|
)}
|
||||||
|
{shouldShow(symptomConfig.note) && (
|
||||||
|
<Segment style={styles.segmentBorder}>
|
||||||
|
<AppText>{symtomPage[symptom].note}</AppText>
|
||||||
|
<AppTextInput
|
||||||
|
multiline={true}
|
||||||
|
numberOfLines={3}
|
||||||
|
onChangeText={onEditNote}
|
||||||
|
placeholder={sharedLabels.enter}
|
||||||
|
testID="noteInput"
|
||||||
|
value={noteText !== null ? noteText : ''}
|
||||||
|
/>
|
||||||
|
</Segment>
|
||||||
|
)}
|
||||||
|
<View style={styles.buttonsContainer}>
|
||||||
|
<Button iconName={iconName} isSmall onPress={onPressLearnMore}>
|
||||||
|
{sharedLabels.learnMore}
|
||||||
|
</Button>
|
||||||
|
<Button isSmall onPress={onRemove}>
|
||||||
|
{sharedLabels.remove}
|
||||||
|
</Button>
|
||||||
|
<Button isCTA isSmall onPress={onSave}>
|
||||||
|
{sharedLabels.save}
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
{shouldShowInfo && (
|
||||||
|
<Segment last style={styles.segmentBorder}>
|
||||||
|
<AppText>{info[symptom].text}</AppText>
|
||||||
|
</Segment>
|
||||||
|
)}
|
||||||
|
</ScrollView>
|
||||||
|
</AppModal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
SymptomEditView.propTypes = {
|
||||||
|
date: PropTypes.string.isRequired,
|
||||||
|
onClose: PropTypes.func.isRequired,
|
||||||
|
symptom: PropTypes.string.isRequired,
|
||||||
|
symptomData: PropTypes.object,
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
|
|||||||
Reference in New Issue
Block a user