feat(chat): added emoji picker (#449)

Co-authored-by: Dunsin <78784850+Dun-sin@users.noreply.github.com>

client/package.json

@@ -21,6 +21,7 @@
         "@mui/styled-engine-sc": "^5.6.1",
         "@rsuite/icons": "^1.0.3",
         "axios": "^1.4.0",
+        "emoji-picker-react": "^4.5.2",
         "lodash": "^4.17.21",
         "markdown-it": "^13.0.1",
         "react": "^18.2.0",

client/src/components/Chat.jsx

@@ -26,6 +26,8 @@ import { useNotification } from 'src/lib/notification';
 import { NEW_EVENT_DELETE_MESSAGE, NEW_EVENT_EDIT_MESSAGE, NEW_EVENT_RECEIVE_MESSAGE, NEW_EVENT_TYPING } from '../../../constants.json';
 import { createBrowserNotification } from 'src/lib/browserNotification';
 
+import EmojiPicker from './EmojiPicker';
+
 const inactiveTimeThreshold = 180000 // 3 mins delay
 let senderId;
 let inactiveTimeOut;
@@ -614,14 +616,18 @@ const Chat = () => {
                 className="flex justify-center items-center mt-[40px]"
                 onSubmit={handleSubmit}
             >
-                <div className="w-full flex items-center justify-between bg-secondary rounded-l-md max-h-[150px]">
+                <div className="w-full flex items-center justify-between bg-secondary rounded-l-md max-h-[150px] relative">
                     <textarea
                         placeholder="Send a Message....."
                         className="h-[45px] focus:outline-none w-[96%] bg-secondary text-white rounded-[15px] resize-none pl-[22px] pr-[22px] py-[10px] text-[18px] placeholder-shown:align-middle min-h-[40px] max-h-[100px] overflow-y-scroll"
                         ref={inputRef}
                         value={message}
                         onChange={handleTypingStatus}
                     />
+                    <EmojiPicker
+                        onEmojiPick={setMessage}
+                        focusInput={() => inputRef.current.focus()}
+                    />
                     {editing.isediting && (
                         <ImCancelCircle
                             onClick={cancelEdit}

client/src/components/EmojiPicker.jsx

@@ -0,0 +1,53 @@
+import {default as ReactEmojiPicker} from 'emoji-picker-react';
+import { useState } from 'react';
+import { MdOutlineEmojiEmotions } from "react-icons/md";
+import { useDarkMode } from 'src/context/DarkModeContext';
+import PropTypes from 'prop-types';
+
+export default function EmojiPicker({onEmojiPick, focusInput}){
+    const { darkMode } = useDarkMode();
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+
+    const onClosePicker = () => {
+        setShowEmojiPicker(false);
+        focusInput();
+    };
+
+    const hndleEmojiClick = (emojiData) => {
+        onEmojiPick(prev => prev + emojiData.emoji);
+        onClosePicker();
+    };
+
+    return (
+        <>
+            <MdOutlineEmojiEmotions
+                onClick={() => setShowEmojiPicker(true)}
+                className="fill-white mr-5 scale-[1.3] cursor-pointer"
+            />
+            {showEmojiPicker && <>
+                <div 
+                    aria-hidden
+                    className='fixed inset-0 z-10'
+                    onClick={onClosePicker}
+                />
+                <div
+                    className='absolute bottom-[calc(100%+16px)] right-0 z-20 w-[min(100%,350px)]'
+                >
+                    <ReactEmojiPicker
+                        width='100%'
+                        theme={darkMode ? 'dark' : 'light'}
+                        onEmojiClick={hndleEmojiClick}
+                        lazyLoadEmojis
+                        skinTonesDisabled
+                        searchDisabled
+                    />
+                </div>
+            </>}
+        </>
+    )
+}
+
+EmojiPicker.propTypes = {
+    onEmojiPick: PropTypes.func,
+    focusInput: PropTypes.func,
+};