refactor: removed unnecessary api calls

2024-06-14 14:31:34 +00:00 · 2023-02-05 22:01:23 +05:30 · 2023-02-05 22:01:23 +05:30 · 0e07c1e19f
commit 0e07c1e19f
parent d673aedf48
11 changed files with 182 additions and 211 deletions
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@ -34,7 +34,7 @@ type Props = {
 };

 export const SingleBoard: React.FC<Props> = ({
-  type = "issue",
+  type,
  provided,
  snapshot,
  bgColor,
@ -117,6 +117,7 @@ export const SingleBoard: React.FC<Props> = ({
                        {...provided.dragHandleProps}
                      >
                        <SingleBoardIssue
+                          type={type}
                          issue={childIssue}
                          properties={properties}
                          snapshot={snapshot}
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@ -15,7 +15,6 @@ import { TrashIcon } from "@heroicons/react/24/outline";
 // services
 import issuesService from "services/issues.service";
 import stateService from "services/state.service";
-import projectService from "services/project.service";
 // components
 import { AssigneesList, CustomDatePicker } from "components/ui";
 // helpers
@ -34,18 +33,11 @@ import {
 } from "types";
 // common
 import { PRIORITIES } from "constants/";
-import {
-  STATE_LIST,
-  PROJECT_DETAILS,
-  CYCLE_ISSUES,
-  MODULE_ISSUES,
-  PROJECT_ISSUES_LIST,
-} from "constants/fetch-keys";
+import { STATE_LIST, CYCLE_ISSUES, MODULE_ISSUES, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 import { getPriorityIcon } from "constants/global";

 type Props = {
  type?: string;
-  typeId?: string;
  issue: IIssue;
  properties: Properties;
  snapshot: DraggableStateSnapshot;
@ -57,7 +49,6 @@ type Props = {

 export const SingleBoardIssue: React.FC<Props> = ({
  type,
-  typeId,
  issue,
  properties,
  snapshot,
@ -67,7 +58,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
  userAuth,
 }) => {
  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;

  const { data: states } = useSWR(
    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
@ -76,19 +67,12 @@ export const SingleBoardIssue: React.FC<Props> = ({
      : null
  );

-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
-
  const partialUpdateIssue = (formData: Partial<IIssue>) => {
    if (!workspaceSlug || !projectId) return;

-    if (typeId) {
+    if (cycleId)
      mutate<CycleIssueResponse[]>(
-        CYCLE_ISSUES(typeId ?? ""),
+        CYCLE_ISSUES(cycleId as string),
        (prevData) => {
          const updatedIssues = (prevData ?? []).map((p) => {
            if (p.issue_detail.id === issue.id) {
@ -107,8 +91,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
        false
      );

+    if (moduleId)
      mutate<ModuleIssueResponse[]>(
-        MODULE_ISSUES(typeId ?? ""),
+        MODULE_ISSUES(moduleId as string),
        (prevData) => {
          const updatedIssues = (prevData ?? []).map((p) => {
            if (p.issue_detail.id === issue.id) {
@ -126,7 +111,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
        },
        false
      );
-    }

    mutate<IssueResponse>(
      PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
@ -143,10 +127,14 @@ export const SingleBoardIssue: React.FC<Props> = ({
    issuesService
      .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
      .then((res) => {
-        if (typeId) {
-          mutate(CYCLE_ISSUES(typeId ?? ""));
-          mutate(MODULE_ISSUES(typeId ?? ""));
-        }
+        mutate(
+          cycleId ? CYCLE_ISSUES(cycleId as string) : CYCLE_ISSUES(issue?.issue_cycle?.cycle ?? "")
+        );
+        mutate(
+          moduleId
+            ? MODULE_ISSUES(moduleId as string)
+            : MODULE_ISSUES(issue?.issue_module?.module ?? "")
+        );

        mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
      })
@ -179,7 +167,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
          <a>
            {properties.key && (
              <div className="mb-2 text-xs font-medium text-gray-500">
-                {projectDetails?.identifier}-{issue.sequence_id}
+                {issue.project_detail.identifier}-{issue.sequence_id}
              </div>
            )}
            <h5
@ -312,11 +300,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
              )}
            </Listbox>
          )}
-          {/* {properties.cycle && !typeId && (
-            <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-              {issue.issue_cycle ? issue.issue_cycle.cycle_detail.name : "None"}
-            </div>
-          )} */}
          {properties.due_date && (
            <div
              className={`group relative ${
--- a/apps/app/components/core/bulk-delete-issues-modal.tsx
+++ b/apps/app/components/core/bulk-delete-issues-modal.tsx
@ -1,27 +1,26 @@
-// react
 import React, { useState } from "react";
-// next
+
 import { useRouter } from "next/router";
-// swr
+
 import useSWR, { mutate } from "swr";
+
 // react hook form
 import { SubmitHandler, useForm } from "react-hook-form";
-// services
+// headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+// services
 import issuesServices from "services/issues.service";
-import projectService from "services/project.service";
 // hooks
 import useToast from "hooks/use-toast";
-// headless ui
 // ui
 import { Button } from "components/ui";
 // icons
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
 // types
 import { IIssue, IssueResponse } from "types";
 // fetch keys
-import { PROJECT_ISSUES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";

 type FormInput = {
  delete_issue_ids: string[];
@ -50,13 +49,6 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
      : null
  );

-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
-
  const { setToastAlert } = useToast();

  const {
@ -213,7 +205,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
                                  }}
                                />
                                <span className="flex-shrink-0 text-xs text-gray-500">
-                                  {projectDetails?.identifier}-{issue.sequence_id}
+                                  {issue.project_detail.identifier}-{issue.sequence_id}
                                </span>
                                <span>{issue.name}</span>
                              </div>
--- a/apps/app/components/core/existing-issues-list-modal.tsx
+++ b/apps/app/components/core/existing-issues-list-modal.tsx
@ -1,24 +1,17 @@
 import React, { useState } from "react";

-import { useRouter } from "next/router";
-
-import useSWR from "swr";
 // react-hook-form
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 // hooks
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
 import useToast from "hooks/use-toast";
-// services
-import projectService from "services/project.service";
 // headless ui
 // ui
 import { Button } from "components/ui";
 import { LayerDiagonalIcon } from "components/icons";
 // types
 import { IIssue } from "types";
-// fetch-keys
-import { PROJECT_DETAILS } from "constants/fetch-keys";

 type FormInput = {
  issues: string[];
@ -41,16 +34,6 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
 }) => {
  const [query, setQuery] = useState("");

-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
-
  const { setToastAlert } = useToast();

  const handleClose = () => {
@ -175,7 +158,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                          }}
                                        />
                                        <span className="flex-shrink-0 text-xs text-gray-500">
-                                          {projectDetails?.identifier}-{issue.sequence_id}
+                                          {issue.project_detail.identifier}-{issue.sequence_id}
                                        </span>
                                        {issue.name}
                                      </>
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@ -10,10 +10,11 @@ import { DropResult } from "react-beautiful-dnd";
 import issuesService from "services/issues.service";
 import stateService from "services/state.service";
 import projectService from "services/project.service";
+import modulesService from "services/modules.service";
 // hooks
 import useIssueView from "hooks/use-issue-view";
 // components
-import { AllLists, AllBoards } from "components/core";
+import { AllLists, AllBoards, ExistingIssuesListModal } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // types
 import {
@ -124,6 +125,7 @@ export const IssuesView: React.FC<Props> = ({
          });
      } else {
        const draggedItem = groupedByIssues[source.droppableId][source.index];
+        console.log(draggedItem);
        if (source.droppableId !== destination.droppableId) {
          const sourceGroup = source.droppableId; // source group id
          const destinationGroup = destination.droppableId; // destination group id
@ -217,6 +219,7 @@ export const IssuesView: React.FC<Props> = ({
                    ? MODULE_ISSUES(moduleId as string)
                    : MODULE_ISSUES(draggedItem.issue_module?.module ?? "")
                );
+
                mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
              });
          } else if (selectedGroup === "state_detail.name") {
@ -358,6 +361,54 @@ export const IssuesView: React.FC<Props> = ({
    setIssueToDelete(issue);
  };

+  const removeIssueFromCycle = (bridgeId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<CycleIssueResponse[]>(
+      CYCLE_ISSUES(cycleId as string),
+      (prevData) => prevData?.filter((p) => p.id !== bridgeId),
+      false
+    );
+
+    issuesService
+      .removeIssueFromCycle(
+        workspaceSlug as string,
+        projectId as string,
+        cycleId as string,
+        bridgeId
+      )
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  const removeIssueFromModule = (bridgeId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<ModuleIssueResponse[]>(
+      MODULE_ISSUES(moduleId as string),
+      (prevData) => prevData?.filter((p) => p.id !== bridgeId),
+      false
+    );
+
+    modulesService
+      .removeIssueFromModule(
+        workspaceSlug as string,
+        projectId as string,
+        moduleId as string,
+        bridgeId
+      )
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
  return (
    <>
      <CreateUpdateIssueModal
@ -385,9 +436,16 @@ export const IssuesView: React.FC<Props> = ({
          states={states}
          members={members}
          addIssueToState={addIssueToState}
-          openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
          handleEditIssue={handleEditIssue}
          handleDeleteIssue={handleDeleteIssue}
+          openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+          removeIssue={
+            type === "cycle"
+              ? removeIssueFromCycle
+              : type === "module"
+              ? removeIssueFromModule
+              : null
+          }
          userAuth={userAuth}
        />
      ) : (
--- a/apps/app/components/core/list-view/all-lists.tsx
+++ b/apps/app/components/core/list-view/all-lists.tsx
@ -12,9 +12,10 @@ type Props = {
  states: IState[] | undefined;
  members: IProjectMember[] | undefined;
  addIssueToState: (groupTitle: string, stateId: string | null) => void;
-  openIssuesListModal?: (() => void) | null;
  handleEditIssue: (issue: IIssue) => void;
  handleDeleteIssue: (issue: IIssue) => void;
+  openIssuesListModal?: (() => void) | null;
+  removeIssue: ((bridgeId: string) => void) | null;
  userAuth: UserAuth;
 };

@ -27,6 +28,7 @@ export const AllLists: React.FC<Props> = ({
  openIssuesListModal,
  handleEditIssue,
  handleDeleteIssue,
+  removeIssue,
  userAuth,
 }) => {
  const { groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
@ -51,6 +53,7 @@ export const AllLists: React.FC<Props> = ({
            handleEditIssue={handleEditIssue}
            handleDeleteIssue={handleDeleteIssue}
            openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+            removeIssue={removeIssue}
            userAuth={userAuth}
          />
        );
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";

 import Link from "next/link";
 import { useRouter } from "next/router";
@ -11,8 +11,6 @@ import { Listbox, Transition } from "@headlessui/react";
 import issuesService from "services/issues.service";
 import workspaceService from "services/workspace.service";
 import stateService from "services/state.service";
-// components
-import { DeleteIssueModal } from "components/issues";
 // ui
 import { CustomMenu, CustomSelect, AssigneesList, Avatar, CustomDatePicker } from "components/ui";
 // helpers
@ -42,18 +40,16 @@ import { PRIORITIES } from "constants/";

 type Props = {
  type?: string;
-  typeId?: string;
  issue: IIssue;
  properties: Properties;
  editIssue: () => void;
-  removeIssue?: () => void;
+  removeIssue?: (() => void) | null;
  handleDeleteIssue: (issue: IIssue) => void;
  userAuth: UserAuth;
 };

 export const SingleListIssue: React.FC<Props> = ({
  type,
-  typeId,
  issue,
  properties,
  editIssue,
@ -62,7 +58,7 @@ export const SingleListIssue: React.FC<Props> = ({
  userAuth,
 }) => {
  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;

  const { data: states } = useSWR(
    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
@ -79,9 +75,9 @@ export const SingleListIssue: React.FC<Props> = ({
  const partialUpdateIssue = (formData: Partial<IIssue>) => {
    if (!workspaceSlug || !projectId) return;

-    if (typeId) {
+    if (cycleId)
      mutate<CycleIssueResponse[]>(
-        CYCLE_ISSUES(typeId ?? ""),
+        CYCLE_ISSUES(cycleId as string),
        (prevData) => {
          const updatedIssues = (prevData ?? []).map((p) => {
            if (p.issue_detail.id === issue.id) {
@ -100,8 +96,9 @@ export const SingleListIssue: React.FC<Props> = ({
        false
      );

+    if (moduleId)
      mutate<ModuleIssueResponse[]>(
-        MODULE_ISSUES(typeId ?? ""),
+        MODULE_ISSUES(moduleId as string),
        (prevData) => {
          const updatedIssues = (prevData ?? []).map((p) => {
            if (p.issue_detail.id === issue.id) {
@ -119,7 +116,6 @@ export const SingleListIssue: React.FC<Props> = ({
        },
        false
      );
-    }

    mutate<IssueResponse>(
      PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
@ -136,10 +132,14 @@ export const SingleListIssue: React.FC<Props> = ({
    issuesService
      .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
      .then((res) => {
-        if (typeId) {
-          mutate(CYCLE_ISSUES(typeId ?? ""));
-          mutate(MODULE_ISSUES(typeId ?? ""));
-        }
+        mutate(
+          cycleId ? CYCLE_ISSUES(cycleId as string) : CYCLE_ISSUES(issue?.issue_cycle?.cycle ?? "")
+        );
+        mutate(
+          moduleId
+            ? MODULE_ISSUES(moduleId as string)
+            : MODULE_ISSUES(issue?.issue_module?.module ?? "")
+        );

        mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
      })
@ -154,7 +154,7 @@ export const SingleListIssue: React.FC<Props> = ({
    <div className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
      <div className="flex items-center gap-2">
        <span
-          className={`block h-1.5 w-1.5 flex-shrink-0 rounded-full`}
+          className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
          style={{
            backgroundColor: issue.state_detail.color,
          }}
@ -288,11 +288,6 @@ export const SingleListIssue: React.FC<Props> = ({
            ))}
          </CustomSelect>
        )}
-        {/* {properties.cycle && !typeId && (
-            <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-              {issue.issue_cycle ? issue.issue_cycle.cycle_detail.name : "None"}
-            </div>
-          )} */}
        {properties.due_date && (
          <div
            className={`group relative ${
@ -409,7 +404,7 @@ export const SingleListIssue: React.FC<Props> = ({
        {type && !isNotAllowed && (
          <CustomMenu width="auto" ellipsis>
            <CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
-            {type !== "issue" && (
+            {type !== "issue" && removeIssue && (
              <CustomMenu.MenuItem onClick={removeIssue}>
                <>Remove from {type}</>
              </CustomMenu.MenuItem>
--- a/apps/app/components/core/list-view/single-list.tsx
+++ b/apps/app/components/core/list-view/single-list.tsx
@ -12,6 +12,7 @@ import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
 import { IIssue, IProjectMember, NestedKeyOf, UserAuth } from "types";
+import { CustomMenu } from "components/ui";

 type Props = {
  type?: "issue" | "cycle" | "module";
@ -25,11 +26,12 @@ type Props = {
  handleEditIssue: (issue: IIssue) => void;
  handleDeleteIssue: (issue: IIssue) => void;
  openIssuesListModal?: (() => void) | null;
+  removeIssue: ((bridgeId: string) => void) | null;
  userAuth: UserAuth;
 };

 export const SingleList: React.FC<Props> = ({
-  type = "issue",
+  type,
  groupTitle,
  groupedByIssues,
  selectedGroup,
@ -38,6 +40,7 @@ export const SingleList: React.FC<Props> = ({
  handleEditIssue,
  handleDeleteIssue,
  openIssuesListModal,
+  removeIssue,
  userAuth,
 }) => {
  const router = useRouter();
@ -105,11 +108,14 @@ export const SingleList: React.FC<Props> = ({
                      return (
                        <SingleListIssue
                          key={issue.id}
-                          type="issue"
+                          type={type}
                          issue={issue}
                          properties={properties}
                          editIssue={() => handleEditIssue(issue)}
                          handleDeleteIssue={handleDeleteIssue}
+                          removeIssue={() => {
+                            removeIssue && removeIssue(issue.bridge);
+                          }}
                          userAuth={userAuth}
                        />
                      );
@ -133,7 +139,25 @@ export const SingleList: React.FC<Props> = ({
                <PlusIcon className="h-3 w-3" />
                Add issue
              </button>
-            ) : null}
+            ) : (
+              <CustomMenu
+                label={
+                  <span className="flex items-center gap-1">
+                    <PlusIcon className="h-3 w-3" />
+                    Add issue
+                  </span>
+                }
+                optionsPosition="left"
+                noBorder
+              >
+                <CustomMenu.MenuItem onClick={addIssueToState}>Create new</CustomMenu.MenuItem>
+                {openIssuesListModal && (
+                  <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                    Add an existing issue
+                  </CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            )}
          </div>
        </div>
      )}
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@ -132,30 +132,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
      });
  };

-  const removeIssueFromCycle = (bridgeId: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    mutate<CycleIssueResponse[]>(
-      CYCLE_ISSUES(cycleId as string),
-      (prevData) => prevData?.filter((p) => p.id !== bridgeId),
-      false
-    );
-
-    issuesServices
-      .removeIssueFromCycle(
-        workspaceSlug as string,
-        projectId as string,
-        cycleId as string,
-        bridgeId
-      )
-      .then((res) => {
-        console.log(res);
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  };
-
  return (
    <IssueViewContextProvider>
      <CreateUpdateIssueModal
@ -226,15 +202,12 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
        {cycleIssuesArray ? (
          cycleIssuesArray.length > 0 ? (
            <div className={`h-full ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}>
-              {/* <CyclesListView
+              <IssuesView
+                type="cycle"
                issues={cycleIssuesArray ?? []}
-                openCreateIssueModal={openCreateIssueModal}
-                openIssuesListModal={openIssuesListModal}
-                removeIssueFromCycle={removeIssueFromCycle}
-                setPreloadedData={setPreloadedData}
                userAuth={props}
-              /> */}
-              <IssuesView issues={cycleIssuesArray ?? []} userAuth={props} />
+                openIssuesListModal={openIssuesListModal}
+              />
            </div>
          ) : (
            <div
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@ -1,8 +1,7 @@
-import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
+
 import useSWR from "swr";
-import { RectangleStackIcon } from "@heroicons/react/24/outline";
-import { PlusIcon } from "@heroicons/react/20/solid";
+
 // lib
 import { requiredAdmin, requiredAuth } from "lib/auth";
 // services
@ -14,25 +13,20 @@ import AppLayout from "layouts/app-layout";
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
-import { CreateUpdateIssueModal } from "components/issues";
 // ui
 import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { RectangleStackIcon, PlusIcon } from "@heroicons/react/24/outline";
 // types
-import type { IIssue, UserAuth } from "types";
+import type { UserAuth } from "types";
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";

 const ProjectIssues: NextPage<UserAuth> = (props) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedIssue, setSelectedIssue] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-
-  const {
-    query: { workspaceSlug, projectId },
-  } = useRouter();
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;

  const { data: projectIssues } = useSWR(
    workspaceSlug && projectId
@ -50,23 +44,8 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
      : null
  );

-  useEffect(() => {
-    if (!isOpen) {
-      const timer = setTimeout(() => {
-        setSelectedIssue(undefined);
-        clearTimeout(timer);
-      }, 500);
-    }
-  }, [isOpen]);
-
  return (
    <IssueViewContextProvider>
-      <CreateUpdateIssueModal
-        isOpen={isOpen && selectedIssue?.actionType !== "delete"}
-        prePopulateData={{ ...selectedIssue }}
-        handleClose={() => setIsOpen(false)}
-        data={selectedIssue}
-      />
      <AppLayout
        breadcrumbs={
          <Breadcrumbs>
@ -92,35 +71,42 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
          </div>
        }
      >
-        {!projectIssues ? (
+        {projectIssues ? (
+          projectIssues.count > 0 ? (
+            <IssuesView
+              issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
+              userAuth={props}
+            />
+          ) : (
+            <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+              <EmptySpace
+                title="You don't have any issue yet."
+                description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+                Icon={RectangleStackIcon}
+              >
+                <EmptySpaceItem
+                  title="Create a new issue"
+                  description={
+                    <span>
+                      Use <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre> shortcut to
+                      create a new issue
+                    </span>
+                  }
+                  Icon={PlusIcon}
+                  action={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "c",
+                    });
+                    document.dispatchEvent(e);
+                  }}
+                />
+              </EmptySpace>
+            </div>
+          )
+        ) : (
          <div className="flex h-full w-full items-center justify-center">
            <Spinner />
          </div>
-        ) : projectIssues.count > 0 ? (
-          <IssuesView
-            issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
-            userAuth={props}
-          />
-        ) : (
-          <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-            <EmptySpace
-              title="You don't have any issue yet."
-              description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
-              Icon={RectangleStackIcon}
-            >
-              <EmptySpaceItem
-                title="Create a new issue"
-                description={
-                  <span>
-                    Use <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre> shortcut to
-                    create a new issue
-                  </span>
-                }
-                Icon={PlusIcon}
-                action={() => setIsOpen(true)}
-              />
-            </EmptySpace>
-          </div>
        )}
      </AppLayout>
    </IssueViewContextProvider>
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@ -135,30 +135,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
    setModuleIssuesListModal(true);
  };

-  const removeIssueFromModule = (issueId: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    mutate<ModuleIssueResponse[]>(
-      MODULE_ISSUES(moduleId as string),
-      (prevData) => prevData?.filter((p) => p.id !== issueId),
-      false
-    );
-
-    modulesService
-      .removeIssueFromModule(
-        workspaceSlug as string,
-        projectId as string,
-        moduleId as string,
-        issueId
-      )
-      .then((res) => {
-        console.log(res);
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  };
-
  const handleDeleteModule = () => {
    if (!moduleDetails) return;

@ -247,15 +223,12 @@ const SingleModule: React.FC<UserAuth> = (props) => {
        {moduleIssuesArray ? (
          moduleIssuesArray.length > 0 ? (
            <div className={`h-full ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}>
-              {/* <ModulesListView
+              <IssuesView
+                type="module"
                issues={moduleIssuesArray ?? []}
-                openCreateIssueModal={openCreateIssueModal}
-                openIssuesListModal={openIssuesListModal}
-                removeIssueFromModule={removeIssueFromModule}
-                setPreloadedData={setPreloadedData}
                userAuth={props}
-              /> */}
-              <IssuesView issues={moduleIssuesArray ?? []} userAuth={props} />
+                openIssuesListModal={openIssuesListModal}
+              />
            </div>
          ) : (
            <div