fix: emoji render function (#1484)

* fix: emoji render function

* fix: emoji render function

apps/app/components/analytics/custom-analytics/sidebar.tsx

@@ -23,6 +23,7 @@ import {
 import { ContrastIcon, LayerDiagonalIcon } from "components/icons";
 // helpers
 import { renderShortDate } from "helpers/date-time.helper";
+import { renderEmoji } from "helpers/emoji.helper";
 // types
 import {
   IAnalyticsParams,
@@ -221,7 +222,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                         <div className="text-sm flex items-center gap-1">
                           {project.emoji ? (
                             <span className="grid h-6 w-6 flex-shrink-0 place-items-center">
-                              {String.fromCodePoint(parseInt(project.emoji))}
+                              {renderEmoji(project.emoji)}
                             </span>
                           ) : project.icon_prop ? (
                             <div className="h-6 w-6 grid place-items-center flex-shrink-0">
@@ -336,7 +337,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                   <div className="flex items-center gap-1">
                     {projectDetails?.emoji ? (
                       <div className="grid h-6 w-6 flex-shrink-0 place-items-center">
-                        {String.fromCodePoint(parseInt(projectDetails.emoji))}
+                        {renderEmoji(projectDetails.emoji)}
                       </div>
                     ) : projectDetails?.icon_prop ? (
                       <div className="h-6 w-6 grid place-items-center flex-shrink-0">

apps/app/components/emoji-icon-picker/index.tsx

@@ -10,7 +10,7 @@ import emojis from "./emojis.json";
 import icons from "./icons.json";
 // helpers
 import { getRecentEmojis, saveRecentEmoji } from "./helpers";
-import { getRandomEmoji } from "helpers/common.helper";
+import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
 // hooks
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
@@ -101,7 +101,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                               setIsOpen(false);
                             }}
                           >
-                            {String.fromCodePoint(parseInt(emoji))}
+                            {renderEmoji(emoji)}
                           </button>
                         ))}
                       </div>
@@ -121,7 +121,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                             setIsOpen(false);
                           }}
                         >
-                          {String.fromCodePoint(parseInt(emoji))}
+                          {renderEmoji(emoji)}
                         </button>
                       ))}
                     </div>

apps/app/components/project/create-project-modal.tsx

@@ -21,7 +21,7 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
 // helpers
-import { getRandomEmoji } from "helpers/common.helper";
+import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
 // types
 import { ICurrentUserResponse, IProject } from "types";
 // fetch-keys
@@ -232,7 +232,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                                       {value.name}
                                     </span>
                                   ) : (
-                                    String.fromCodePoint(parseInt(value))
+                                    renderEmoji(value)
                                   )
                                 ) : (
                                   "Icon"

apps/app/components/project/single-project-card.tsx

@@ -24,6 +24,7 @@ import {
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
 // types
 import type { IFavoriteProject, IProject } from "types";
 // fetch-keys
@@ -184,7 +185,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                   <h3 className="text-1.5xl font-medium text-brand-base">{project.name}</h3>
                   {project.emoji ? (
                     <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                      {String.fromCodePoint(parseInt(project.emoji))}
+                      {renderEmoji(project.emoji)}
                     </span>
                   ) : project.icon_prop ? (
                     <span

apps/app/components/project/single-sidebar-project.tsx

@@ -22,6 +22,7 @@ import {
 } from "components/icons";
 // helpers
 import { truncateText } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
 // types
 import { IProject } from "types";
 
@@ -92,7 +93,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
               <div className="flex items-center gap-x-2">
                 {project.emoji ? (
                   <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                    {String.fromCodePoint(parseInt(project.emoji))}
+                    {renderEmoji(project.emoji)}
                   </span>
                 ) : project.icon_prop ? (
                   <div className="h-7 w-7 grid place-items-center">

apps/app/helpers/common.helper.ts

@@ -16,23 +16,3 @@ export const debounce = (func: any, wait: number, immediate: boolean = false) =>
     if (callNow) func(...args);
   };
 };
-
-export const getRandomEmoji = () => {
-  const emojis = [
-    "8986",
-    "9200",
-    "128204",
-    "127773",
-    "127891",
-    "127947",
-    "128076",
-    "128077",
-    "128187",
-    "128188",
-    "128512",
-    "128522",
-    "128578",
-  ];
-
-  return emojis[Math.floor(Math.random() * emojis.length)];
-};

apps/app/helpers/emoji.helper.ts

@@ -0,0 +1,25 @@
+export const getRandomEmoji = () => {
+  const emojis = [
+    "8986",
+    "9200",
+    "128204",
+    "127773",
+    "127891",
+    "127947",
+    "128076",
+    "128077",
+    "128187",
+    "128188",
+    "128512",
+    "128522",
+    "128578",
+  ];
+
+  return emojis[Math.floor(Math.random() * emojis.length)];
+};
+
+export const renderEmoji = (emoji: string) => {
+  if (!emoji) return;
+
+  return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
+};

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx

@@ -27,6 +27,8 @@ import {
   DangerButton,
 } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
 // types
 import { IProject, IWorkspace } from "types";
 import type { NextPage } from "next";
@@ -186,7 +188,7 @@ const GeneralSettings: NextPage = () => {
                                 {value.name}
                               </span>
                             ) : (
-                              String.fromCodePoint(parseInt(value))
+                              renderEmoji(value)
                             )
                           ) : (
                             "Icon"