Ability to create direct conversations

api/API.js

@@ -229,6 +229,58 @@ class API {
         return users;
     }
 
+    static createDirect = async (userId) => { 
+        const userToken = await AsyncStorage.getItem('userToken');
+        let success = false;
+
+        await fetch(gqlApiUri,
+            {
+                method: 'POST',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                },
+                body: '{"query": "mutation { createDirect ( userToken: \\\"' + userToken + '\\\", secondUserId: ' + userId + ') }", "variables": null}',
+            })
+            .then((response) => response.json())
+            .then((responseJson) => {
+                if (responseJson && responseJson.data && responseJson.data.createDirect) {
+                    success = true;
+                }
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+
+        return success;
+    }
+
+    static removeDirect = async (userId) => { 
+        const userToken = await AsyncStorage.getItem('userToken');
+        let success = false;
+
+        await fetch(gqlApiUri,
+            {
+                method: 'POST',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                },
+                body: '{"query": "mutation { removeDirect ( userToken: \\\"' + userToken + '\\\", secondUserId: ' + userId + ') }", "variables": null}',
+            })
+            .then((response) => response.json())
+            .then((responseJson) => {
+                if (responseJson && responseJson.data && responseJson.data.removeDirect) {
+                    success = true;
+                }
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+
+        return success;
+    }
+
 }
 
 export default API

navigation/AppNavigator.js

@@ -7,6 +7,8 @@ import LoginScreen from '../screens/login/LoginScreen'
 import SignupScreen from '../screens/login/SignupScreen'
 import HomeScreen from '../screens/home/HomeScreen'
 import SideMenuScreen from '../screens/home/SideMenuScreen'
+import DirectsScreen from '../screens/channels/DirectsScreen'
+import ChannelsScreen from '../screens/channels/ChannelsScreen'
 
 
 const AuthNavigatorStack = createStackNavigator(
@@ -30,6 +32,8 @@ const AppSwitchNavigator = createSwitchNavigator(
         CheckAuth: CheckAuthScreen,
         Home: HomeDrawerNavigator,
         Auth: AuthNavigatorStack,
+        Directs: DirectsScreen,
+        Channels: ChannelsScreen,
     },
     {
         initialRouteName: 'CheckAuth',

navigation/AppNavigator.web.js

@@ -8,6 +8,8 @@ import LoginScreen from '../screens/login/LoginScreen'
 import SignupScreen from '../screens/login/SignupScreen'
 import HomeScreen from '../screens/home/HomeScreen'
 import SideMenuScreen from '../screens/home/SideMenuScreen'
+import DirectsScreen from '../screens/channels/DirectsScreen'
+import ChannelsScreen from '../screens/channels/ChannelsScreen'
 
 const AuthNavigatorStack = createStackNavigator(
   {
@@ -30,7 +32,9 @@ const AppSwitchNavigator = createSwitchNavigator(
     CheckAuth: CheckAuthScreen,
     Home: HomeDrawerNavigator,
     Auth: AuthNavigatorStack,
-  },
+    Directs: DirectsScreen,
+    Channels: ChannelsScreen,
+},
   {
     initialRouteName: 'CheckAuth',
   }

screens/channels/ChannelsScreen.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { View, Button, AsyncStorage, Text, TextInput } from 'react-native';
+import GlobalStyles from '../../GlobalStyles'
+import API from '../../api/API';
+
+class ChannelsScreen extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      email: '',
+      name: '', 
+      password: '',
+      errorMessage: '',
+    }
+  };
+
+  onSignup() {
+    const { email, name, password } = this.state;
+
+    API.signup(email, name, password,
+      (userToken) => {
+        AsyncStorage.setItem('userToken', userToken).then(() => {
+          this.props.navigation.navigate('Home');
+        });
+      },
+      (error) => {
+        this.setState({ errorMessage: error });
+      })
+  }
+
+
+  render() {
+    return (
+      <View style={GlobalStyles.container}>
+        <Text style={GlobalStyles.error}>{this.state.errorMessage}</Text>
+        <TextInput
+          value={this.state.email}
+          onChangeText={(email) => this.setState({ email })}
+          placeholder={'Email'}
+          style={GlobalStyles.input}
+        />
+        <TextInput
+          value={this.state.name}
+          onChangeText={(name) => this.setState({ name })}
+          placeholder={'Name'}
+          style={GlobalStyles.input}
+        />
+        <TextInput
+          value={this.state.password}
+          onChangeText={(password) => this.setState({ password })}
+          placeholder={'Password'}
+          secureTextEntry={true}
+          style={GlobalStyles.input}
+        />
+
+        <View style={GlobalStyles.row}>
+          <Button
+            title={'Signup'}
+            style={GlobalStyles.input}
+            onPress={this.onSignup.bind(this)}
+          />
+          <Text>  </Text>
+          <Button
+            title={'Cancel'}
+            style={GlobalStyles.input}
+            onPress={() => this.props.navigation.navigate("Login")}
+          />
+        </View>
+
+      </View>
+    );
+  }
+}
+
+export default ChannelsScreen

screens/channels/DirectsScreen.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { SafeAreaView } from 'react-navigation';
+import GlobalStyles from '../../GlobalStyles'
+import API from '../../api/API';
+import { ListItem } from 'react-native-elements';
+
+class DirectsScreen extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      users: [],
+    }
+  };
+
+  _onSelectUser(user) {
+    API.createDirect(user.id).then(success => {
+      if (success) {
+        this.props.navigation.navigate('Home', { directUserId: user.id, directUserFullName: user.fullName, channelId: null, channelName: null });
+      }
+    });
+  }
+
+  componentDidMount() {
+    API.fetchAllUsers().then(users => {
+      API.getDirectsForCurrentUser().then(directUsers => {
+        let filteredUsers = users.filter(user => {
+          return !directUsers.find(directUser => directUser.id == user.id)
+        });
+        this.setState({ users: filteredUsers });
+      });
+    });
+  }
+
+  render() {
+    const selectedStyle = {};
+    return (
+      <SafeAreaView style={GlobalStyles.safeArea}>
+        <ListItem
+          title="Add Directs"
+          bottomDivider
+        />
+        {this.state.users.map((user, key) =>
+          <ListItem
+            key={'add-user-menu-' + key}
+            onPress={() => this._onSelectUser(user)}
+            title={user.fullName}
+            // leftAvatar={{ icon: { name: 'user', type: 'font-awesome' }, containerStyle: { marginRight: 1 } }}
+            chevron
+            bottomDivider
+          />)}
+      </SafeAreaView>
+    );
+  }
+}
+
+export default DirectsScreen

screens/home/SideMenuScreen.js

@@ -70,6 +70,14 @@ class SideMenuScreen extends React.Component {
     this.props.navigation.navigate('Home', { directUserId: user.id, directUserFullName: user.fullName, channelId: null, channelName: null })
   }
 
+  _onSelectDirects() {
+    this.props.navigation.navigate('Directs');
+  }
+
+  _onSelectChannels() {
+    this.props.navigation.navigate('Channels');
+  }
+
   _onSelectChannel(channel) {
     this.state.hasUnreadMessageForChannel[channel.id] = false;
     this.state.selectedChannelId = channel.id;
@@ -85,6 +93,8 @@ class SideMenuScreen extends React.Component {
       <SafeAreaView style={GlobalStyles.safeArea}>
           <ListItem
             title="Directs"
+            onPress={() => this._onSelectDirects()}
+            chevron
             bottomDivider
           />
         {this.state.directUsers.map((user, key) =>
@@ -99,6 +109,8 @@ class SideMenuScreen extends React.Component {
           />)}
           <ListItem
             title="Channels"
+            onPress={() => this._onSelectChannels()}
+            chevron
             bottomDivider
           />
         {this.state.channels.map((channel, key) =>