diff --git a/app.js b/app.js index fc21bf2..cccd782 100644 --- a/app.js +++ b/app.js @@ -2,9 +2,13 @@ import { createStackNavigator } from 'react-navigation' import Home from './home' import TemperatureList from './list' import Datepicker from './datepicker' +import DayView from './day-view' +import Bleeding from './bleeding' export default createStackNavigator({ home: { screen: Home }, temperatureList: { screen: TemperatureList }, - datepicker: { screen: Datepicker } + datepicker: { screen: Datepicker }, + dayView: { screen: DayView }, + bleeding: { screen: Bleeding } }) \ No newline at end of file diff --git a/bleeding.js b/bleeding.js new file mode 100644 index 0000000..f7b68fb --- /dev/null +++ b/bleeding.js @@ -0,0 +1,78 @@ +import React, { Component } from 'react' +import { + View, + Button, + Text, + Picker, + Switch +} from 'react-native' +import styles from './styles' +import { saveBleeding } from './db' +import { formatDateForViewHeader } from './format' +import { bleeding as labels } from './labels' +import getCycleDay from './get-cycle-day' + +export default class Bleeding extends Component { + constructor(props) { + super(props) + const cycleDay = props.navigation.state.params.cycleDay + this.state = { + cycleDay, + currentValue: Number((cycleDay.bleeding && cycleDay.bleeding.value) || 0).toString(), + exclude: cycleDay.bleeding ? cycleDay.bleeding.exclude : false + } + } + + // TODO display cycle day + render() { + const navigate = this.props.navigation.navigate + const day = this.state.cycleDay + return ( + + {formatDateForViewHeader(day.date)} + Cycle day {getCycleDay()} + Bleeding + { + this.setState({ currentValue: itemValue }) + }}> + + + + + + Exclude + { + this.setState({ exclude: val }) + }} + value={this.state.exclude} /> + + + + + ) + } +} \ No newline at end of file diff --git a/datepicker.js b/datepicker.js index 2aee26d..df300ba 100644 --- a/datepicker.js +++ b/datepicker.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import { View, Button, DatePickerAndroid } from 'react-native' -import moment from 'moment' import * as styles from './styles' +import { getOrCreateCycleDay } from './db' export default class DatePickView extends Component { constructor(props) { @@ -15,12 +15,10 @@ export default class DatePickView extends Component { date: new Date() }) if (result.action !== DatePickerAndroid.dismissedAction) { + const date = new Date(result.year, result.month, result.day) + const cycleDay = getOrCreateCycleDay(date) const navigate = this.props.navigation.navigate - // continue here and actually make that view - navigate( - 'dayView', - { date: moment(new Date(result.year, result.month, result.day)) } - ) + navigate('dayView', { cycleDay }) } } diff --git a/day-view.js b/day-view.js new file mode 100644 index 0000000..5f3e307 --- /dev/null +++ b/day-view.js @@ -0,0 +1,43 @@ +import React, { Component } from 'react' +import { + View, + Button, + Text +} from 'react-native' +import styles from './styles' +import { formatDateForViewHeader } from './format' +import { bleeding as labels} from './labels' +import getCycleDay from './get-cycle-day' + +export default class DayView extends Component { + constructor(props) { + super(props) + this.state = { + cycleDay: props.navigation.state.params.cycleDay + } + } + + render() { + const navigate = this.props.navigation.navigate + const day = this.state.cycleDay + const bleedingValue = day.bleeding && day.bleeding.value + let bleedingLabel + if (typeof bleedingValue === 'number') { + bleedingLabel = `Bleeding: ${labels[bleedingValue]}` + } else { + bleedingLabel = '' + } + + return ( + + {formatDateForViewHeader(day.date)} + Cycle day {getCycleDay()} + {bleedingLabel} + + + ) + } +} \ No newline at end of file diff --git a/db.js b/db.js index a91c098..9d74ac5 100644 --- a/db.js +++ b/db.js @@ -3,6 +3,7 @@ import { v4 as uuid } from 'uuid' let db let cycleDaysSortedbyTempValueView = [] +let cycleDaysSortedbyDate = [] const TemperatureSchema = { name: 'Temperature', @@ -12,6 +13,14 @@ const TemperatureSchema = { } } +const BleedingSchema = { + name: 'Bleeding', + properties: { + value: 'int', + exclude: 'bool' + } +} + const CycleDaySchema = { name: 'CycleDay', primaryKey: 'key', @@ -21,6 +30,10 @@ const CycleDaySchema = { temperature: { type: 'Temperature', optional: true + }, + bleeding: { + type: 'Bleeding', + optional: true } } } @@ -29,17 +42,19 @@ async function openDatabase() { db = await realm.open({ schema: [ CycleDaySchema, - TemperatureSchema + TemperatureSchema, + BleedingSchema ], // we only want this in dev mode deleteRealmIfMigrationNeeded: true }) // just for testing purposes, the highest temperature will be topmost // because I was too layz to make a scroll view - cycleDaysSortedbyTempValueView = db.objects('CycleDay').sorted('temperature.value', true) + cycleDaysSortedbyTempValueView = db.objects('CycleDay').filtered('temperature != null').sorted('temperature.value', true) + cycleDaysSortedbyDate = db.objects('CycleDay').sorted('date', true) } -async function saveTemperature(date, temperature) { +function saveTemperature(date, temperature) { db.write(() => { const doc = { key: uuid(), @@ -50,8 +65,29 @@ async function saveTemperature(date, temperature) { }) } +function saveBleeding(cycleDay, bleeding) { + db.write(() => { + cycleDay.bleeding = bleeding + }) +} + +function getOrCreateCycleDay(date) { + let result = Array.from(cycleDaysSortedbyDate.filtered('date = $0', date))[0] + if (!result) { + db.write(() => { + result = db.create('CycleDay', { + key: uuid(), + date + }) + }) + } + return result +} + export { cycleDaysSortedbyTempValueView, openDatabase, - saveTemperature + saveTemperature, + saveBleeding, + getOrCreateCycleDay } \ No newline at end of file diff --git a/format.js b/format.js new file mode 100644 index 0000000..d8250ed --- /dev/null +++ b/format.js @@ -0,0 +1,5 @@ +import moment from "moment" + +export function formatDateForViewHeader(date) { + return moment(date).format('MMMM Do YYYY') +} \ No newline at end of file diff --git a/get-cycle-day.js b/get-cycle-day.js new file mode 100644 index 0000000..4930e24 --- /dev/null +++ b/get-cycle-day.js @@ -0,0 +1 @@ +export default () => 6 \ No newline at end of file diff --git a/home.js b/home.js index 4c331f4..cda4db4 100644 --- a/home.js +++ b/home.js @@ -5,6 +5,7 @@ import { Text } from 'react-native' import styles from './styles' +import getCycleDay from './get-cycle-day' export default class Home extends Component { constructor(props) { @@ -15,7 +16,7 @@ export default class Home extends Component { const navigate = this.props.navigation.navigate return ( - Welcome! Today is day 6 of your current cycle + Welcome! Today is day {getCycleDay()} of your current cycle