Step 3.6: Add Messages to Navigation

client/src/navigation.js

@@ -9,6 +9,7 @@ import { Text, View, StyleSheet } from 'react-native';
 import { connect } from 'react-redux';
 
 import Groups from './screens/groups.screen';
+import Messages from './screens/messages.screen';
 
 const styles = StyleSheet.create({
   container: {
@@ -45,6 +46,9 @@ const MainScreenNavigator = TabNavigator({
 
 const AppNavigator = StackNavigator({
   Main: { screen: MainScreenNavigator },
+  Messages: { screen: Messages },
+}, {
+  mode: 'modal',
 });
 
 // reducer initialization code

client/src/screens/groups.screen.js

@@ -37,11 +37,18 @@ const fakeData = () => _.times(100, i => ({
 }));
 
 class Group extends Component {
+  constructor(props) {
+    super(props);
+
+    this.goToMessages = this.props.goToMessages.bind(this, this.props.group);
+  }
+
   render() {
     const { id, name } = this.props.group;
     return (
       <TouchableHighlight
         key={id}
+        onPress={this.goToMessages}
       >
         <View style={styles.groupContainer}>
           <Text style={styles.groupName}>{`${name}`}</Text>
@@ -52,6 +59,7 @@ class Group extends Component {
 }
 
 Group.propTypes = {
+  goToMessages: PropTypes.func.isRequired,
   group: PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
@@ -63,9 +71,19 @@ class Groups extends Component {
     title: 'Chats',
   };
 
+  constructor(props) {
+    super(props);
+    this.goToMessages = this.goToMessages.bind(this);
+  }
+
   keyExtractor = item => item.id.toString();
 
-  renderItem = ({ item }) => <Group group={item} />;
+  goToMessages(group) {
+    const { navigate } = this.props.navigation;
+    navigate('Messages', { groupId: group.id, title: group.name });
+  }
+
+  renderItem = ({ item }) => <Group group={item} goToMessages={this.goToMessages} />;
 
   render() {
     // render list of groups for user
@@ -80,5 +98,10 @@ class Groups extends Component {
     );
   }
 }
+Groups.propTypes = {
+  navigation: PropTypes.shape({
+    navigate: PropTypes.func,
+  }),
+};
 
 export default Groups;