side menu

ReactNativeClient/index.android.js

@@ -1,90 +1,3 @@
 import { main } from 'src/main.js';
 
 main();
-
-
-// let defaultState = {
-// 	'myButtonLabel': 'click',
-// 	'counter': 0,
-// }
-
-// function shallowcopy(a) {
-// 	return Object.assign({}, a);
-// }
-
-// let store = createStore(reducer, defaultState);
-
-// function reducer(state, action) {
-// 	switch (action.type) {
-
-// 		case 'SET_BUTTON_NAME':
-
-// 			var state = shallowcopy(state);
-// 			state.myButtonLabel = action.name;
-// 			return state;
-
-// 		case 'INC_COUNTER':
-
-// 			var state = shallowcopy(state);
-// 			state.counter++;
-// 			return state;
-
-// 	}
-
-// 	return state;
-// }
-
-// class MyInput extends Component {
-
-// 	render() {
-// 		return <TextInput onChangeText={this.props.onChangeText} />
-// 	}
-
-// }
-
-// const mapStateToInputProps = function(state) {
-// 	return {}
-// }
-
-// const mapDispatchToInputProps = function(dispatch) {
-// 	return {
-// 		onChangeText(text) {
-// 			dispatch({
-// 				type: 'SET_BUTTON_NAME',
-// 				name: text
-// 			});
-// 		}
-// 	}
-// }
-
-// const MyConnectionInput = connect(
-// 	mapStateToInputProps,
-// 	mapDispatchToInputProps
-// )(MyInput)
-
-// class App extends Component {
-
-// 	render() {
-// 		return (
-// 			<Provider store={store}>
-// 				<View>
-// 					<MyConnectionInput />
-// 					<LoginButton />
-// 				</View>
-// 			</Provider>
-// 		)
-// 	}
-
-// }
-
-// let api = new WebApi('http://192.168.1.2');
-// let sessionService = new SessionService(api);
-// sessionService.login('laurent@cozic.net', '12345678', clientId).then((session) => {
-// 	console.info('GOT DATA:');
-// 	console.info(session);
-// }).catch(function(error) {
-// 	console.warn('GOT ERROR:');
-// 	console.warn(error);
-// })
-
-// AppRegistry.registerComponent('AwesomeProject', () => App);

ReactNativeClient/src/components/screen-header.js

@@ -28,6 +28,10 @@ class ScreenHeaderComponent extends Component {
 		return this.props.navState.routeName != 'Folders';
 	}
 
+	sideMenuButton_press = () => {
+		this.props.dispatch({ type: 'SIDE_MENU_TOGGLE' });
+	}
+
 	backButton_press = () => {
 		this.props.dispatch({ type: 'Navigation/BACK' });
 	}
@@ -90,6 +94,7 @@ class ScreenHeaderComponent extends Component {
 
 		return (
 			<View style={{ flexDirection: 'row', padding: 10, backgroundColor: '#ffffff', alignItems: 'center' }} >
+				<Button title="☰" onPress={this.sideMenuButton_press} />
 				<Button disabled={!this.showBackButton()} title="<" onPress={this.backButton_press}></Button>
 				<Text style={{ flex:1, marginLeft: 10 }} >{title}</Text>
 			    <Menu onSelect={this.menu_select}>

ReactNativeClient/src/components/side-menu-content.js

@@ -0,0 +1,79 @@
+import { connect } from 'react-redux'
+import { Button } from 'react-native';
+import { Log } from 'src/log.js';
+
+const React = require('react');
+const {
+	Dimensions,
+	StyleSheet,
+	ScrollView,
+	View,
+	Image,
+	Text,
+} = require('react-native');
+const { Component } = React;
+
+const window = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+	menu: {
+		flex: 1,
+		backgroundColor: 'white',
+		padding: 20,
+	},
+	name: {
+		position: 'absolute',
+		left: 70,
+		top: 20,
+	},
+	item: {
+		fontSize: 14,
+		fontWeight: '300',
+		paddingTop: 5,
+	},
+	button: {
+		flex: 1,
+		textAlign: 'left',
+	}
+});
+
+class SideMenuContentComponent extends Component {
+
+	folder_press(folder) {
+		this.props.dispatch({
+			type: 'Navigation/NAVIGATE',
+			routeName: 'Notes',
+			folderId: folder.id,
+		});
+
+		this.props.dispatch({
+			type: 'SIDE_MENU_CLOSE',
+		});
+	}
+
+	render() {
+		let buttons = [];
+		for (let i = 0; i < this.props.folders.length; i++) {
+			let f = this.props.folders[i];
+			buttons.push(
+				<Button style={styles.button} title={f.title} onPress={() => { this.folder_press(f) }} key={f.id} />
+			);
+		}
+
+		return (
+			<ScrollView scrollsToTop={false} style={styles.menu}>
+				{ buttons }
+			</ScrollView>
+		);
+	}
+};
+
+const SideMenuContent = connect(
+	(state) => {
+		return {
+			folders: state.folders,
+		};
+	}
+)(SideMenuContentComponent)
+
+export { SideMenuContent };

