chore: add emoji to projects list (#2472)

web/components/issues/select/project.tsx

@@ -1,7 +1,11 @@
-// hooks
+import { useRouter } from "next/router";
-import useProjects from "hooks/use-projects";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { CustomSelect } from "components/ui";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
 // icons
 import { Clipboard } from "lucide-react";
 
@@ -10,17 +14,39 @@ export interface IssueProjectSelectProps {
   onChange: (value: string) => void;
 }
 
-export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({ value, onChange }) => {
+export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((props) => {
-  const { projects } = useProjects();
+  const { value, onChange } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
+  const selectedProject = projects?.find((i) => i.id === value);
 
   return (
     <CustomSelect
       value={value}
       label={
+        selectedProject ? (
+          <div className="flex items-center gap-1.5">
+            <span className="grid place-items-center">
+              {selectedProject.emoji
+                ? renderEmoji(selectedProject.emoji)
+                : selectedProject.icon_prop
+                ? renderEmoji(selectedProject.icon_prop)
+                : null}
+            </span>
+            <div className="truncate">{selectedProject.identifier}</div>
+          </div>
+        ) : (
           <>
             <Clipboard className="h-3 w-3" />
-          <span className="block truncate">{projects?.find((i) => i.id === value)?.identifier ?? "Project"}</span>
+            <div>Select Project</div>
           </>
+        )
       }
       onChange={(val: string) => onChange(val)}
       noChevron
@@ -29,7 +55,16 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({ value, o
         projects.length > 0 ? (
           projects.map((project) => (
             <CustomSelect.Option key={project.id} value={project.id}>
+              <div className="flex items-center gap-1.5">
+                <span className="grid place-items-center">
+                  {project.emoji
+                    ? renderEmoji(project.emoji)
+                    : project.icon_prop
+                    ? renderEmoji(project.icon_prop)
+                    : null}
+                </span>
                 <>{project.name}</>
+              </div>
             </CustomSelect.Option>
           ))
         ) : (
@@ -40,4 +75,4 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({ value, o
       )}
     </CustomSelect>
   );
-};
+});