SHARE
TWEET

Untitled

a guest Apr 21st, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import fire from './config/Fire';
  3.  
  4. import './App.css';
  5.  
  6.  
  7. class Conversations extends Component{
  8.     constructor(props){
  9.         super(props);
  10.         this.state = {
  11.             thisUser: props.username,
  12.             hasConversationOpen: false,
  13.             otherUser : "",
  14.             conversationID : ""
  15.         }
  16.     }
  17.  
  18.     loadConversations = () =>{
  19.         let collectionRef = fire.firestore().collection('messages');
  20.         collectionRef.get().then(function(collection){
  21.             collection.forEach(function(doc){
  22.                 let user1 = doc.data().user1;
  23.                 let user2 = doc.data().user2;
  24.                 console.log(doc.id, " => 1:", doc.data().user1, " 2:", doc.data().user2);
  25.                 if(user1 == this.state.thisUser || user2 == this.state.thisUser){
  26.                     console.log("Found message between ", user1, " and ", user2);
  27.                     //TODO add this conversation to innerHTML
  28.                 }
  29.  
  30.             });
  31.  
  32.         }).catch((error)=>{
  33.             let errorMessage = error;
  34.             console.log("error retrieving messages collection: ", errorMessage);
  35.         });
  36.     }
  37.  
  38.     pickConversation = (other, conversationID) => {
  39.         this.setState({thisUser: this.state.thisUser, hasConversationOpen: true, otherUser: other, conversationID:conversationID});
  40.     }
  41.  
  42.     newConversation = (e) => {
  43.         e.preventDefault();
  44.         //check if user already has conversation with this person
  45.         let foundConvo = false;
  46.         let messagesCollectionRef = fire.firestore().collection('messages');
  47.         let x = this;
  48.         messagesCollectionRef.get().then(function(collection){
  49.             collection.forEach(function(doc){
  50.                 let user1 = doc.data().user1;
  51.                 let user2 = doc.data().user2;
  52.                 if((user1 == x.state.thisUser && user2 == x.state.otherUser) ||
  53.                     (user2 == x.state.thisUser && user1 == x.state.otherUser)){
  54.                         //conversation exists
  55.                         foundConvo = true;
  56.                         x.pickConversation(x.state.otherUser, doc.id);
  57.                     }
  58.             });
  59.         });
  60.         if(!foundConvo){
  61.         //check if user exists
  62.             let userCollectionRef = fire.firestore().collection('users');
  63.             let x = this;
  64.             userCollectionRef.get().then(function(collection){
  65.                 let userExists = false;
  66.                
  67.                 collection.forEach(function(doc){
  68.                     let user = doc.data().username;
  69.                     if(user == x.state.otherUser){
  70.                         userExists = true;
  71.                     }
  72.                 });
  73.                 if(!userExists){
  74.                     //TODO write error message or something
  75.                     alert("user not exist");
  76.                 }
  77.                 else{
  78.                     //create conversation
  79.                     fire.firestore().collection("messages").doc().set({
  80.                         messages: {}, user1: x.state.thisUser, user2: x.state.otherUser
  81.                     }).then(function(){
  82.                         console.log("Successfully made conversation between ", x.state.thisUser, " and ", x.state.otherUser);
  83.                         //join conversation
  84.                         x.loadConversations();
  85.                         x.pickConversation(x.state.otherUser);
  86.                     }).catch((error)=>{
  87.                         console.log("error while creating conversation: ",error);
  88.                     });
  89.                 }
  90.  
  91.             }).catch((error)=>{
  92.                 let errorMessage = error;
  93.                 console.log("error retrieving users collection: ",errorMessage);
  94.             });
  95.         }
  96.          
  97.     }
  98.  
  99.     handleChange = (e) => {
  100.         this.setState({[e.target.name]: e.target.value});
  101.     }
  102.  
  103.     render(){
  104.         return(
  105.             <div>
  106.                 {this.loadConversations}
  107.                 <ul id = "conversations">
  108.                    
  109.                 </ul>
  110.                 <form>
  111.                     <label>New Conversation with:</label>  
  112.                     <input type = "text" id = "requestedUser" name="otherUser"value = {this.state.otherUser} onChange = {this.handleChange}/>
  113.                     <button type = "submit" onClick = {this.newConversation}>Begin</button>
  114.                 </form>
  115.                 {this.state.hasConversationOpen?(<Messages username={this.state.thisUser} otherUser={this.state.otherUser} conversationID={this.state.conversationID}/>):(null)}
  116.             </div>
  117.         )
  118.     }
  119. }
  120.  
  121. class Messages extends Component{
  122.     constructor(props){
  123.         super(props);
  124.         this.state = {
  125.             msg: "",
  126.             otherUser: props.otherUser,
  127.             thisUser: props.username,
  128.             conversationID: props.conversationID,
  129.             messages: {}
  130.         }
  131.     }
  132.  
  133.     loadMessages = () =>{
  134.         let conversationDocRef = fire.firestore().collection("messages").doc(this.state.conversationID);
  135.         let x = this;
  136.         conversationDocRef.get().then(function(doc){
  137.             let messages = doc.data().messages;
  138.             x.setState({messages:messages});
  139.             for(let i=0; i<messages.length; i=i+2){
  140.                 let author = messages[i];
  141.                 let msg = messages[i+1];
  142.                 //TODO innerHTML
  143.             }
  144.         }).catch((error)=>{
  145.             console.log("messages loading error: ", error);
  146.         })
  147.     }
  148.  
  149.     writeMessage = (e) =>{
  150.         e.preventDefault();
  151.         let conversationDocRef = fire.firestore().collection("messages").doc(this.state.conversationID);
  152.         let x = this;
  153.         let messagesLength = x.state.messages.length;
  154.         console.log(messagesLength);
  155.         if(messagesLength<0 || messagesLength==null){
  156.             messagesLength=0;
  157.         }
  158.         let messages = this.state.messages;
  159.         console.log(messages);
  160.         messages[messagesLength] = x.state.thisUser;
  161.         messages[messagesLength+1] = x.state.msg;
  162.         console.log(messages);
  163.         conversationDocRef.update({
  164.             messages:messages
  165.         }).then(function(doc){
  166.             x.loadMessages();
  167.         });
  168.  
  169.     }
  170.  
  171.     handleChange = (e) =>{
  172.         this.setState({[e.target.name]: e.target.value});
  173.     }
  174.  
  175.     render(){
  176.         return(
  177.            
  178.             <div>
  179.                 {this.loadMessages()}
  180.                 <h1>Conversation with {this.state.otherUser}</h1>
  181.                 <p id = "messages"></p>
  182.                 <form>
  183.                     <label>Type a message:
  184.                         <input type = "text" name = "msg" id= "msg" value = {this.state.msg} onChange = {this.handleChange}/>
  185.                         <button type = "submit" onClick = {this.writeMessage}>Send</button>
  186.                     </label>
  187.  
  188.                 </form>
  189.                
  190.                
  191.             </div>
  192.  
  193.         )
  194.     }
  195.  
  196.  
  197.  
  198. }
  199.  
  200. export default Conversations;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top