From a75498143413fcec417992af7bf50c4f07b26d00 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Sat, 18 Aug 2018 15:31:02 +0200
Subject: [PATCH] Start replacing navigator
---
app.js | 50 ++++++++++++++++++++++++++----------------
components/calendar.js | 7 +++---
components/home.js | 1 -
components/menu.js | 33 ++++++++++++++++++++++++++++
styles/index.js | 7 ++++++
5 files changed, 75 insertions(+), 23 deletions(-)
create mode 100644 components/menu.js
diff --git a/app.js b/app.js
index 0baccba9..58b22ae1 100644
--- a/app.js
+++ b/app.js
@@ -1,6 +1,8 @@
-import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import Header from './components/header'
+import Menu from './components/menu'
import Home from './components/home'
-
import Calendar from './components/calendar'
import CycleDay from './components/cycle-day/cycle-day-overview'
import SymptomView from './components/cycle-day/symptoms'
@@ -8,30 +10,40 @@ import Chart from './components/chart/chart'
import Settings from './components/settings'
import Stats from './components/stats'
-import styles, { primaryColor } from './styles'
-
// this is until react native fixes this bugg, see
// https://github.com/facebook/react-native/issues/18868#issuecomment-382671739
import { YellowBox } from 'react-native'
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
-const CycleDayStack = createStackNavigator({CycleDay, SymptomView}, {headerMode: 'none'})
+export default class App extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ currentPage: 'Home'
+ }
+ }
-const routes = {
- Home: createStackNavigator({Home, CycleDayStack}, {headerMode: 'none'}),
- Calendar: createStackNavigator({Calendar, CycleDayStack}, {headerMode: 'none'}),
- Chart: createStackNavigator({Chart, CycleDay}, {headerMode: 'none'}),
- Settings: { screen: Settings },
- Stats: { screen: Stats}
-}
+ navigate(pageName) {
+ this.setState({currentPage: pageName})
+ }
-const config = {
- labeled: true,
- shifting: false,
- tabBarOptions: {
- style: {backgroundColor: primaryColor },
- labelStyle: styles.menuLabel
+ render() {
+ return (
+ <View>
+ <Header title={this.state.currentPage}/>
+ <CurrentPage page={this.state.currentPage} />
+ <Menu navigate={this.navigate.bind(this)}/>
+ </View>
+ )
}
}
-export default createBottomTabNavigator(routes, config)
\ No newline at end of file
+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)
+ }
+}
\ No newline at end of file
diff --git a/components/calendar.js b/components/calendar.js
index dbff83c9..3159b0c1 100644
--- a/components/calendar.js
+++ b/components/calendar.js
@@ -1,7 +1,6 @@
import React, { Component } from 'react'
import { View } from 'react-native'
import { CalendarList } from 'react-native-calendars'
-import Header from './header'
import * as styles from '../styles'
import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
@@ -11,9 +10,11 @@ export default class CalendarView extends Component {
this.state = {
bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate)
}
+ console.log(Object.keys(this.state.bleedingDaysInCalFormat))
this.setStateWithCalFormattedDays = (function (CalendarComponent) {
- return function() {
+ return function(_, changes) {
+ if (Object.values(changes).every(x => x && !x.length)) return
CalendarComponent.setState({
bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate)
})
@@ -34,9 +35,9 @@ export default class CalendarView extends Component {
}
render() {
+ console.log('cal render')
return (
<View>
- <Header title='Calendar' />
<View style={styles.container}>
<CalendarList
onDayPress={this.passDateToDayView.bind(this)}
diff --git a/components/home.js b/components/home.js
index 9c8d14ff..3ada0424 100644
--- a/components/home.js
+++ b/components/home.js
@@ -49,7 +49,6 @@ export default class Home extends Component {
render() {
return (
<ScrollView>
- <Header title='Home'/>
<Text style={styles.welcome}>{this.state.welcomeText}</Text>
<View style={styles.homeButtons}>
<View style={styles.homeButton}>
diff --git a/components/menu.js b/components/menu.js
new file mode 100644
index 00000000..ea95b1f2
--- /dev/null
+++ b/components/menu.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import {
+ View,
+ Text
+} from 'react-native'
+import styles, { iconStyles } from '../styles'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+
+export default class Menu extends Component {
+ render() {
+ return (
+ this.props.symptomView ?
+ placeActionButtons()
+ :
+ <View style={styles.menu}>
+ <Text
+ style={styles.dateHeader}
+ onPress={() => this.props.navigate('Calendar')}
+ >
+ {'Calendar'}
+ </Text>
+ <Text
+ style={styles.dateHeader}
+ onPress={() => this.props.navigate('Settings')}
+ >
+ {'Settings'}
+ </Text>
+ </View >
+ )
+ }
+}
+
+function placeActionButtons() {}
\ No newline at end of file
diff --git a/styles/index.js b/styles/index.js
index f55ef4e7..a89d5ca3 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -82,6 +82,13 @@ export default StyleSheet.create({
alignItems: 'center',
justifyContent: 'center'
},
+ menu: {
+ backgroundColor: primaryColor,
+ paddingVertical: 18,
+ paddingHorizontal: 15,
+ alignItems: 'center',
+ justifyContent: 'center'
+ },
headerCycleDay: {
flexDirection: 'row',
justifyContent: 'space-between'
--
GitLab