refactor: upgrade emoji lib

src/common/component/EmojiPicker.tsx

@@ -1,53 +0,0 @@
-import { useState, useEffect, FC } from "react";
-import { EmojiData } from "emoji-mart";
-import "emoji-mart/css/emoji-mart.css";
-import { Picker } from "emoji-mart";
-import styled from "styled-components";
-
-interface Props {
-  onSelect: (emoji: EmojiData) => void;
-}
-
-const StyledWrapper = styled.div`
-  filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
-  border-radius: 12px;
-  .emoji-mart {
-    border: none;
-    border-radius: 12px;
-  }
-  .emoji-mart-emoji {
-    cursor: pointer;
-    span {
-      cursor: inherit;
-    }
-  }
-`;
-
-const EmojiPicker: FC<Props> = ({ onSelect, ...rest }) => {
-  const [visible, setVisible] = useState(false);
-  useEffect(() => {
-    const inter = setTimeout(() => {
-      setVisible(true);
-    }, 500);
-    return () => {
-      clearTimeout(inter);
-    };
-  }, []);
-
-  return (
-    <StyledWrapper>
-      {visible ? (
-        <Picker
-          perLine={10}
-          emojiSize={24}
-          emojiTooltip={true}
-          showSkinTones={false}
-          onSelect={onSelect}
-          {...rest}
-        />
-      ) : null}
-    </StyledWrapper>
-  );
-};
-
-export default EmojiPicker;

src/common/component/Message/Reaction.tsx

@@ -1,10 +1,8 @@
 import { FC } from "react";
 import styled from "styled-components";
-import { getEmojiDataFromNative } from "emoji-mart";
-import AppleEmojiData from "emoji-mart/data/apple.json";
 import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
-import ReactionItem, { Emojis } from "../ReactionItem";
+import ReactionItem, { Emojis, ReactionMap } from "../ReactionItem";
 import ReactionPicker from "./ReactionPicker";
 import Tooltip from "../Tooltip";
 import { useReactMessageMutation } from "../../../app/services/message";
@@ -105,6 +103,7 @@ const StyledDetails = styled.div`
     color: #1d2939;
   }
 `;
