fix: replace emoji picker

Signed-off-by: Innei <[email protected]>

Author: Innei

package.json

@@ -37,8 +37,6 @@
   },
   "dependencies": {
     "@clerk/nextjs": "4.22.0",
-    "@emoji-mart/data": "1.1.2",
-    "@emoji-mart/react": "1.1.1",
     "@floating-ui/react-dom": "2.0.1",
     "@mx-space/api-client": "1.4.3",
     "@radix-ui/react-dialog": "1.0.4",
@@ -54,6 +52,7 @@
     "daisyui": "3.2.1",
     "dayjs": "1.11.9",
     "emoji-mart": "5.5.2",
+    "emoji-picker-react": "4.4.10",
     "foxact": "0.2.16",
     "framer-motion": "^10.13.0",
     "idb-keyval": "6.2.1",

pnpm-lock.yaml

@@ -1,50 +1,17 @@
-import { useQuery } from '@tanstack/react-query'
-import { memo, useCallback } from 'react'
+import EmojiPicker$, { EmojiStyle } from 'emoji-picker-react'
+import { memo } from 'react'
 import type { FC } from 'react'
 
-import { Loading } from '~/components/ui/loading'
-
 export const EmojiPicker: FC<{
   onEmojiSelect: (emoji: string) => void
 }> = memo(({ onEmojiSelect }) => {
-  const { data, isLoading } = useQuery({
-    queryKey: ['emoji-data'],
-    queryFn: () =>
-      fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data', {
-        next: {
-          revalidate: 60 * 60 * 24 * 7,
-        },
-      }).then((response) => response.json()),
-
-    staleTime: Number.POSITIVE_INFINITY,
-  })
-  const handleSelect = useCallback((emoji: any) => {
-    return onEmojiSelect(emoji.native)
-  }, [])
-
-  const handleDivRef = (divEl: HTMLDivElement) => {
-    import('emoji-mart').then(
-      (m) =>
-        new m.Picker({
-          ref: {
-            current: divEl,
-          },
-          data,
-          onEmojiSelect: handleSelect,
-          maxFrequentRows: 0,
-        }),
-    )
-  }
-
-  if (isLoading)
-    return (
-      <Loading className="flex h-[435px] w-[352px] rounded-md bg-slate-100 center dark:bg-neutral-800" />
-    )
-
   return (
-    <div className="w-[352px]">
-      <div ref={handleDivRef} />
-    </div>
+    <EmojiPicker$
+      onEmojiClick={(e) => {
+        onEmojiSelect(e.emoji)
+      }}
+      emojiStyle={EmojiStyle.NATIVE}
+    />
   )
 })
 EmojiPicker.displayName = 'EmojiPicker'