From eba5837350794694e04c49878402b55a1117e2c1 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sun, 15 Jul 2018 22:36:06 +0200 Subject: [PATCH] Simplify markup and move symptom screens to symptom dir --- components/bleeding.js | 102 ------------------ components/cycle-day-overview.js | 83 -------------- components/cycle-day/action-buttons.js | 46 ++++++++ .../{cycle-day.js => cycle-day/index.js} | 21 ++-- components/cycle-day/symptoms/bleeding.js | 76 +++++++++++++ components/cycle-day/symptoms/temperature.js | 80 ++++++++++++++ components/home.js | 46 ++++---- components/temperature.js | 102 ------------------ styles/index.js | 83 ++++++-------- 9 files changed, 268 insertions(+), 371 deletions(-) delete mode 100644 components/bleeding.js delete mode 100644 components/cycle-day-overview.js create mode 100644 components/cycle-day/action-buttons.js rename components/{cycle-day.js => cycle-day/index.js} (70%) create mode 100644 components/cycle-day/symptoms/bleeding.js create mode 100644 components/cycle-day/symptoms/temperature.js delete mode 100644 components/temperature.js diff --git a/components/bleeding.js b/components/bleeding.js deleted file mode 100644 index 0472c3c..0000000 --- a/components/bleeding.js +++ /dev/null @@ -1,102 +0,0 @@ -import React, { Component } from 'react' -import { - View, - Button, - Text, - Switch -} from 'react-native' -import RadioForm from 'react-native-simple-radio-button' -import styles from '../styles/index' -import { saveBleeding } from '../db' -import { bleeding as labels } from '../labels/labels' - -export default class Bleeding extends Component { - constructor(props) { - super(props) - this.cycleDay = props.cycleDay - this.showView = props.showView - let bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value - if (! (typeof bleedingValue === 'number') ){ - bleedingValue = -1 - } - this.state = { - currentValue: bleedingValue, - exclude: this.cycleDay.bleeding ? this.cycleDay.bleeding.exclude : false - } - } - - render() { - const bleedingRadioProps = [ - {label: labels[0], value: 0 }, - {label: labels[1], value: 1 }, - {label: labels[2], value: 2 }, - {label: labels[3], value: 3 }, - ] - return ( - - - - - Bleeding - - - { - this.setState({currentValue: itemValue}) - }} - /> - - - - - Exclude - - - { - this.setState({exclude: val}) - }} - value={this.state.exclude} - /> - - - - - - - - - - - - - - - - ) - } -} \ No newline at end of file diff --git a/components/cycle-day-overview.js b/components/cycle-day-overview.js deleted file mode 100644 index cc780da..0000000 --- a/components/cycle-day-overview.js +++ /dev/null @@ -1,83 +0,0 @@ -import React, { Component } from 'react' -import { - View, - Button, - Text -} from 'react-native' -import styles from '../styles/index' -import { bleeding as labels} from '../labels/labels' -import cycleDayModule from '../lib/get-cycle-day-number' -import { bleedingDaysSortedByDate } from '../db' - -const getCycleDayNumber = cycleDayModule() - -export default class DayView extends Component { - constructor(props) { - super(props) - this.cycleDay = props.cycleDay - this.showView = props.showView - this.state = { - cycleDayNumber: getCycleDayNumber(this.cycleDay.date), - } - - this.setStateWithCurrentCycleDayNumber = (function (DayViewComponent) { - return function () { - DayViewComponent.setState({ - cycleDayNumber: getCycleDayNumber(DayViewComponent.cycleDay.date) - }) - } - })(this) - - bleedingDaysSortedByDate.addListener(this.setStateWithCurrentCycleDayNumber) - } - - componentWillUnmount() { - bleedingDaysSortedByDate.removeListener(this.setStateWithCurrentCycleDayNumber) - } - - render() { - const bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value - let bleedingLabel - if (typeof bleedingValue === 'number') { - bleedingLabel = `${labels[bleedingValue]}` - if (this.cycleDay.bleeding.exclude) bleedingLabel = "( " + bleedingLabel + " )" - } else { - bleedingLabel = 'edit' - } - const temperatureValue = this.cycleDay.temperature && this.cycleDay.temperature.value - let temperatureLabel - if (typeof temperatureValue === 'number') { - temperatureLabel = `${temperatureValue} °C` - if (this.cycleDay.temperature.exclude) temperatureLabel = "( " + temperatureLabel + " )" - } else { - temperatureLabel = 'edit' - } - - return ( - - - - Bleeding - - - - - - - - Temperature - - - - - - - ) - } -} \ No newline at end of file diff --git a/components/cycle-day/action-buttons.js b/components/cycle-day/action-buttons.js new file mode 100644 index 0000000..0008552 --- /dev/null +++ b/components/cycle-day/action-buttons.js @@ -0,0 +1,46 @@ +import React from 'react' +import { + View, + Button, +} from 'react-native' +import { saveSymptom } from '../../db' + +export default function (showView) { + return function ({ symptom, cycleDay, saveAction, saveDisabled}) { + const buttons = [ + { + title: 'Cancel', + action: () => showView('dayView') + }, + { + title: 'Delete', + action: () => { + saveSymptom(symptom, cycleDay) + showView('dayView') + } + }, { + title: 'Save', + action: () => { + saveAction() + showView('dayView') + }, + disabled: saveDisabled + } + ] + + return buttons.map(({ title, action, disabledCondition }, i) => { + const style = { flex: 1, marginHorizontal: 10 } + if (i === 0) style.marginLeft = 0 + if (i === buttons.length - 1) style.marginRight = 0 + return ( + + + + ) + }) + } +} \ No newline at end of file diff --git a/components/cycle-day.js b/components/cycle-day/index.js similarity index 70% rename from components/cycle-day.js rename to components/cycle-day/index.js index 7d46dea..bcd8465 100644 --- a/components/cycle-day.js +++ b/components/cycle-day/index.js @@ -3,12 +3,13 @@ import { View, Text } from 'react-native' -import cycleDayModule from '../lib/get-cycle-day-number' +import cycleDayModule from '../../lib/get-cycle-day-number' import DayView from './cycle-day-overview' -import BleedingEditView from './bleeding' -import TemperatureEditView from './temperature' -import { formatDateForViewHeader } from '../labels/format' -import styles from '../styles/index' +import BleedingEditView from './symptoms/bleeding' +import TemperatureEditView from './symptoms/temperature' +import { formatDateForViewHeader } from './labels/format' +import styles from '../../styles' +import actionButtonModule from './action-buttons' const getCycleDayNumber = cycleDayModule() @@ -24,12 +25,14 @@ export default class Day extends Component { this.showView = view => { this.setState({visibleComponent: view}) } + + this.makeActionButtons = actionButtonModule(this.showView) } render() { const cycleDayNumber = getCycleDayNumber(this.cycleDay.date) return ( - + {formatDateForViewHeader(this.cycleDay.date)} @@ -38,11 +41,11 @@ export default class Day extends Component { { cycleDayNumber && Cycle day {cycleDayNumber} } - + { { dayView: , - bleedingEditView: , - temperatureEditView: + bleedingEditView: , + temperatureEditView: }[this.state.visibleComponent] } diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js new file mode 100644 index 0000000..1e637f0 --- /dev/null +++ b/components/cycle-day/symptoms/bleeding.js @@ -0,0 +1,76 @@ +import React, { Component } from 'react' +import { + View, + Text, + Switch +} from 'react-native' +import RadioForm from 'react-native-simple-radio-button' +import styles from '../../../styles' +import { saveSymptom } from '../../../db' +import { bleeding as labels } from '../labels/labels' + +export default class Bleeding extends Component { + constructor(props) { + super(props) + this.cycleDay = props.cycleDay + this.makeActionButtons = props.makeActionButtons + let bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value + if (!(typeof bleedingValue === 'number')) { + bleedingValue = -1 + } + this.state = { + currentValue: bleedingValue, + exclude: this.cycleDay.bleeding ? this.cycleDay.bleeding.exclude : false + } + } + + render() { + const bleedingRadioProps = [ + { label: labels[0], value: 0 }, + { label: labels[1], value: 1 }, + { label: labels[2], value: 2 }, + { label: labels[3], value: 3 }, + ] + return ( + + Bleeding + + { + this.setState({ currentValue: itemValue }) + }} + /> + + + Exclude + { + this.setState({ exclude: val }) + }} + value={this.state.exclude} + /> + + + {this.makeActionButtons( + { + symptom: 'bleeding', + cycleDay: this.cycleDay, + saveAction: () => { + saveSymptom('bleeding', this.cycleDay, { + value: this.state.currentValue, + exclude: this.state.exclude + }) + }, + saveDisabled: this.state.currentValue === -1 + } + )} + + + ) + } +} \ No newline at end of file diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js new file mode 100644 index 0000000..b9a3d5b --- /dev/null +++ b/components/cycle-day/symptoms/temperature.js @@ -0,0 +1,80 @@ +import React, { Component } from 'react' +import { + View, + Text, + TextInput, + Switch +} from 'react-native' + +import { getPreviousTemperature, saveSymptom } from '../../../db' +import styles from '../../../styles' +import { LocalTime, ChronoUnit } from 'js-joda' + +export default class Temp extends Component { + constructor(props) { + super(props) + this.cycleDay = props.cycleDay + this.makeActionButtons = props.makeActionButtons + let initialValue + + if (this.cycleDay.temperature) { + initialValue = this.cycleDay.temperature.value.toString() + this.time = this.cycleDay.temperature.time + } else { + const prevTemp = getPreviousTemperature(this.cycleDay) + initialValue = prevTemp ? prevTemp.toString() : '' + } + + this.state = { + currentValue: initialValue, + exclude: this.cycleDay.temperature ? this.cycleDay.temperature.exclude : false + } + } + + render() { + const cycleDay = this.cycleDay + return ( + + + Temperature (°C) + { + this.setState({ currentValue: val }) + }} + keyboardType='numeric' + value={this.state.currentValue} + /> + + + Exclude + { + this.setState({ exclude: val }) + }} + value={this.state.exclude} + /> + + + {this.makeActionButtons({ + symptom: 'temperature', + cycleDay: this.cycleDay, + saveAction: () => { + const dataToSave = { + value: Number(this.state.currentValue), + exclude: this.state.exclude + } + if (!cycleDay.temperature || cycleDay.temperature && !cycleDay.temperature.time) { + const now = LocalTime.now().truncatedTo(ChronoUnit.MINUTES).toString() + dataToSave.time = now + } + saveSymptom('temperature', cycleDay, dataToSave) + }, + saveDisabled: this.state.currentValue === '' + })} + + + ) + } +} diff --git a/components/home.js b/components/home.js index 1204f8e..0b00592 100644 --- a/components/home.js +++ b/components/home.js @@ -49,28 +49,30 @@ export default class Home extends Component { {this.state.welcomeText} - - - - - - - - - - + + + + + + + + + + + + ) diff --git a/components/temperature.js b/components/temperature.js deleted file mode 100644 index c6fccfc..0000000 --- a/components/temperature.js +++ /dev/null @@ -1,102 +0,0 @@ -import React, { Component } from 'react' -import { - View, - Text, - Button, - TextInput, - Switch -} from 'react-native' - -import { saveTemperature, getPreviousTemperature } from '../db' -import styles from '../styles/index' - -export default class Temp extends Component { - constructor(props) { - super(props) - this.cycleDay = props.cycleDay - this.showView = props.showView - let initialValue - - if(this.cycleDay.temperature) { - initialValue = this.cycleDay.temperature.value.toString() - } else { - const prevTemp = getPreviousTemperature(this.cycleDay) - initialValue = prevTemp ? prevTemp.toString() : '' - } - - this.state = { - currentValue: initialValue, - exclude: this.cycleDay.temperature ? this.cycleDay.temperature.exclude : false - } - } - - render() { - const cycleDay = this.cycleDay - return ( - - - - - Temperature (°C) - - - { - this.setState({currentValue: val}) - }} - keyboardType='numeric' - value = {this.state.currentValue} - /> - - - - - Exclude - - - { - this.setState({ exclude: val }) - }} - value = { this.state.exclude } - /> - - - - - - - - - - - - - - - - ) - } -} diff --git a/styles/index.js b/styles/index.js index 5eb9cc1..c01241f 100644 --- a/styles/index.js +++ b/styles/index.js @@ -14,21 +14,19 @@ export default StyleSheet.create({ dateHeader: { fontSize: 20, fontWeight: 'bold', - margin: 30, + margin: 15, color: 'white', textAlign: 'center', textAlignVertical: 'center' }, cycleDayNumber: { fontSize: 18, - margin: 20, + margin: 15, textAlign: 'center', textAlignVertical: 'center' }, symptomDayView: { fontSize: 20, - margin: 30, - textAlign: 'left', textAlignVertical: 'center' }, radioButton: { @@ -37,68 +35,47 @@ export default StyleSheet.create({ textAlign: 'center', textAlignVertical: 'center' }, - singleButtonView: { - flex: 1, - margin: 5 - }, - itemsInRowView: { - flex: 1, - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center' - }, - itemsInRowSeparatedView: { - flex: 1, - flexDirection: 'row', - justifyContent: 'space-evenly', - alignItems: 'center' - }, symptomEditView: { - flex: 1, - flexDirection: 'column', justifyContent: 'space-between', - alignItems: 'flex-start' + marginHorizontal: 15 }, - symptomEditSplitSymptomsAndLastRowButtons: { - flex: 4, - flexDirection: 'column', - justifyContent: 'flex-start', - alignItems: 'flex-start' + symptomEditRow: { + justifyContent: 'space-between', + marginBottom: 10, }, - symptomEditListedSymptomView: { - flex: 1, - flexDirection: 'column', - justifyContent: 'flex-start', - alignItems: 'flex-start' - }, - cycleDayOuterView: { - flex: 1, - flexDirection: 'column', - justifyContent: 'space-around' + symptomViewRowInline: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 10, + alignItems: 'center', + height: 50 }, cycleDayDateView: { - flex: 2, justifyContent: 'center', backgroundColor: 'steelblue' }, cycleDayNumberView: { - flex: 1, justifyContent: 'center', - backgroundColor: 'skyblue' + backgroundColor: 'skyblue', + marginBottom: 15 }, - cycleDaySymptomsView: { - flex: 8, - justifyContent: 'center' + homeButtons: { + marginHorizontal: 15 }, - homeContainerView: { - flex: 0.5, - flexDirection: 'column', - justifyContent: 'space-around' + homeButton: { + marginBottom: 15 }, - homeButtonsView: { - flex: 3, - flexDirection: 'column', - justifyContent: 'space-around', - margin: 5 + temperatureTextInput: { + width: 80, + textAlign: 'center', + fontSize: 20 + }, + actionButtonRow: { + flexDirection: 'row', + justifyContent: 'space-evenly', + marginTop: 50 + }, + symptomEditButton: { + width: 130 } }) \ No newline at end of file