Restore default emoji term when input is empty in emoji picker

PrimalHQ · Jan 19, 2024 · 18d7bb8 · 18d7bb8
1 parent d61302e
commit 18d7bb8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 32 deletions.
diff --git a/src/components/EmojiPickModal/EmojiPickModal.tsx b/src/components/EmojiPickModal/EmojiPickModal.tsx
@@ -16,6 +16,8 @@ import { EmojiOption } from '../../types/primal';
 import ButtonPrimary from '../Buttons/ButtonPrimary';
 import EmojiPicker from '../EmojiPicker/EmojiPicker';
 
+const defaultTerm = 'smile';
+
 const EmojiPickModal: Component<{
   id?: string,
   open: boolean,
@@ -25,7 +27,7 @@ const EmojiPickModal: Component<{
 
   const intl = useIntl();
 
-  const [emojiSearchTerm, setEmojiSearchTerm] = createSignal('smile');
+  const [emojiSearchTerm, setEmojiSearchTerm] = createSignal(defaultTerm);
 
   const onKey = (e: KeyboardEvent) => {
     if (e.code === 'Escape') {
@@ -47,7 +49,13 @@ const EmojiPickModal: Component<{
     else {
       window.removeEventListener('keydown', onKey);
     }
-  })
+  });
+
+  createEffect(() => {
+    if (emojiSearchTerm().length === 0) {
+      setEmojiSearchTerm(() => defaultTerm)
+    }
+  });
 
   return (
     <Modal
@@ -75,7 +83,10 @@ const EmojiPickModal: Component<{
 
         <EmojiPicker
           filter={emojiSearchTerm()}
-          onSelect={props.onSelect}
+          onSelect={(emoji: EmojiOption) => {
+            props.onSelect(emoji);
+            emojiInput?.focus();
+          }}
         />
       </div>
     </Modal>

diff --git a/src/components/SettingsZap/SettingsZap.tsx b/src/components/SettingsZap/SettingsZap.tsx
@@ -1,20 +1,15 @@
-import { Component, createEffect, createSignal, For } from 'solid-js';
+import { Component, createSignal, For } from 'solid-js';
 
 import styles from './SettingsZap.module.scss';
 import { useSettingsContext } from '../../contexts/SettingsContext';
-import { debounce, isVisibleInContainer, uuidv4 } from '../../utils';
+import { debounce } from '../../utils';
 import { useIntl } from '@cookbook/solid-intl';
 import ConfirmModal from '../ConfirmModal/ConfirmModal';
 import { settings as t } from '../../translations';
 import { hookForDev } from '../../lib/devTools';
 import ButtonLink from '../Buttons/ButtonLink';
-import Modal from '../Modal/Modal';
 
-import emojiSearch from '@jukben/emoji-search';
-import { createStore } from 'solid-js/store';
 import { EmojiOption } from '../../types/primal';
-import ButtonPrimary from '../Buttons/ButtonPrimary';
-import EmojiPicker from '../EmojiPicker/EmojiPicker';
 import EmojiPickModal from '../EmojiPickModal/EmojiPickModal';
 
 const SettingsZap: Component<{ id?: string }> = (props) => {
@@ -85,28 +80,6 @@ const SettingsZap: Component<{ id?: string }> = (props) => {
     setIsEmojiChange(-1);
   };
 
-  const onKey = (e: KeyboardEvent) => {
-    if (e.code === 'Escape') {
-      setIsEmojiChange(-1);
-      return;
-    }
-  };
-
-  let emojiInput: HTMLInputElement | undefined;
-
-  createEffect(() => {
-    if (isEmojiChange() >= 0) {
-      window.addEventListener('keydown', onKey);
-      setTimeout(() => {
-        setEmojiSearchTerm(() => 'smile')
-        emojiInput?.focus();
-      }, 10);
-    }
-    else {
-      window.removeEventListener('keydown', onKey);
-    }
-  })
-
   return (
     <div id={props.id} class={styles.zapSettings}>
       <div class={styles.defaultZaps}>