fix: create issue modal bugs (#257)

apps/app/components/core/bulk-delete-issues-modal.tsx

@@ -148,12 +148,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
                         "delete_issue_ids",
                         selectedIssues.filter((i) => i !== val)
                       );
-                    else {
-                      const newToDelete = selectedIssues;
-                      newToDelete.push(val);
-
-                      setValue("delete_issue_ids", newToDelete);
-                    }
+                    else setValue("delete_issue_ids", [...selectedIssues, val]);
                   }}
                 >
                   <div className="relative m-1">

apps/app/components/core/sidebar/sidebar-progress-stats.tsx

@@ -1,21 +1,26 @@
 import React from "react";
-import { Tab } from "@headlessui/react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
+
 import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Tab } from "@headlessui/react";
+// services
+import issuesServices from "services/issues.service";
+import projectService from "services/project.service";
+// components
+import SingleProgressStats from "components/core/sidebar/single-progress-stats";
 // ui
-import SingleProgressStats from "./single-progress-stats";
 import { Avatar } from "components/ui";
 // icons
 import User from "public/user.png";
 // types
 import { IIssue, IIssueLabels } from "types";
-// constants
+// fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
-// services
-import issuesServices from "services/issues.service";
-import projectService from "services/project.service";
-
+// types
 type Props = {
   groupedIssues: any;
   issues: IIssue[];

apps/app/components/issues/sidebar-select/blocked.tsx

@@ -183,12 +183,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                             "blocked_issue_ids",
                             selectedIssues.filter((i) => i !== val)
                           );
-                        else {
-                          const newBlocked = selectedIssues;
-                          newBlocked.push(val);
-
-                          setValue("blocked_issue_ids", newBlocked);
-                        }
+                        else setValue("blocked_issue_ids", [...selectedIssues, val]);
                       }}
                     >
                       <div className="relative m-1">

apps/app/components/issues/sidebar-select/blocker.tsx

@@ -184,12 +184,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                           "blocker_issue_ids",
                           selectedIssues.filter((i) => i !== val)
                         );
-                      else {
-                        const newBlockers = selectedIssues;
-                        newBlockers.push(val);
-
-                        setValue("blocker_issue_ids", newBlockers);
-                      }
+                      else setValue("blocker_issue_ids", [...selectedIssues, val]);
                     }}
                   >
                     <div className="relative m-1">

apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx

@@ -7,18 +7,19 @@ import { mutate } from "swr";
 
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// icons
-import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/react/24/outline";
-
-// progress-bar
+// react-circular-progressbar
 import { CircularProgressbar } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
 // ui
 import { Loader, CustomDatePicker } from "components/ui";
-import "react-circular-progressbar/dist/styles.css";
 // hooks
 import useToast from "hooks/use-toast";
 // services
 import cyclesService from "services/cycles.service";
+// components
+import SidebarProgressStats from "components/core/sidebar/sidebar-progress-stats";
+// icons
+import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
@@ -26,7 +27,6 @@ import { groupBy } from "helpers/array.helper";
 import { CycleIssueResponse, ICycle, IIssue } from "types";
 // fetch-keys
 import { CYCLE_DETAILS } from "constants/fetch-keys";
-import SidebarProgressStats from "components/core/sidebar/sidebar-progress-stats";
 
 type Props = {
   issues: IIssue[];

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -14,7 +14,6 @@ import AppLayout from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
-import { CreateUpdateIssueModal } from "components/issues";
 import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
 import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar";
 // services
@@ -25,28 +24,20 @@ import projectService from "services/project.service";
 import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
-import { CycleIssueResponse, IIssue, IIssueLabels, SelectIssue, UserAuth } from "types";
+import { CycleIssueResponse, UserAuth } from "types";
 // fetch-keys
 import {
   CYCLE_ISSUES,
   CYCLE_LIST,
   PROJECT_ISSUES_LIST,
   PROJECT_DETAILS,
-  PROJECT_ISSUE_LABELS,
   CYCLE_DETAILS,
-  PROJECT_MEMBERS,
 } from "constants/fetch-keys";
 
 const SingleCycle: React.FC<UserAuth> = (props) => {
-  const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
-  const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
   const [cycleSidebar, setCycleSidebar] = useState(true);
 
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | null
-  >(null);
-
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
@@ -104,18 +95,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
     cycle: cycleId as string,
   }));
 
-  const openCreateIssueModal = (
-    issue?: IIssue,
-    actionType: "create" | "edit" | "delete" = "create"
-  ) => {
-    if (issue) {
-      setPreloadedData(null);
-      setSelectedIssues({ ...issue, actionType });
-    } else setSelectedIssues(null);
-
-    setIsIssueModalOpen(true);
-  };
-
   const openIssuesListModal = () => {
     setCycleIssuesListModal(true);
   };
@@ -136,16 +115,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
 
   return (
     <IssueViewContextProvider>
-      <CreateUpdateIssueModal
-        isOpen={isIssueModalOpen && selectedIssues?.actionType !== "delete"}
-        data={selectedIssues}
-        prePopulateData={
-          preloadedData
-            ? { cycle: cycleId as string, ...preloadedData }
-            : { cycle: cycleId as string, ...selectedIssues }
-        }
-        handleClose={() => setIsIssueModalOpen(false)}
-      />
       <ExistingIssuesListModal
         isOpen={cycleIssuesListModal}
         handleClose={() => setCycleIssuesListModal(false)}
@@ -226,7 +195,12 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
                   title="Create a new issue"
                   description="Click to create a new issue inside the cycle."
                   Icon={PlusIcon}
-                  action={openCreateIssueModal}
+                  action={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "c",
+                    });
+                    document.dispatchEvent(e);
+                  }}
                 />
                 <EmptySpaceItem
                   title="Add an existing issue"

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -245,7 +245,12 @@ const SingleModule: React.FC<UserAuth> = (props) => {
                   title="Create a new issue"
                   description="Click to create a new issue inside the module."
                   Icon={PlusIcon}
-                  action={openCreateIssueModal}
+                  action={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "c",
+                    });
+                    document.dispatchEvent(e);
+                  }}
                 />
                 <EmptySpaceItem
                   title="Add an existing issue"