From 562e50815d1dba5190560f7cdc9ee4b8d1de4ecd Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 6 May 2024 15:27:56 +0530
Subject: [PATCH] [WEB-1007] chore: invalid issue error empty state added
 (#4372)

---
 .../projects/[projectId]/issues/[issueId].tsx | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 27dfe92ef..556337b85 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -1,25 +1,32 @@
 import React, { ReactElement, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
+import { useTheme } from "next-themes";
 import useSWR from "swr";
-// layouts
+// ui
 import { Loader } from "@plane/ui";
-import { PageHead } from "@/components/core";
 // components
+import { EmptyState } from "@/components/common";
+import { PageHead } from "@/components/core";
 import { ProjectIssueDetailsHeader } from "@/components/headers";
 import { IssueDetailRoot } from "@/components/issues";
-// ui
-// types
-// store hooks
+// hooks
 import { useApplication, useIssueDetail, useProject } from "@/hooks/store";
+// layouts
 import { AppLayout } from "@/layouts/app-layout";
+// types
 import { NextPageWithLayout } from "@/lib/types";
+// assets
+import emptyIssueDark from "public/empty-state/search/issue-dark.webp";
+import emptyIssueLight from "public/empty-state/search/issues-light.webp";
 
 const IssueDetailsPage: NextPageWithLayout = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
   // hooks
+  const { resolvedTheme } = useTheme();
+  // store hooks
   const {
     fetchIssue,
     issue: { getIssueById },
@@ -27,7 +34,11 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
   const { getProjectById } = useProject();
   const { theme: themeStore } = useApplication();
   // fetching issue details
-  const { isLoading, data: swrIssueDetails } = useSWR(
+  const {
+    isLoading,
+    data: swrIssueDetails,
+    error,
+  } = useSWR(
     workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_${workspaceSlug}_${projectId}_${issueId}` : null,
     workspaceSlug && projectId && issueId
       ? () => fetchIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString())
@@ -57,7 +68,17 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      {issueLoader ? (
+      {error ? (
+        <EmptyState
+          image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
+          title="Issue does not exist"
+          description="The issue you are looking for does not exist or has been deleted."
+          primaryButton={{
+            text: "View other issues",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
+          }}
+        />
+      ) : issueLoader ? (
         <Loader className="flex h-full gap-5 p-5">
           <div className="basis-2/3 space-y-2">
             <Loader.Item height="30px" width="40%" />