ReactNativeClient/src/components/side-menu.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux'
+import { Log } from 'src/log.js';
+import SideMenu_ from 'react-native-side-menu';
+
+class SideMenuComponent extends SideMenu_ {};
+
+const SideMenu = connect(
+	(state) => {
+		return {
+			isOpen: state.showSideMenu,
+		};
+	}
+)(SideMenuComponent)
+
+export { SideMenu };

ReactNativeClient/src/menu.js

@@ -1,101 +0,0 @@
-const React = require('react');
-const {
-  Dimensions,
-  StyleSheet,
-  ScrollView,
-  View,
-  Image,
-  Text,
-} = require('react-native');
-const { Component } = React;
-
-const window = Dimensions.get('window');
-const uri = 'https://pickaface.net/gallery/avatar/Opi51c74d0125fd4.png';
-
-const styles = StyleSheet.create({
-  menu: {
-    flex: 1,
-    width: window.width,
-    height: window.height,
-    backgroundColor: 'gray',
-    padding: 20,
-  },
-  avatarContainer: {
-    marginBottom: 20,
-    marginTop: 20,
-  },
-  avatar: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    flex: 1,
-  },
-  name: {
-    position: 'absolute',
-    left: 70,
-    top: 20,
-  },
-  item: {
-    fontSize: 14,
-    fontWeight: '300',
-    paddingTop: 5,
-  },
-});
-
-module.exports = class Menu extends Component {
-  static propTypes = {
-    onItemSelected: React.PropTypes.func.isRequired,
-  };
-
-  render() {
-    return (
-      <ScrollView scrollsToTop={false} style={styles.menu}>
-        <View style={styles.avatarContainer}>
-          <Image
-            style={styles.avatar}
-            source={{ uri, }}/>
-          <Text style={styles.name}>Your name</Text>
-        </View>
-
-        <Text
-          onPress={() => this.props.onItemSelected('About')}
-          style={styles.item}>
-          About
-        </Text>
-
-        <Text
-          onPress={() => this.props.onItemSelected('Contacts')}
-          style={styles.item}>
-          Contacts
-        </Text>
-
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>Contacts</Text>
-        <Text style={styles.item}>ContactsLL</Text>
-      </ScrollView>
-    );
-  }
-};

ReactNativeClient/src/root.js

@@ -21,6 +21,9 @@ import { LoginScreen } from 'src/components/screens/login.js'
 import { Setting } from 'src/models/setting.js'
 import { Synchronizer } from 'src/synchronizer.js'
 import { MenuContext } from 'react-native-popup-menu';
+//import SideMenu from 'react-native-side-menu';
+import { SideMenu } from 'src/components/side-menu.js';
+import { SideMenuContent } from 'src/components/side-menu-content.js';
 
 let defaultState = {
 	notes: [],
@@ -29,6 +32,7 @@ let defaultState = {
 	selectedFolderId: null,
 	listMode: 'view',
 	user: { email: 'laurent@cozic.net', session: null },
+	showSideMenu: false,
 };
 
 const reducer = (state = defaultState, action) => {
@@ -144,6 +148,24 @@ const reducer = (state = defaultState, action) => {
 			newState.nav = Object.assign({}, state.nav);
 			break;
 
+		case 'SIDE_MENU_TOGGLE':
+
+			newState = Object.assign({}, state);
+			newState.showSideMenu = !newState.showSideMenu
+			break;
+
+		case 'SIDE_MENU_OPEN':
+
+			newState = Object.assign({}, state);
+			newState.showSideMenu = true
+			break;
+
+		case 'SIDE_MENU_CLOSE':
+
+			newState = Object.assign({}, state);
+			newState.showSideMenu = false
+			break;
+
 	}
 
 	return newState;
@@ -159,11 +181,6 @@ const AppNavigator = StackNavigator({
 	Login: {screen: LoginScreen},
 });
 
-const SideMenu = require('react-native-side-menu');
-
-import Menu from 'src/menu.js';
-
-
 class AppComponent extends React.Component {
 
 	componentDidMount() {
@@ -211,11 +228,19 @@ class AppComponent extends React.Component {
 		});
 	}
 
+	sideMenu_change = (isOpen) => {
+		// Make sure showSideMenu property of state is updated
+		// when the menu is open/closed.
+		this.props.dispatch({
+			type: isOpen ? 'SIDE_MENU_OPEN' : 'SIDE_MENU_CLOSE',
+		});
+	}
+
 	render() {
-		const menu = <Menu/>;
+		const sideMenuContent = <SideMenuContent/>;
 
 		return (
-			<SideMenu menu={menu}>
+			<SideMenu menu={sideMenuContent} onChange={this.sideMenu_change}>
 				<MenuContext style={{ flex: 1 }}>
 					<AppNavigator navigation={addNavigationHelpers({
 						dispatch: this.props.dispatch,