added chat methods

Hemant27031999 · Dec 17, 2019 · 332d1a3 · 332d1a3
1 parent 5f489d8
commit 332d1a3
Show file tree

Hide file tree

Showing 21 changed files with 565 additions and 81 deletions.
diff --git a/App.js b/App.js
@@ -1,11 +1,13 @@
-import React from 'react';
-import { View} from 'react-native';
+import React, { Component   } from 'react';
+import { View, TouchableOpacity, Image } from 'react-native';
 import SignIn from './app/components/SignIn';
 import Register from './app/components/Register';
 import ChatScreen from './app/components/MainScreen/ChatScreen';
+import AllUsers from './app/components/MainScreen/AllUsers';
+import FriendRequest from './app/components/MainScreen/FriendRequest';
 import {createAppContainer} from 'react-navigation';
-import {createDrawerNavigator} from 'react-navigation-drawer';
 import {createStackNavigator} from 'react-navigation-stack';
+import {createDrawerNavigator} from 'react-navigation-drawer';
 
 const initialState = {
       route: 'signin',
@@ -18,25 +20,91 @@ const initialState = {
     }
 
 
-  const MainNavigator = createStackNavigator({
-    Home: {
-      screen: SignIn,
-      navigationOptions: {
+    class NavigationDrawerStructure extends Component {
+      //Structure for the navigatin Drawer
+      toggleDrawer = () => {
+        //Props to open/close the drawer
+        this.props.navigationProps.toggleDrawer();
+      };
+      render() {
+        return (
+          <View style={{ flexDirection: 'row' }}>
+            <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
+              {/*Donute Button Image */}
+              <Image
+                source={require('./app/components/MainScreen/send.png')}
+                style={{ width: 25, height: 25, marginLeft: 5 }}
+              />
+            </TouchableOpacity>
+          </View>
+        );
+      }
+    }
+
+    const InternalNavigator = createStackNavigator({
+      ChatScreen: {
+        screen: ChatScreen,
+        navigationOptions: {
           header: null,
-        }
+        },
       },
-    Profile: {
-      screen: Register,
-      navigationOptions: {
+      AllUsers: {
+        screen: AllUsers,
+        navigationOptions: {
           header: null,
-        }},
-    ChatScreen: {
-      screen: ChatScreen,
-      navigationOptions: {
+        },
+      },
+      FriendRequest: {
+        screen: FriendRequest,
+        navigationOptions: {
           header: null,
-        }},
-  });
+        },
+      }
+    });
+
+
+    const DrawerNavigatorExample = createDrawerNavigator({
+      ChatScreen: {
+        screen: ChatScreen,
+        navigationOptions: {
+          drawerLabel: 'ChatScreen',
+        },
+      },
+      AllUsers: {
+        screen: AllUsers,
+        navigationOptions: {
+          drawerLabel: 'AllUsers',
+        },
+      },
+      FriendRequest: {
+        screen: FriendRequest,
+        navigationOptions: {
+          drawerLabel: 'FriendRequest',
+        },
+      }
+    });
 
+    const MainNavigator = createStackNavigator({
+      Home: {
+        screen: SignIn,
+        navigationOptions: {
+            header: null,
+            gesturesEnabled: false
+          }
+        },
+      Profile: {
+        screen: Register,
+        navigationOptions: {
+            header: null,
+            gesturesEnabled: false
+          }},
+      DrawerNavigatorExample: {
+        screen: DrawerNavigatorExample,
+        navigationOptions: {
+            header: null,
+            gesturesEnabled: false
+          }},
+    });
 
 const App = createAppContainer(MainNavigator);
 

diff --git a/app/components/MainScreen/AllUsers.js b/app/components/MainScreen/AllUsers.js
@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import { FlatList, Text, View, Image, TextInput, StyleSheet,TouchableHighlight,  } from "react-native";
+
+export default class AllUsers extends Component {
+
+  static navigationOptions =
+  {
+     title: 'AllUsers',
+  };
+
+  render() {
+    return (
+      <View style={{flex: 1, alignItems: 'center', paddingTop: 28, backgroundColor: '#bac4bc'}}>
+        <Text>Hello, All Users</Text>
+      </View>
+    );
+  }
+}
diff --git a/app/components/MainScreen/ChatScreen.js b/app/components/MainScreen/ChatScreen.js
@@ -1,7 +1,12 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import { FlatList, Text, View, Image, TextInput, StyleSheet,TouchableHighlight,  } from "react-native";
 import { Card } from "react-native-elements";
-import FriendsList from "./FriendsList"
+import { AppLoading } from 'expo';
+import SignIn from '../SignIn';
+import Register from '../Register';
+import FriendsList from './FriendsList'
+import Welcome from './Welcome'
+import {createAppContainer} from 'react-navigation';
 
 const data = [
   {
@@ -126,71 +131,144 @@ const messages = [
 ];
 
 export default class ChatScreen extends Component {
+
+  static navigationOptions =
+  {
+     title: 'ChatScreen',
+  };
+
+
+
   constructor(props) {
     super(props);
     this.state = {
-      name: 'Piyush',
+      name: 'Piyush',//this.props.navigation.getParam('data', "name").name,
       data: data,
-      messages: messages
+      messages: messages,
+			imageURL: this.props.navigation.getParam('data', "imageURL").imageurl,
+			friendslist: this.props.navigation.getParam('friends', "friendlist"),
+			email: this.props.navigation.getParam('data', "email").email,
+			friend: {
+				name: '',
+				email: '',
+				imageURL: '',
+				status: '',
+				msgDatabase: ''
+			},
+			msgingChat: [],
+			msg:'',
+			searchfield:'',
+			searchfriends:'',
+			generallist: [],
+			branch: 'welcome',
+			test:'',
+			rqstlist: [],
+			inMsgField: ''
     };
   }
 
+
+    loadChattingUser = (loadingData) => {
+
+  		this.setState({ 'msgingChat': [] });
+
+  		this.setState({friend: {
+  		        'name': loadingData.name,
+  		        'imageURL': loadingData.imageURL,
+  		        'email':loadingData.email,
+  		        'msgDatabase': loadingData.msgDatabase
+  		    }})
+
+  		var database=loadingData.msgDatabase;
+
+  		fetch('https://agile-headland-13060.herokuapp.com/msges',{
+  			method: 'post',
+  			headers: {'Content-Type':'application/json'},
+  			body:JSON.stringify({
+  				database:  database
+  			})
+  		})
+  			.then(response => response.json())
+  			.then(data => {
+  				if(data.length !== 0){
+  					this.setState({
+  						msgingChat: data,
+  						branch: 'chat'
+  					}, () => {
+  						// console.log("loadChattingUser");
+  						// console.log(this.state);
+  					});
+  				}
+  			})
+  		this.setState({ 'branch': 'chat' });
+  	}
+
+
   render() {
+
     return (
       <View style={{flex: 1, alignItems: 'center', paddingTop: 28, backgroundColor: '#bac4bc'}}>
+
       <FlatList
         horizontal
-        data={this.state.data}
-        style={{height: '7%'}}
+        data={this.state.friendslist}
+        style={{height: '15%'}}
         renderItem={({ item: rowData }) => {
           return (
+            <TouchableHighlight onPress={() => this.loadChattingUser(rowData)}>
             <View
               title={null}
-              image={{ uri: rowData.imageUrl }}
-              style={{width: 80, height: 85, padding: 10, borderTopLeftRadius:40, borderTopRightRadius:40, flex: 1, alignItems: 'center', marginHorizontal: 2, borderWidth: this.state.name === rowData.title ? 0 : 2, borderColor: '#000000', backgroundColor: this.state.name === rowData.title ? '#bac4bc' : '#75989C'}}
+              style={{width: 80, height: 85, padding: 10, borderTopLeftRadius:40, borderTopRightRadius:40, flex: 1, alignItems: 'center', marginHorizontal: 2, borderWidth: this.state.friend.name === rowData.name ? 0 : 2, borderColor: '#000000', backgroundColor: this.state.friend.name === rowData.name ? '#bac4bc' : '#75989C'}}
               >
               <Image
                 style={{width: 50, height: 50, borderRadius: 30}}
-                source={{uri: rowData.imageUrl}}
+                source={{uri: rowData.imageurl === ""?'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRACqHZnYq7HfFp_OshaZ-Hgc_1mjYqJrWJpc71xNWcxdts2O0j6g':rowData.imageurl}}
               />
               <Text style={{color: '#D2D8CF', fontWeight: 'bold',}}>
-                {rowData.title}
+                {rowData.name.split(" ")[0]}
               </Text>
             </View>
+            </TouchableHighlight>
           );
         }}
         keyExtractor={(item, index) => index}
       />
+      {this.state.branch === 'welcome'?
+        <Welcome  style={{height : '93%', width: '100%'}}/>:
+      <View style={{height : '85%', width: '100%'}}>
+
+      <View style={{height : '87%', width: '100%', marginVertical: 5, borderWidth: 1, borderColor: '#686C68'}}>
+
+          <FlatList
+          data={this.state.messages}
+          ref = "flatList"
+          onContentSizeChange={()=> this.refs.flatList.scrollToEnd()}
+          renderItem={({ item: myData }) => {
+            return (
+                <Text style = {myData.name === this.state.name ? styles.owner : styles.friend}>
+                  {myData.message}
+                </Text>
+            );
+          }}
+          keyExtractor={(item, index) => index}
+        />
 
-      <View style={{height : '75%', width: '100%',margin: 5,  borderWidth: 1, borderColor: '#686C68'}}>
-      <FlatList
-      data={this.state.messages}
-      ref = "flatList"
-      onContentSizeChange={()=> this.refs.flatList.scrollToEnd()}
-      renderItem={({ item: myData }) => {
-        return (
-            <Text style = {myData.name === this.state.name ? styles.owner : styles.friend}>
-              {myData.message}
-            </Text>
-        );
-      }}
-      keyExtractor={(item, index) => index}
-    />
       </View>
 
-      <View style={{flex: 1, height: '22%', width: '100%',  marginBottom: 10, marginHorizontal:5, flexDirection: 'row', bottom: 0, alignSelf: 'stretch',  height: 30}}>
+      <View style={{flex: 1, height: '13%', width: '100%',  marginBottom: 10, marginHorizontal:5, flexDirection: 'row', bottom: 0, alignSelf: 'stretch',  height: 30}}>
         <TextInput
            style={{ borderColor: '#686C68', width: '85%', borderWidth: 1, borderRadius: 30, color: '#686C68', fontSize: 20,padding: 10 }}
-           placeholder = "write a message"
+           placeholder = 'write a message here'
            placeholderTextColor = "#686C68"
          />
          <TouchableHighlight style={[styles.buttonContainer]} onPress={() => this.onClickListener('register')}>
              <Image style={{width: 50, height: 50}} source={require('./send.png')}/>
          </TouchableHighlight>
        </View>
 
+       </View>
+     }
       </View>
-
     );
   }
 }

diff --git a/app/components/MainScreen/FriendRequest.js b/app/components/MainScreen/FriendRequest.js
@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import { FlatList, Text, View, Image, TextInput, StyleSheet,TouchableHighlight,  } from "react-native";
+
+export default class FriendRequest extends Component {
+
+  static navigationOptions =
+  {
+     title: 'FriendRequest',
+  };
+
+  render() {
+    return (
+      <View style={{flex: 1, alignItems: 'center', paddingTop: 28, backgroundColor: '#bac4bc'}}>
+        <Text>Hello, FriendRequest</Text>
+      </View>
+    );
+  }
+}
diff --git a/app/components/MainScreen/Welcome.js b/app/components/MainScreen/Welcome.js
@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import { FlatList, Text, View, Image, TextInput, StyleSheet,TouchableHighlight,  } from "react-native";
+
+export default class AllUsers extends Component {
+
+  static navigationOptions =
+  {
+     title: 'AllUsers',
+  };
+
+  render() {
+    return (
+      <View style={{flex: 1, alignItems: 'center', paddingTop: 90, paddingHorizontal: 50}}>
+        <Text style={{fontSize: 50, textAlign: 'center'}}>Welcome to Chatter, User</Text>
+      </View>
+    );
+  }
+}