From 62ad8fda43b563bf33e9f8f86b01c1776437cf1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 10 Sep 2024 13:49:01 +0200
Subject: [PATCH] pl-fe: allow adding custom emojis to reaction picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../ui/emoji-selector/emoji-selector.tsx        | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/pl-fe/src/components/ui/emoji-selector/emoji-selector.tsx b/packages/pl-fe/src/components/ui/emoji-selector/emoji-selector.tsx
index 87e06c54e..56a7e09f0 100644
--- a/packages/pl-fe/src/components/ui/emoji-selector/emoji-selector.tsx
+++ b/packages/pl-fe/src/components/ui/emoji-selector/emoji-selector.tsx
@@ -6,7 +6,7 @@ import EmojiComponent from 'pl-fe/components/ui/emoji/emoji';
 import HStack from 'pl-fe/components/ui/hstack/hstack';
 import IconButton from 'pl-fe/components/ui/icon-button/icon-button';
 import EmojiPickerDropdown from 'pl-fe/features/emoji/components/emoji-picker-dropdown';
-import { useClickOutside, useFeatures, usePlFeConfig } from 'pl-fe/hooks';
+import { useAppSelector, useClickOutside, useFeatures, usePlFeConfig } from 'pl-fe/hooks';
 
 import type { Emoji } from 'pl-fe/features/emoji';
 
@@ -14,7 +14,7 @@ interface IEmojiButton {
   /** Unicode emoji character. */
   emoji: string;
   /** Event handler when the emoji is clicked. */
-  onClick(emoji: string): void;
+  onClick(emoji: string, custom?: string): void;
   /** Extra class name on the <button> element. */
   className?: string;
   /** Tab order of the button. */
@@ -23,16 +23,21 @@ interface IEmojiButton {
 
 /** Clickable emoji button that scales when hovered. */
 const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const customEmoji = emoji.startsWith(':') ? useAppSelector((state) => {
+    return state.custom_emojis.find(({ shortcode }) => `:${shortcode}:` === emoji);
+  }) : undefined;
+
   const handleClick: React.EventHandler<React.MouseEvent> = (event) => {
     event.preventDefault();
     event.stopPropagation();
 
-    onClick(emoji);
+    onClick(customEmoji ? emoji.replace(/:(\w+):/, '$1') : emoji, customEmoji?.url);
   };
 
   return (
     <button className={clsx(className)} onClick={handleClick} tabIndex={tabIndex}>
-      <EmojiComponent className='h-6 w-6 duration-100 hover:scale-110' emoji={emoji} />
+      <EmojiComponent className='h-6 w-6 duration-100 hover:scale-110' emoji={emoji} src={customEmoji?.url} />
     </button>
   );
 };
@@ -122,9 +127,9 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
         <HStack
           className={clsx('z-[999] flex w-max max-w-[100vw] flex-wrap space-x-3 rounded-full bg-white px-3 py-2.5 shadow-lg focus:outline-none dark:bg-gray-900 dark:ring-2 dark:ring-primary-700')}
         >
-          {Array.from(plFeConfig.allowedEmoji).map((emoji, i) => (
+          {Array.from(plFeConfig.allowedEmoji).map((emoji) => (
             <EmojiButton
-              key={i}
+              key={emoji}
               emoji={emoji.replace(/^\\/, '')}
               onClick={onReact}
               tabIndex={visible ? 0 : -1}