From f322bcc4b0998730b07c330c90fdbf987294992b Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <dakshesh.jain14@gmail.com>
Date: Wed, 21 Dec 2022 11:31:51 +0530
Subject: [PATCH 1/2] fix: mutation on set new default button

refractor: moved all filter option to constants file, style: UI/UX improvement on create-update-issue model when there's an similar issue
---
 .../create-update-issue-modal/index.tsx       | 48 ++++++++++---------
 apps/app/constants/index.ts                   | 35 ++++++++++++++
 apps/app/contexts/theme.context.tsx           | 14 +++---
 .../projects/[projectId]/cycles/[cycleId].tsx | 33 +------------
 .../projects/[projectId]/issues/index.tsx     | 36 ++------------
 5 files changed, 71 insertions(+), 95 deletions(-)

diff --git a/apps/app/components/project/issues/create-update-issue-modal/index.tsx b/apps/app/components/project/issues/create-update-issue-modal/index.tsx
index a527cc588..275a098bc 100644
--- a/apps/app/components/project/issues/create-update-issue-modal/index.tsx
+++ b/apps/app/components/project/issues/create-update-issue-modal/index.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
 // next
-import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
+import Link from "next/link";
+import { useRouter } from "next/router";
 // swr
 import { mutate } from "swr";
 // react hook form
@@ -244,8 +245,6 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
     return () => setMostSimilarIssue(undefined);
   }, []);
 
