Merge pull request #91 from Sheikh566/Emoji-Picker-In-Comments

package.json

@@ -14,6 +14,7 @@
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.7",
     "@mui/styles": "^5.10.7",
+    "emoji-picker-react": "^4.4.3",
     "firebase": "^9.9.3",
     "notistack": "^2.0.5",
     "react": "^18.2.0",

src/components/Post.jsx

@@ -25,6 +25,7 @@ import { db } from "../lib/firebase";
 import firebase from "firebase/compat/app";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import "react-lazy-load-image-component/src/effects/blur.css";
+import EmojiPicker from 'emoji-picker-react';
 
 import { doc, getDoc, updateDoc } from "firebase/firestore";
 const ITEM_HEIGHT = 48;
@@ -35,6 +36,7 @@ function Post(prop) {
   const [comment, setComment] = useState("");
   const [likesno, setLikesno] = useState(likecount ? likecount.length : 0);
   const [anchorEl, setAnchorEl] = useState(null);
+  const [showEmojis, setShowEmojis] =  useState(false);
   const [Open, setOpen] = useState(false);
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
@@ -73,6 +75,11 @@ function Post(prop) {
     setComment("");
   };
 
+  const onEmojiClick = (emojiObject, event) => {
+    setComment(prevInput => prevInput + emojiObject.emoji)
+    setShowEmojis(false);
+  };
+
   /**
    * @type {{
    *     imageUrl: null|string,
@@ -285,7 +292,24 @@ function Post(prop) {
         {user && (
           <form className="post__commentBox">
             <div className="social__icon">
-              <SentimentSatisfiedAltOutlinedIcon />
+              <SentimentSatisfiedAltOutlinedIcon
+                onClick={() => {
+                  setShowEmojis(val => !val);
+                }}
+              />
+              {showEmojis && (
+                <div id="picker">
+                  <EmojiPicker 
+                    emojiStyle="native"
+                    height={330}
+                    searchDisabled={true}
+                    onEmojiClick={onEmojiClick}
+                    previewConfig={{
+                      showPreview: false
+                    }}
+                  />
+                </div>
+              )}
             </div>
             <input
               className="post__input"

src/index.css

@@ -79,6 +79,8 @@
 }
 .social__icon {
   padding: 10px;
+  width: 24px;
+  height: 28px;
 }
 .social__icon__last {
   padding: 10px;
@@ -102,6 +104,7 @@
   border: none;
   flex: 1;
   padding: 10px;
+  font-size: 16px;
 }
 
 .post__button {
@@ -200,3 +203,10 @@
     opacity: 0.5;
   }
 }
+
+div#picker {
+  position: relative;
+  top: -353px;
+  left: -7px;
+  transform: scale(0.9);
+}