refactor: upgrade emoji lib

package.json

@@ -4,9 +4,9 @@
   "private": true,
   "homepage": "https://voce.chat",
   "dependencies": {
-    "@emoji-mart/data": "^1.0.8",
+    "@emoji-mart/react": "^1.0.1",
     "@metamask/onboarding": "^1.0.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.9",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@react-oauth/google": "^0.5.0",
     "@reduxjs/toolkit": "^1.9.0",
     "@svgr/webpack": "^6.5.1",
@@ -28,8 +28,8 @@
     "dayjs": "^1.11.6",
     "dotenv": "^16.0.3",
     "dotenv-expand": "^9.0.0",
-    "emoji-mart": "3.0.1",
-    "eslint": "^8.27.0",
+    "emoji-mart": "5.3.3",
+    "eslint": "^8.28.0",
     "file-loader": "^6.2.0",
     "firebase": "^9.14.0",
     "fs-extra": "^10.1.0",
@@ -71,7 +71,7 @@
     "style-loader": "^3.3.1",
     "styled-components": "^5.3.6",
     "styled-reset": "^4.4.2",
-    "swiper": "^8.4.4",
+    "swiper": "^8.4.5",
     "terser-webpack-plugin": "^5.3.6",
     "tippy.js": "^6.3.7",
     "typescript": "^4.9.3",
@@ -120,16 +120,16 @@
   "devDependencies": {
     "@babel/core": "^7.20.2",
     "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.2.0",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
     "@types/emoji-mart": "^3.0.9",
     "@types/masonry-layout": "^4.2.5",
     "@types/react-helmet": "^6.1.5",
     "@types/react-linkify": "^1.0.1",
     "@types/react-syntax-highlighter": "^15.5.5",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
     "@welldone-software/why-did-you-render": "^7.0.1",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^9.1.0",
@@ -138,7 +138,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "gh-pages": "^4.0.0",
     "husky": "^8.0.2",
@@ -148,7 +148,7 @@
     "postcss": "^8.4.19",
     "postcss-loader": "^7.0.1",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "tailwindcss": "^3.2.4"
   }
 }

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,96 +51,105 @@ 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="/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>
+            </LazyIt>
           }
         />
         <Route
           path="/send_magic_link"
           element={
+            <LazyIt>
               <RequireNoAuth>
                 <SendMagicLinkPage />
               </RequireNoAuth>
+            </LazyIt>
           }
         />
         <Route
           path="/register"
           element={
+            <LazyIt>
               <RequireNoAuth>
                 <RegBasePage />
               </RequireNoAuth>
+            </LazyIt>
           }
         >
-            <Route index element={<RegPage />} />
+          <Route index element={<LazyIt><RegPage /></LazyIt>} />
           <Route path="set_name">
-              <Route index element={<RegWithUsernamePage />} />
-              <Route path=":from" element={<RegWithUsernamePage />} />
+            <Route index element={<LazyIt><RegWithUsernamePage /></LazyIt>} />
+            <Route path=":from" element={<LazyIt><RegWithUsernamePage /></LazyIt>} />
           </Route>
         </Route>
         <Route
           path="/email_login"
           element={
+            <LazyIt>
               <RequireNoAuth>
                 <SendMagicLinkPage />
               </RequireNoAuth>
+            </LazyIt>
           }
         />
-          <Route path="/invite" element={<InvitePage />} />
-          <Route path="/onboarding" element={<OnboardingPage />} />
+        <Route path="/invite" element={<LazyIt><InvitePage /></LazyIt>} />
+        <Route path="/onboarding" element={<LazyIt><OnboardingPage /></LazyIt>} />
 
         <Route
           key={"main"}
           path="/"
           element={
+            <LazyIt>
               <RequireAuth>
                 <HomePage />
               </RequireAuth>
+            </LazyIt>
           }
         >
           <Route path="setting">
             <Route
               index
               element={
-                  <Suspense fallback={<Loading />}>
+                <LazyIt>
                   <SettingPage />
-                  </Suspense>
+                </LazyIt>
               }
             />
-              <Route path="channel/:cid" element={<SettingChannelPage />} />
+            <Route path="channel/:cid" element={<LazyIt><SettingChannelPage /></LazyIt>} />
           </Route>
           <Route
             index
             element={
-                // <Suspense fallback={<Loading />}>
+              <LazyIt>
                 <ChatPage />
-                // </Suspense>
+              </LazyIt>
             }
           />
           <Route path="chat">
-              <Route index element={<ChatPage />} />
+            <Route index element={<LazyIt><ChatPage /></LazyIt>} />
             <Route
               path="channel/:channel_id"
               element={
-                  // <Suspense fallback={<Loading />}>
+                <LazyIt>
                   <ChatPage />
-                  // </Suspense>
+                </LazyIt>
               }
             />
             <Route
               path="dm/:user_id"
               element={
-                  // <Suspense fallback={<Loading />}>
+                <LazyIt>
                   <ChatPage />
-                  // </Suspense>
+                </LazyIt>
               }
             />
           </Route>
@@ -146,40 +157,39 @@ const PageRoutes = () => {
             <Route
               index
               element={
-                  <Suspense fallback={<Loading />}>
+                <LazyIt>
                   <UsersPage />
-                  </Suspense>
+                </LazyIt>
               }
             />
             <Route
               path=":user_id"
               element={
-                  <Suspense fallback={<Loading />}>
+                <LazyIt>
                   <UsersPage />
-                  </Suspense>
+                </LazyIt>
               }
             />
           </Route>
           <Route
             path="favs"
             element={
-                <Suspense fallback={<Loading />}>
+              <LazyIt>
                 <FavoritesPage />
-                </Suspense>
+              </LazyIt>
             }
           ></Route>
           <Route
             path="files"
             element={
-                <Suspense fallback={<Loading />}>
+              <LazyIt>
                 <ResourceManagement fileMessages={fileMessages} />
-                </Suspense>
+              </LazyIt>
             }
           ></Route>
         </Route>
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
-      </Suspense>
     </HashRouter>
   );
 };