1. import React, { useEffect, useRef, useState } from 'react';
2.  
3. //Import Firbase component
4. import firebase from 'firebase/app';
5.  
6. //Import FirebaseAuth component
7. import { useCollectionData } from 'react-firebase-hooks/firestore';
8.  
9. // Import FontAwesomeIcon component
10. import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
11. import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
12.  
13. // Importing Component
14. import ChatMessage from './ChatMessage';
15.  
16. function ChatRoom() {
17.  
18.     const auth = firebase.auth()
19.     const firestore = firebase.firestore();
20.  
21.     const dummy = useRef();
22.     const messagesRef = firestore.collection('messages');
23.     const query = messagesRef.orderBy('createdAt');
24.     const [messages] = useCollectionData(query, { idField: 'id' });
25.     const [formValue, setFormValue] = useState('');
26.  
27.     const scrollToBottom = () =>{
28.         dummy.current?.scrollIntoView({behavior: "smooth"})
29.     }
30.  
31.     useEffect(()=>{
32.         scrollToBottom();
33.     })
34.  
35.     const sendMessage = async (e) => {
36.         e.preventDefault();
37.  
38.         const { uid, photoURL } = auth.currentUser;
39.  
40.         await messagesRef.add({
41.             text: formValue,
42.             createdAt: firebase.firestore.FieldValue.serverTimestamp(),
43.             uid,
44.             photoURL
45.         })
46.        
47.         setFormValue('');
48.         scrollToBottom();
49.     }
50.  
51.     return (<>
52.         <main>
53.  
54.             {messages && messages.map((msg, index, pool) => {
55.               const prev = pool[index-1];
56.               const next = pool[index+1]
57.               return <ChatMessage key={msg.id} message={msg} neighbour={{prev, next}} />
58.             })}
59.  
60.             <span ref={dummy}></span>
61.         </main>
62.  
63.         <form onSubmit={sendMessage}>
64.  
65.             <input value={formValue} onChange={(e) => setFormValue(e.target.value)} placeholder="Type a message" />
66.  
67.             <button className="chat-message-button" type="submit" disabled={!formValue}>
68.                 <FontAwesomeIcon icon={faPaperPlane} />
69.             </button>
70.  
71.         </form>
72.     </>)
73. }
74.  
75. export default ChatRoom