From 86f26e3814041b0036e24997fa3ff1b87136de13 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Sun, 19 Aug 2018 15:02:01 +0200
Subject: [PATCH] Position footer and fix navigating to cycle day view
---
app.js | 27 +++++++++++++++-------
components/cycle-day/cycle-day-overview.js | 6 ++---
components/header.js | 2 +-
components/home.js | 3 +--
components/menu.js | 6 +++++
styles/index.js | 3 ++-
6 files changed, 32 insertions(+), 15 deletions(-)
diff --git a/app.js b/app.js
index 58b22ae1..ec6f3087 100644
--- a/app.js
+++ b/app.js
@@ -23,16 +23,24 @@ export default class App extends Component {
}
}
- navigate(pageName) {
- this.setState({currentPage: pageName})
+ navigate(pageName, props) {
+ this.setState({currentPage: pageName, currentProps: props})
}
render() {
return (
- <View>
- <Header title={this.state.currentPage}/>
- <CurrentPage page={this.state.currentPage} />
- <Menu navigate={this.navigate.bind(this)}/>
+ <View style={{height: '100%', justifyContent: 'space-between' }}>
+ <View>
+ {this.state.currentPage != 'CycleDay' && <Header title={this.state.currentPage}/>}
+ <View>
+ <CurrentPage
+ page={this.state.currentPage}
+ navigate={this.navigate.bind(this)}
+ props={this.state.currentProps}
+ />
+ </View>
+ </View>
+ <Menu navigate={this.navigate.bind(this)} />
</View>
)
}
@@ -40,10 +48,13 @@ export default class App extends Component {
class CurrentPage extends Component {
render () {
- console.log('urrentpage render')
const page = {
Home, Calendar, CycleDay, SymptomView, Chart, Settings, Stats
}[this.props.page]
- return React.createElement(page)
+ const props = this.props.props || {}
+ return React.createElement(page, {
+ navigate: this.props.navigate,
+ ...props
+ })
}
}
\ No newline at end of file
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 0dfa7697..0076aa20 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -27,7 +27,7 @@ export default class CycleDayOverView extends Component {
constructor(props) {
super(props)
this.state = {
- cycleDay: props.navigation.state.params.cycleDay
+ cycleDay: props.cycleDay
}
}
@@ -40,7 +40,7 @@ export default class CycleDayOverView extends Component {
}
navigate(symptom) {
- this.props.navigation.navigate('SymptomView', {
+ this.props.navigate('SymptomView', {
symptom,
cycleDay: this.state.cycleDay
})
@@ -53,7 +53,7 @@ export default class CycleDayOverView extends Component {
return (
<ScrollView>
<Header
- cycleDayOverView={true}
+ isCycleDayOverView={true}
cycleDayNumber={cycleDayNumber}
date={cycleDay.date}
/>
diff --git a/components/header.js b/components/header.js
index 1fd285eb..5863e43f 100644
--- a/components/header.js
+++ b/components/header.js
@@ -10,7 +10,7 @@ import { formatDateForViewHeader } from '../components/cycle-day/labels/format'
export default class Header extends Component {
render() {
return (
- this.props.cycleDayOverView ?
+ this.props.isCycleDayOverView ?
<View style={[styles.header, styles.headerCycleDay]}>
<Icon
name='arrow-left-drop-circle'
diff --git a/components/home.js b/components/home.js
index 3ada0424..2962492d 100644
--- a/components/home.js
+++ b/components/home.js
@@ -6,7 +6,6 @@ import {
ScrollView
} from 'react-native'
import { LocalDate } from 'js-joda'
-import Header from './header'
import styles from '../styles/index'
import cycleModule from '../lib/cycle'
import { getOrCreateCycleDay, bleedingDaysSortedByDate, fillWithDummyData, deleteAll } from '../db'
@@ -42,7 +41,7 @@ export default class Home extends Component {
passTodayToDayView() {
const todayDateString = LocalDate.now().toString()
const cycleDay = getOrCreateCycleDay(todayDateString)
- const navigate = this.props.navigation.navigate
+ const navigate = this.props.navigate
navigate('CycleDay', { cycleDay })
}
diff --git a/components/menu.js b/components/menu.js
index ea95b1f2..9631c022 100644
--- a/components/menu.js
+++ b/components/menu.js
@@ -13,6 +13,12 @@ export default class Menu extends Component {
placeActionButtons()
:
<View style={styles.menu}>
+ <Text
+ style={styles.dateHeader}
+ onPress={() => this.props.navigate('Home')}
+ >
+ {'Home'}
+ </Text>
<Text
style={styles.dateHeader}
onPress={() => this.props.navigate('Calendar')}
diff --git a/styles/index.js b/styles/index.js
index 5fb3d5db..8943efa0 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -106,7 +106,8 @@ export default StyleSheet.create({
paddingVertical: 18,
paddingHorizontal: 15,
alignItems: 'center',
- justifyContent: 'center'
+ justifyContent: 'space-evenly',
+ flexDirection: 'row',
},
headerCycleDay: {
flexDirection: 'row',
--
GitLab