marwanhawari · jazelly · Jul 7, 2023 · Apr 12, 2024
diff --git a/extension/package.json b/extension/package.json
@@ -10,6 +10,8 @@
         "preview": "vite preview"
     },
     "dependencies": {
+        "@emoji-mart/data": "^1.1.2",
+        "@emoji-mart/react": "^1.1.1",
         "@headlessui/react": "1.7.13",
         "@tanstack/react-query": "^4.20.4",
         "react": "^18.2.0",

diff --git a/extension/src/components/Room.tsx b/extension/src/components/Room.tsx
@@ -12,6 +12,7 @@ import { SERVER_URL } from "../config";
 import { useIsMutating } from "@tanstack/react-query";
 import PlayersButton from "./buttons/PlayersButton";
 import Timer from "./Timer";
+import EmojiPicker from "./buttons/EmojiPickerButton";
 
 interface RoomMessagesLocalStorage {
     roomId: string;
@@ -55,6 +56,8 @@ export default function Room({
     let [hasClickedCopyIcon, setHasClickedCopyIcon] = useState(false);
     let socketRef = useRef<Socket | null>(null);
     let previousSubmissionUrl = useRef<string | null>(null);
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const pickerWrapperRef = useRef<HTMLDivElement>(null);
 
     function handleSubmitMessage(event: React.SyntheticEvent) {
         event.preventDefault();
@@ -92,6 +95,23 @@ export default function Room({
         }, 2000);
     }
 
+    function onEmojiSelect(emoji: Record<string, any>) {
+        const input = inputRef.current;
+
+        if (!input) return;
+
+        const startIndex = input.selectionStart || input.value.length;
+        const endIndex = input.selectionEnd || input.value.length;
+
+        const newValue = input.value.slice(0, startIndex)
+            + emoji.native
+            + input.value.slice(endIndex);
+
+        input.value = newValue;
+        input.focus();
+        input.setSelectionRange(startIndex + emoji.native.length, startIndex + emoji.native.length);
+    };
+
     useEffect(() => {
         let socket: Socket = io(SERVER_URL, {
             transports: ["websocket", "polling"],
@@ -245,6 +265,25 @@ export default function Room({
         autoScrollToLatestMessage();
     }, [messages]);
 
+    useEffect(() => {
+        const handleClickOutsideEvent = (event: Record<string, any>) => {
+            if (
+                pickerWrapperRef.current &&
+                !pickerWrapperRef.current.contains(event.target) &&
+                showEmojiPicker
+            ) {
+                setShowEmojiPicker(false);
+            }  
+        };
+
+        document.addEventListener('click', handleClickOutsideEvent);
+
+        return () => {
+            document.removeEventListener('click', handleClickOutsideEvent);
+        };
+
+    }, [showEmojiPicker]);
+
     return (
         <div className="flex h-screen flex-col gap-y-2 border-y-8 border-r-8 border-lc-border-light bg-lc-bg-light px-2 text-sm text-lc-text-light dark:border-lc-border dark:bg-lc-bg dark:text-white">
             <div className="mx-2 mt-2 flex flex-col" id="first-box">
@@ -317,14 +356,17 @@ export default function Room({
                         type="text"
                         name="chatbox"
                         id="chatbox"
-                        className="w-full bg-lc-fg-light outline-none  dark:bg-lc-fg"
+                        className="w-full bg-lc-fg-light outline-none dark:bg-lc-fg"
                         placeholder="Type a message..."
                         spellCheck="false"
                         autoComplete="off"
                         autoCapitalize="off"
                         autoCorrect="off"
                     />
                 </form>
+                <div ref={pickerWrapperRef}>
+                    <EmojiPicker showEmojiPicker={showEmojiPicker} setShowEmojiPicker={setShowEmojiPicker} onSelectEmoji={onEmojiSelect}/>
+                </div>
                 <div
                     onClick={handleSubmitMessage}
                     className={`${

diff --git a/extension/src/components/buttons/EmojiPickerButton.tsx b/extension/src/components/buttons/EmojiPickerButton.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from 'react';
+import data from '@emoji-mart/data';
+import Picker from '@emoji-mart/react'
+import EmojiIcon from '../../icons/EmojiIcon';
+
+interface IEmojiPickerParams {
+    showEmojiPicker: boolean;
+    setShowEmojiPicker: (arg: boolean) => void;
+    onSelectEmoji: (e: Record<string, any>) => any;
+}
+
+function EmojiPicker({ showEmojiPicker, setShowEmojiPicker, onSelectEmoji }: IEmojiPickerParams) {
+    const buttonRef = useRef<HTMLDivElement>(null);
+
+    function handleEmojiSelect(emoji: Record<string, any>) {
+        setShowEmojiPicker(false);
+        onSelectEmoji(emoji);
+    };
+
+    function handleToggleEmojiPicker() {
+        setShowEmojiPicker(!showEmojiPicker);
+    }
+
+    const calculatePickerPosition = () => {
+        if (!buttonRef.current) {
+            return
+        }
+
+        const buttonRect = buttonRef.current.getBoundingClientRect();
+        const bottom =  buttonRect.height * 2;
+        const right = buttonRect.width;
+        return { bottom, right };
+    };
+
+    return (
+        <>
+            <div
+                ref={buttonRef}
+                className="flex cursor-pointer flex-col items-center rounded-lg bg-lc-fg-light px-2 py-2 transition-all hover:bg-lc-fg-hover-light dark:bg-lc-fg dark:hover:bg-lc-fg-hover"
+                onClick={handleToggleEmojiPicker}
+            >
+                <EmojiIcon />
+            </div>
+
+            <div
+                className="absolute z-10"
+                style={calculatePickerPosition()}
+            >
+                {showEmojiPicker && 
+                    <Picker data={data} onEmojiSelect={handleEmojiSelect} />
+                }
+            </div>
+        </>
+    );
+};
+
+export default EmojiPicker;
diff --git a/extension/src/icons/EmojiIcon.tsx b/extension/src/icons/EmojiIcon.tsx
@@ -0,0 +1,15 @@
+export default function SettingsIcon() {
+  return (
+      <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-[18px] w-[18px] fill-current text-lc-text-light dark:text-white"
+          viewBox="0 0 24 24"
+      >
+          <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.507 13.941c-1.512 1.195-3.174 1.931-5.506 1.931-2.334 0-3.996-.736-5.508-1.931l-.493.493c1.127 1.72 3.2 3.566 6.001 3.566 2.8 0 4.872-1.846 5.999-3.566l-.493-.493zm-9.007-5.941c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5-.672-1.5-1.5-1.5zm7 0c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5-.672-1.5-1.5-1.5z"
+          ></path>
+      </svg>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -379,6 +379,16 @@
   resolved "https://registry.yarnpkg.com/@emmetio/scanner/-/scanner-1.0.4.tgz#e9cdc67194fd91f8b7eb141014be4f2d086c15f1"
   integrity sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA==
 
+"@emoji-mart/data@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/data/-/data-1.1.2.tgz#777c976f8f143df47cbb23a7077c9ca9fe5fc513"
+  integrity sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg==
+
+"@emoji-mart/react@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.1.1.tgz#ddad52f93a25baf31c5383c3e7e4c6e05554312a"
+  integrity sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==
+
 "@esbuild/[email protected]":
   version "0.15.18"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.18.tgz#266d40b8fdcf87962df8af05b76219bc786b4f80"