fix: mutation for issue update on both kanban & list (#436)

* refactor: issues filter logic

* fix: removed fetch logic from hooks

* feat: filter by assignee and label

* chore: remove filter buttons

* feat: filter options

* fix: mutation for issue update on both kanban & list

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

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

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 import { GetServerSidePropsContext } from "next";
 // icons
-import { ArrowLeftIcon, ListBulletIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import { CyclesIcon } from "components/icons";
 // lib
 import { requiredAdmin, requiredAuth } from "lib/auth";
@@ -21,21 +21,15 @@ import issuesServices from "services/issues.service";
 import cycleServices from "services/cycles.service";
 import projectService from "services/project.service";
 // ui
-import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
+import { CustomMenu } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { getDateRangeStatus } from "helpers/date-time.helper";
 // types
-import { CycleIssueResponse, UserAuth } from "types";
+import { UserAuth } from "types";
 // fetch-keys
-import {
-  CYCLE_ISSUES,
-  CYCLE_LIST,
-  PROJECT_ISSUES_LIST,
-  PROJECT_DETAILS,
-  CYCLE_DETAILS,
-} from "constants/fetch-keys";
+import { CYCLE_ISSUES, CYCLE_LIST, PROJECT_DETAILS, CYCLE_DETAILS } from "constants/fetch-keys";
 
 const SingleCycle: React.FC<UserAuth> = (props) => {
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
@@ -51,15 +45,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
       : null
   );
 
-  const { data: issues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
-    workspaceSlug && projectId
-      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
-      : null
-  );
-
   const { data: cycles } = useSWR(
     workspaceSlug && projectId ? CYCLE_LIST(projectId as string) : null,
     workspaceSlug && projectId
@@ -84,7 +69,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
       ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
       : "";
 
-  const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
+  const { data: issues } = useSWR(
     workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
     workspaceSlug && projectId && cycleId
       ? () =>
@@ -96,13 +81,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
       : null
   );
 
-  const cycleIssuesArray = cycleIssues?.map((issue) => ({
-    ...issue.issue_detail,
-    sub_issues_count: issue.sub_issues_count,
-    bridge: issue.id,
-    cycle: cycleId as string,
-  }));
-
   const openIssuesListModal = () => {
     setCycleIssuesListModal(true);
   };
@@ -164,7 +142,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
           <div
             className={`flex items-center gap-2 ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}
           >
-            <IssuesFilterView issues={cycleIssuesArray ?? []} />
+            <IssuesFilterView />
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
@@ -177,59 +155,10 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
           </div>
         }
       >
-        {cycleIssuesArray ? (
-          cycleIssuesArray.length > 0 ? (
-            <div className={`h-full ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}>
-              <IssuesView
-                type="cycle"
-                issues={cycleIssuesArray ?? []}
-                userAuth={props}
-                openIssuesListModal={openIssuesListModal}
-              />
-            </div>
-          ) : (
-            <div
-              className={`flex h-full flex-col items-center justify-center px-4 ${
-                cycleSidebar ? "mr-[24rem]" : ""
-              } duration-300`}
-            >
-              <EmptySpace
-                title="You don't have any issue yet."
-                description="A cycle is a fixed time period where a team commits to a set number of issues from their backlog. Cycles are usually one, two, or four weeks long."
-                Icon={CyclesIcon}
-              >
-                <EmptySpaceItem
-                  title="Create a new issue"
-                  description="Click to create a new issue inside the cycle."
-                  Icon={PlusIcon}
-                  action={() => {
-                    const e = new KeyboardEvent("keydown", {
-                      key: "c",
-                    });
-                    document.dispatchEvent(e);
-                  }}
-                />
-                <EmptySpaceItem
-                  title="Add an existing issue"
-                  description="Open list"
-                  Icon={ListBulletIcon}
-                  action={openIssuesListModal}
-                />
-              </EmptySpace>
-            </div>
-          )
-        ) : (
-          <div className="flex h-full w-full items-center justify-center">
-            <Spinner />
-          </div>
-        )}
-        <CycleDetailsSidebar
-          cycleStatus={cycleStatus}
-          issues={cycleIssuesArray ?? []}
-          cycle={cycleDetails}
-          isOpen={cycleSidebar}
-          cycleIssues={cycleIssues ?? []}
-        />
+        <div className={`h-full ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}>
+          <IssuesView type="cycle" userAuth={props} openIssuesListModal={openIssuesListModal} />
+        </div>
+        <CycleDetailsSidebar cycleStatus={cycleStatus} cycle={cycleDetails} isOpen={cycleSidebar} />
       </AppLayout>
     </IssueViewContextProvider>
   );

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx

@@ -5,7 +5,6 @@ import useSWR from "swr";
 // lib
 import { requiredAdmin, requiredAuth } from "lib/auth";
 // services
-import issuesServices from "services/issues.service";
 import projectService from "services/project.service";
 // layouts
 import AppLayout from "layouts/app-layout";
@@ -14,31 +13,20 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
-import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton, EmptyState } from "components/ui";
+import { HeaderButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { RectangleStackIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
 // types
 import type { UserAuth } from "types";
 import type { GetServerSidePropsContext, NextPage } from "next";
 // fetch-keys
-import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
-// image
-import emptyIssue from "public/empty-state/empty-issue.svg";
+import { PROJECT_DETAILS } from "constants/fetch-keys";
 
 const ProjectIssues: NextPage<UserAuth> = (props) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: projectIssues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
-    workspaceSlug && projectId
-      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
-      : null
-  );
-
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
     workspaceSlug && projectId
@@ -57,7 +45,7 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
         }
         right={
           <div className="flex items-center gap-2">
-            <IssuesFilterView issues={projectIssues?.filter((p) => p.parent === null) ?? []} />
+            <IssuesFilterView />
             <HeaderButton
               Icon={PlusIcon}
               label="Add Issue"
@@ -71,26 +59,7 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
           </div>
         }
       >
-        {projectIssues ? (
-          projectIssues.length > 0 ? (
-            <IssuesView
-              issues={projectIssues?.filter((p) => p.parent === null) ?? []}
-              userAuth={props}
-            />
-          ) : (
-            <EmptyState
-            type="issue"
-            title="Create New Issue"
-            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.
-            Create a new issue"
-            imgURL={emptyIssue}
-          />
-          )
-        ) : (
-          <div className="flex h-full w-full items-center justify-center">
-            <Spinner />
-          </div>
-        )}
+        <IssuesView userAuth={props} />
       </AppLayout>
     </IssueViewContextProvider>
   );

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

@@ -30,7 +30,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
-import { IModule, ModuleIssueResponse, UserAuth } from "types";
+import { IModule, UserAuth } from "types";
 
 // fetch-keys
 import {
@@ -63,7 +63,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
       : null
   );
 
-  const { data: moduleIssues } = useSWR<ModuleIssueResponse[]>(
+  const { data: moduleIssues } = useSWR(
     workspaceSlug && projectId && moduleId ? MODULE_ISSUES(moduleId as string) : null,
     workspaceSlug && projectId && moduleId
       ? () =>
@@ -87,13 +87,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
       : null
   );
 
-  const moduleIssuesArray = moduleIssues?.map((issue) => ({
-    ...issue.issue_detail,
-    sub_issues_count: issue.sub_issues_count,
-    bridge: issue.id,
-    module: moduleId as string,
-  }));
-
   const handleAddIssuesToModule = async (data: { issues: string[] }) => {
     if (!workspaceSlug || !projectId) return;
 
@@ -153,7 +146,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
           <div
             className={`flex items-center gap-2 ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}
           >
-            <IssuesFilterView issues={moduleIssuesArray ?? []} />
+            <IssuesFilterView />
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
@@ -166,12 +159,11 @@ const SingleModule: React.FC<UserAuth> = (props) => {
           </div>
         }
       >
-        {moduleIssuesArray ? (
-          moduleIssuesArray.length > 0 ? (
+        {moduleIssues ? (
+          moduleIssues.length > 0 ? (
             <div className={`h-full ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}>
               <IssuesView
                 type="module"
-                issues={moduleIssuesArray ?? []}
                 userAuth={props}
                 openIssuesListModal={openIssuesListModal}
               />
@@ -213,7 +205,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
           </div>
         )}
         <ModuleDetailsSidebar
-          issues={moduleIssuesArray ?? []}
+          issues={moduleIssues ?? []}
           module={moduleDetails}
           isOpen={moduleSidebar}
           moduleIssues={moduleIssues}