+
 const ReactionDetails = ({
   uids = [],
   emoji,
@@ -118,7 +117,7 @@ const ReactionDetails = ({
   const names = uids.map((id) => {
     return usersData[id]?.name;
   });
-  const emojiData = getEmojiDataFromNative(emoji || "", "apple", AppleEmojiData);
+  // const emojiData = getEmojiDataFromNative(emoji || "", "apple", AppleEmojiData);
   const prefixDesc =
     names.length > 3
       ? `${names.join(", ")} and ${names.length - 3} others reacted with`
@@ -130,7 +129,7 @@ const ReactionDetails = ({
       </div>
       <div className="desc">
         <span>{prefixDesc}</span>
-        <span>{emojiData?.colons}</span>
+        <span>{ReactionMap[emoji]}</span>
       </div>
     </StyledDetails>
   );

src/common/component/ReactionItem.tsx

@@ -18,7 +18,16 @@ export interface Emojis {
   "🙁": ReactElement;
   "🎉": ReactElement;
 }
-
+export const ReactionMap = {
+  "🎉": ":tada:",
+  "👍": ":+1:",
+  "🙁": ":slightly_frown_face:",
+  "❤️": ":heart:",
+  "👎": ":thumb_down:",
+  "😄": ":smile:",
+  "👀": ":eyes:",
+  "🚀": ":rocket:",
+};
 const emojis: Emojis = {
   "👍": <EmojiThumbUp className="emoji" />,
   "👎": <EmojiThumbDown className="emoji" />,

src/common/component/Send/EmojiPicker.tsx

@@ -1,10 +1,9 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import styled from "styled-components";
 import { useOutsideClick } from "rooks";
 import Tooltip from "../Tooltip";
-import Picker from "../EmojiPicker";
+import { Picker } from 'emoji-mart';
 import SmileIcon from "../../../assets/icons/emoji.smile.svg";
-import { BaseEmoji, EmojiData } from "emoji-mart";
 
 const Styled = styled.div`
   position: relative;
@@ -13,19 +12,20 @@ const Styled = styled.div`
   align-items: center;
   > .emoji {
     cursor: pointer;
+    user-select: none;
   }
   > svg {
     width: 22px;
     height: 22px;
   }
   > .picker {
-    visibility: hidden;
+    display: none;
     position: absolute;
     top: -20px;
     left: -20px;
     transform: translateY(-100%);
     &.visible {
-      visibility: visible;
+      display: block;
     }
   }
 `;
@@ -33,14 +33,32 @@ const Styled = styled.div`
 export default function EmojiPicker({ selectEmoji }: { selectEmoji: (e: string) => void }) {
   const ref = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState(false);
-
   const togglePickerVisible = () => {
     setVisible((prev) => !prev);
   };
+  useEffect(() => {
+    if (ref && ref.current) {
+      ref.current.innerHTML = "";
+      new Picker({
+        data: async () => {
+          const response = await fetch(
+            'https://cdn.jsdelivr.net/npm/@emoji-mart/data',
+          );
 
-  const handleSelect = (emoji: EmojiData) => {
-    selectEmoji((emoji as BaseEmoji).native);
-  };
+          return response.json();
+        },
+        parent: ref.current,
+        onEmojiSelect: (item) => {
+          console.log("eee333", item);
+
+          selectEmoji(item.native);
+        },
+        // onClickOutside: () => {
+        //   setVisible(false);
+        // }
+      });
+    }
+  }, [selectEmoji]);
 
   useOutsideClick(
     ref,
@@ -59,7 +77,7 @@ export default function EmojiPicker({ selectEmoji }: { selectEmoji: (e: string)
     <Tooltip placement="top" tip="Emojis" disabled={visible}>
       <Styled>
         <div ref={ref} className={`picker ${visible ? "visible" : ""}`}>
-          <Picker onSelect={handleSelect} />
+          {/* emoji picker */}
         </div>
         <SmileIcon data-emoji="toggler" className="emoji" onClick={togglePickerVisible} />
       </Styled>

src/react-app-env.d.ts

@@ -62,6 +62,8 @@ declare module "*.module.css" {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
+declare module '@emoji-mart/react';
+
 interface Window {
   ethereum: any;
 }

src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, lazy } from "react";
+import { useEffect, lazy } from "react";
 import { Route, Routes, HashRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import toast from "react-hot-toast";
@@ -22,12 +22,14 @@ const SettingChannelPage = lazy(() => import("./settingChannel"));
 const SettingPage = lazy(() => import("./setting"));
 const ResourceManagement = lazy(() => import("./resources"));
 const GuestLogin = lazy(() => import("./guest"));
+const ChatPage = lazy(() => import("./chat"));
+const HomePage = lazy(() => import("./home"));
 import RequireAuth from "../common/component/RequireAuth";
 import RequireNoAuth from "../common/component/RequireNoAuth";
 import Meta from "../common/component/Meta";
-import HomePage from "./home";
-import ChatPage from "./chat";
-import Loading from "../common/component/Loading";
+// import HomePage from "./home";
+// import ChatPage from "./chat";
+import LazyIt from './lazy';
 import store, { useAppSelector } from "../app/store";
 let toastId: string;
 const PageRoutes = () => {
@@ -49,137 +51,145 @@ const PageRoutes = () => {
 
   return (
     <HashRouter>
-      <Suspense fallback={<Loading fullscreen={true} />}>
-        <Routes>
-          <Route path="/guest_login" element={<GuestLogin />} />
-          <Route path="/cb/:type/:payload" element={<CallbackPage />} />
-          <Route path="/oauth/:token" element={<OAuthPage />} />
-          <Route
-            path="/login"
-            element={
+      <Routes>
+        <Route path="/guest_login" element={<LazyIt><GuestLogin /></LazyIt>} />
+        <Route path="/cb/:type/:payload" element={<LazyIt><CallbackPage /></LazyIt>} />
+        <Route path="/oauth/:token" element={<LazyIt><OAuthPage /></LazyIt>} />
+        <Route
+          path="/login"
+          element={
+            <LazyIt>
               <RequireNoAuth>
                 <LoginPage />
               </RequireNoAuth>
-            }
-          />
-          <Route
-            path="/send_magic_link"
-            element={
+            </LazyIt>
+          }
+        />
+        <Route
+          path="/send_magic_link"
+          element={
+            <LazyIt>
               <RequireNoAuth>
                 <SendMagicLinkPage />
               </RequireNoAuth>
-            }
-          />
-          <Route
-            path="/register"
-            element={
+            </LazyIt>
+          }
+        />
+        <Route
+          path="/register"
+          element={
+            <LazyIt>
               <RequireNoAuth>
                 <RegBasePage />
               </RequireNoAuth>
-            }
-          >
-            <Route index element={<RegPage />} />
-            <Route path="set_name">
-              <Route index element={<RegWithUsernamePage />} />
-              <Route path=":from" element={<RegWithUsernamePage />} />
-            </Route>
+            </LazyIt>
+          }
+        >
+          <Route index element={<LazyIt><RegPage /></LazyIt>} />
+          <Route path="set_name">
+            <Route index element={<LazyIt><RegWithUsernamePage /></LazyIt>} />
+            <Route path=":from" element={<LazyIt><RegWithUsernamePage /></LazyIt>} />
           </Route>
-          <Route
-            path="/email_login"
-            element={
+        </Route>
+        <Route
+          path="/email_login"
+          element={
+            <LazyIt>
               <RequireNoAuth>
                 <SendMagicLinkPage />
               </RequireNoAuth>
-            }
-          />
-          <Route path="/invite" element={<InvitePage />} />
-          <Route path="/onboarding" element={<OnboardingPage />} />
+            </LazyIt>
+          }
+        />
+        <Route path="/invite" element={<LazyIt><InvitePage /></LazyIt>} />
+        <Route path="/onboarding" element={<LazyIt><OnboardingPage /></LazyIt>} />
 
-          <Route
-            key={"main"}
-            path="/"
-            element={
+        <Route
+          key={"main"}
+          path="/"
+          element={
+            <LazyIt>
               <RequireAuth>
                 <HomePage />
               </RequireAuth>
-            }
-          >
-            <Route path="setting">
-              <Route
-                index
-                element={
-                  <Suspense fallback={<Loading />}>
-                    <SettingPage />
-                  </Suspense>
-                }
-              />
-              <Route path="channel/:cid" element={<SettingChannelPage />} />
-            </Route>
+            </LazyIt>
+          }
+        >
+          <Route path="setting">
             <Route
               index
               element={
-                // <Suspense fallback={<Loading />}>
-                <ChatPage />
-                // </Suspense>
+                <LazyIt>
+                  <SettingPage />
+                </LazyIt>
               }
             />
-            <Route path="chat">
-              <Route index element={<ChatPage />} />
-              <Route
-                path="channel/:channel_id"
-                element={
-                  // <Suspense fallback={<Loading />}>
-                  <ChatPage />
-                  // </Suspense>
-                }
-              />
-              <Route
-                path="dm/:user_id"
-                element={
-                  // <Suspense fallback={<Loading />}>
-                  <ChatPage />
-                  // </Suspense>
-                }
-              />
-            </Route>
-            <Route path="users">
-              <Route
-                index
-                element={
-                  <Suspense fallback={<Loading />}>
-                    <UsersPage />
-                  </Suspense>
-                }
-              />
-              <Route
-                path=":user_id"
-                element={
-                  <Suspense fallback={<Loading />}>
-                    <UsersPage />
-                  </Suspense>
-                }
-              />
-            </Route>
-            <Route
-              path="favs"
-              element={
-                <Suspense fallback={<Loading />}>
-                  <FavoritesPage />
-                </Suspense>
-              }
-            ></Route>
-            <Route
-              path="files"
-              element={
-                <Suspense fallback={<Loading />}>
-                  <ResourceManagement fileMessages={fileMessages} />
-                </Suspense>
-              }
-            ></Route>
+            <Route path="channel/:cid" element={<LazyIt><SettingChannelPage /></LazyIt>} />
           </Route>
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
-      </Suspense>
+          <Route
+            index
+            element={
+              <LazyIt>
+                <ChatPage />
+              </LazyIt>
+            }
+          />
+          <Route path="chat">
+            <Route index element={<LazyIt><ChatPage /></LazyIt>} />
+            <Route
+              path="channel/:channel_id"
+              element={
+                <LazyIt>
+                  <ChatPage />
+                </LazyIt>
+              }
+            />
+            <Route
+              path="dm/:user_id"
+              element={
+                <LazyIt>
+                  <ChatPage />
+                </LazyIt>
+              }
+            />
+          </Route>
+          <Route path="users">
+            <Route
+              index
+              element={
+                <LazyIt>
+                  <UsersPage />
+                </LazyIt>
+              }
+            />
+            <Route
+              path=":user_id"
+              element={
+                <LazyIt>
+                  <UsersPage />
+                </LazyIt>
+              }
+            />
+          </Route>
+          <Route
+            path="favs"
+            element={
+              <LazyIt>
+                <FavoritesPage />
+              </LazyIt>
+            }
+          ></Route>
+          <Route
+            path="files"
+            element={
+              <LazyIt>
+                <ResourceManagement fileMessages={fileMessages} />
+              </LazyIt>
+            }
+          ></Route>
+        </Route>
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
     </HashRouter>
   );
 };