-  // console.log(watch("parent"));
-
   return (
     <>
       {activeProject && (
@@ -323,27 +322,30 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
                             {mostSimilarIssue && (
                               <div className="flex items-center gap-x-2">
                                 <p className="text-sm text-gray-500">
-                                  Did you mean{" "}
-                                  <button
-                                    type="button"
-                                    onClick={() => {
-                                      setMostSimilarIssue(undefined);
-                                      router.push(
-                                        `/projects/${activeProject?.id}/issues/${mostSimilarIssue}`
-                                      );
-                                      handleClose();
-                                      resetForm();
-                                    }}
+                                  <Link
+                                    href={`/projects/${activeProject?.id}/issues/${mostSimilarIssue}`}
                                   >
-                                    <span className="italic">
-                                      {
-                                        issues?.results.find(
-                                          (issue) => issue.id === mostSimilarIssue
-                                        )?.name
-                                      }
-                                    </span>
-                                  </button>
-                                  ?
+                                    <a target="_blank" type="button" className="inline text-left">
+                                      <span>Did you mean </span>
+                                      <span className="italic">
+                                        {
+                                          issues?.results.find((i) => i.id === mostSimilarIssue)
+                                            ?.project_detail.identifier
+                                        }
+                                        -
+                                        {
+                                          issues?.results.find((i) => i.id === mostSimilarIssue)
+                                            ?.sequence_id
+                                        }
+                                        :{" "}
+                                        {
+                                          issues?.results.find((i) => i.id === mostSimilarIssue)
+                                            ?.name
+                                        }{" "}
+                                      </span>
+                                      ?
+                                    </a>
+                                  </Link>{" "}
                                 </p>
                                 <button
                                   type="button"
diff --git a/apps/app/constants/index.ts b/apps/app/constants/index.ts
index 0e9a67788..a53e6eda7 100644
--- a/apps/app/constants/index.ts
+++ b/apps/app/constants/index.ts
@@ -1,3 +1,5 @@
+import type { IIssue, NestedKeyOf } from "types";
+
 export const PRIORITIES = ["urgent", "high", "medium", "low"];
 
 export const ROLE = {
@@ -16,3 +18,36 @@ export const GROUP_CHOICES = {
   completed: "Completed",
   cancelled: "Cancelled",
 };
+
+export const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
+  { name: "State", key: "state_detail.name" },
+  { name: "Priority", key: "priority" },
+  // { name: "Cycle", key: "issue_cycle.cycle_detail.name" },
+  { name: "Created By", key: "created_by" },
+  { name: "None", key: null },
+];
+
+export const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
+  { name: "Last created", key: "created_at" },
+  { name: "Last updated", key: "updated_at" },
+  { name: "Priority", key: "priority" },
+  { name: "None", key: null },
+];
+
+export const filterIssueOptions: Array<{
+  name: string;
+  key: "activeIssue" | "backlogIssue" | null;
+}> = [
+  {
+    name: "All",
+    key: null,
+  },
+  {
+    name: "Active Issues",
+    key: "activeIssue",
+  },
+  {
+    name: "Backlog Issues",
+    key: "backlogIssue",
+  },
+];
diff --git a/apps/app/contexts/theme.context.tsx b/apps/app/contexts/theme.context.tsx
index fb9085fe0..313b8882c 100644
--- a/apps/app/contexts/theme.context.tsx
+++ b/apps/app/contexts/theme.context.tsx
@@ -258,8 +258,10 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
 
   const setNewDefaultView = useCallback(() => {
     if (!activeWorkspace || !activeProject) return;
-    setNewDefault(activeWorkspace.slug, activeProject.id, state);
-  }, [activeProject, activeWorkspace, state]);
+    setNewDefault(activeWorkspace.slug, activeProject.id, state).then(() => {
+      mutateMyViewProps();
+    });
+  }, [activeProject, activeWorkspace, state, mutateMyViewProps]);
 
   const resetToDefault = useCallback(() => {
     dispatch({
@@ -267,12 +269,8 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
       payload: myViewProps?.default_props,
     });
     if (!activeWorkspace || !activeProject) return;
-    saveDataToServer(activeWorkspace.slug, activeProject.id, myViewProps?.default_props).then(
-      () => {
-        mutateMyViewProps();
-      }
-    );
-  }, [activeProject, activeWorkspace, myViewProps, mutateMyViewProps]);
+    saveDataToServer(activeWorkspace.slug, activeProject.id, myViewProps?.default_props);
+  }, [activeProject, activeWorkspace, myViewProps]);
 
   useEffect(() => {
     dispatch({
diff --git a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
index 02978b3cf..7f0e908aa 100644
--- a/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
@@ -14,6 +14,8 @@ import CyclesBoardView from "components/project/cycles/board-view";
 import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 import CycleIssuesListModal from "components/project/cycles/cycle-issues-list-modal";
 import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
+// constants
+import { filterIssueOptions, groupByOptions, orderByOptions } from "constants/";
 // services
 import issuesServices from "lib/services/issues.service";
 import cycleServices from "lib/services/cycles.service";
@@ -36,37 +38,6 @@ import { CYCLE_ISSUES, PROJECT_MEMBERS } from "constants/fetch-keys";
 // common
 import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
 
-const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
-  { name: "State", key: "state_detail.name" },
-  { name: "Priority", key: "priority" },
-  { name: "Created By", key: "created_by" },
-  { name: "None", key: null },
-];
-
-const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> }> = [
-  { name: "Last created", key: "created_at" },
-  { name: "Last updated", key: "updated_at" },
-  { name: "Priority", key: "priority" },
-];
-
-const filterIssueOptions: Array<{
-  name: string;
-  key: "activeIssue" | "backlogIssue" | null;
-}> = [
-  {
-    name: "All",
-    key: null,
-  },
-  {
-    name: "Active Issues",
-    key: "activeIssue",
-  },
-  {
-    name: "Backlog Issues",
-    key: "backlogIssue",
-  },
-];
-
 const SingleCycle: React.FC = () => {
   const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
   const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
diff --git a/apps/app/pages/projects/[projectId]/issues/index.tsx b/apps/app/pages/projects/[projectId]/issues/index.tsx
index 585e98d75..1dd8cab21 100644
--- a/apps/app/pages/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/projects/[projectId]/issues/index.tsx
@@ -17,6 +17,8 @@ import useIssuesProperties from "lib/hooks/useIssuesProperties";
 import { PROJECT_MEMBERS } from "constants/api-routes";
 // services
 import projectService from "lib/services/project.service";
+// constants
+import { filterIssueOptions, groupByOptions, orderByOptions } from "constants/";
 // commons
 import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
 // layouts
@@ -42,42 +44,10 @@ import {
 import { ChevronDownIcon, ListBulletIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
 import { PlusIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
 // types
-import type { IIssue, Properties, NestedKeyOf, IssueResponse } from "types";
+import type { IIssue, Properties, IssueResponse } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
-const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
-  { name: "State", key: "state_detail.name" },
-  { name: "Priority", key: "priority" },
-  // { name: "Cycle", key: "issue_cycle.cycle_detail.name" },
-  { name: "Created By", key: "created_by" },
-  { name: "None", key: null },
-];
-
-const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> }> = [
-  { name: "Last created", key: "created_at" },
-  { name: "Last updated", key: "updated_at" },
-  { name: "Priority", key: "priority" },
-];
-
-const filterIssueOptions: Array<{
-  name: string;
-  key: "activeIssue" | "backlogIssue" | null;
-}> = [
-  {
-    name: "All",
-    key: null,
-  },
-  {
-    name: "Active Issues",
-    key: "activeIssue",
-  },
-  {
-    name: "Backlog Issues",
-    key: "backlogIssue",
-  },
-];
-
 const ProjectIssues: NextPage = () => {
   const [isOpen, setIsOpen] = useState(false);
 

From 18cf044e3b4b86c7b7c044a27bcd57e0c440cac1 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <dakshesh.jain14@gmail.com>
Date: Wed, 21 Dec 2022 11:46:57 +0530
Subject: [PATCH 2/2] feat: random emoji will be chosen if none provided

---
 apps/app/constants/common.ts            | 20 ++++++++++++++++++++
 apps/app/ui/emoji-icon-picker/index.tsx |  6 ++++++
 2 files changed, 26 insertions(+)

diff --git a/apps/app/constants/common.ts b/apps/app/constants/common.ts
index 036aff99c..00335d05e 100644
--- a/apps/app/constants/common.ts
+++ b/apps/app/constants/common.ts
@@ -216,3 +216,23 @@ export const createSimilarString = (str: string) => {
 
   return shuffled;
 };
+
+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)];
+};
diff --git a/apps/app/ui/emoji-icon-picker/index.tsx b/apps/app/ui/emoji-icon-picker/index.tsx
index c540edc6f..dbe8abeee 100644
--- a/apps/app/ui/emoji-icon-picker/index.tsx
+++ b/apps/app/ui/emoji-icon-picker/index.tsx
@@ -3,6 +3,8 @@ import React, { useEffect, useState, useRef } from "react";
 import { Tab, Transition, Popover } from "@headlessui/react";
 // hooks
 import useOutsideClickDetector from "lib/hooks/useOutsideClickDetector";
+// common
+import { getRandomEmoji } from "constants/common";
 // emoji
 import emojis from "./emojis.json";
 // helpers
@@ -36,6 +38,10 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
     setIsOpen(false);
   });
 
+  useEffect(() => {
+    if (!value) onChange(getRandomEmoji());
+  }, [value, onChange]);
+
   return (
     <Popover className="relative" ref={ref}>
       <Popover.Button