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

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}`}
                                   >
+                                    <a target="_blank" type="button" className="inline text-left">
+                                      <span>Did you mean </span>
                                       <span className="italic">
                                         {
-                                        issues?.results.find(
-                                          (issue) => issue.id === mostSimilarIssue
-                                        )?.name
+                                          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>
-                                  </button>
                                       ?
+                                    </a>
+                                  </Link>{" "}
                                 </p>
                                 <button
                                   type="button"

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",
+  },
+];

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({

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>();

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);