Added the emoji feature

package.json

@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "emoji-mart": "^3.0.1",
     "firebase": "^8.6.5",
     "react": "^17.0.2",
     "react-clear-cache": "^1.4.12",

src/Chat.css

@@ -96,3 +96,27 @@
   padding: 10px;
   color: gray;
 }
+
+.toggle-emoji {
+  border: none;
+  width: 50px;
+  height: auto;
+  padding: 0;
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media only screen and (min-width: 600px) {
+  .emoji-mart {
+    position: absolute;
+    left: 480px;
+    bottom: 140px;
+  }}
+  @media only screen and (max-width: 1080px) {
+    .emoji-mart {
+      position: absolute;
+      left: 180px;
+      bottom: 140px;
+    }}
+

src/Chat.js

@@ -8,7 +8,8 @@ import MicIcon from "@material-ui/icons/Mic";
 import firebase from "firebase";
 import React, { useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
-
+import {Picker} from "emoji-mart";
+import 'emoji-mart/css/emoji-mart.css';
 import db from "./firebase";
 import { useStateValue } from "./StateProvider";
 
@@ -21,6 +22,7 @@ function Chat() {
   const [{ user }] = useStateValue();
   const chatBodyRef = useRef(null);
   const inputRef = useRef(null);
+  const [showEmoji,setEMoji]=useState(false);
 
   useEffect(() => {
     if (roomId) {
@@ -45,7 +47,17 @@ function Chat() {
   useEffect(() => {
     chatBodyRef.current.scrollTop = chatBodyRef.current.scrollHeight;
   });
-
+  const  toggleEMoji=()=>{
+    sEmoji();
+ }
+ const sEmoji = (e) =>{
+   setEMoji(!showEmoji);
+ }
+ const addEmoji=(e)=>{
+   sEmoji();
+   let emoji = e.native;
+   setInput(input+emoji)
+ }   
   const sendMessage = (e) => {
     e.preventDefault();
     db.collection("rooms").doc(roomId).collection("messages").add({
@@ -105,7 +117,17 @@ function Chat() {
         ))}
       </div>
       <div className="chat__footer">
+      {showEmoji?(
+           <Picker onSelect={addEmoji}
+            emojiTooltip={true}
+            title="Chathub"/>
+       ):null}
+       <button type="button"
+       style={{cursor:"pointer",background:"none"}} 
+       className="toggle-emoji"
+         onClick={toggleEMoji}>
         <InsertEmoticonIcon />
+        </button>
         <form>
           <input
             ref={inputRef}