chore: add non existing states for project entities (#1770)

apps/app/components/ui/empty-state.tsx

@@ -7,7 +7,7 @@ import { PrimaryButton } from "components/ui";
 
 type Props = {
   title: string;
-  description: React.ReactNode | string;
+  description?: React.ReactNode;
   image: any;
   primaryButton?: {
     icon?: any;
@@ -34,7 +34,7 @@ export const EmptyState: React.FC<Props> = ({
     <div className="text-center flex flex-col items-center w-full">
       <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} />
       <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6>
-      <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>
+      {description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
       <div className="flex items-center gap-4">
         {primaryButton && (
           <PrimaryButton className="flex items-center gap-1.5" onClick={primaryButton.onClick}>

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

@@ -22,8 +22,10 @@ import useUserAuth from "hooks/use-user-auth";
 // components
 import { AnalyticsProjectModal } from "components/analytics";
 // ui
-import { CustomMenu, SecondaryButton } from "components/ui";
+import { CustomMenu, EmptyState, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// images
+import emptyCycle from "public/empty-state/cycle.svg";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { getDateRangeStatus } from "helpers/date-time.helper";
@@ -52,14 +54,14 @@ const SingleCycle: React.FC = () => {
       : null
   );
 
-  const { data: cycleDetails } = useSWR(
+  const { data: cycleDetails, error } = useSWR(
-    cycleId ? CYCLE_DETAILS(cycleId as string) : null,
+    workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
     workspaceSlug && projectId && cycleId
       ? () =>
           cycleServices.getCycleDetails(
-            workspaceSlug as string,
+            workspaceSlug.toString(),
-            projectId as string,
+            projectId.toString(),
-            cycleId as string
+            cycleId.toString()
           )
       : null
   );
@@ -159,11 +161,26 @@ const SingleCycle: React.FC = () => {
           </div>
         }
       >
+        {error ? (
+          <EmptyState
+            image={emptyCycle}
+            title="Cycle does not exist"
+            description="The cycle you are looking for does not exist or has been deleted."
+            primaryButton={{
+              text: "View other cycles",
+              onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/cycles`),
+            }}
+          />
+        ) : (
+          <>
             <TransferIssuesModal
               handleClose={() => setTransferIssuesModal(false)}
               isOpen={transferIssuesModal}
             />
-        <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
+            <AnalyticsProjectModal
+              isOpen={analyticsModal}
+              onClose={() => setAnalyticsModal(false)}
+            />
             <div
               className={`h-full flex flex-col ${cycleSidebar ? "mr-[24rem]" : ""} ${
                 analyticsModal ? "mr-[50%]" : ""
@@ -184,6 +201,8 @@ const SingleCycle: React.FC = () => {
               isCompleted={cycleStatus === "completed" ?? false}
               user={user}
             />
+          </>
+        )}
       </ProjectAuthorizationWrapper>
     </IssueViewContextProvider>
   );

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

@@ -15,8 +15,10 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
-import { Loader } from "components/ui";
+import { EmptyState, Loader } from "components/ui";
 import { Breadcrumbs } from "components/breadcrumbs";
+// images
+import emptyIssue from "public/empty-state/issue.svg";
 // types
 import { IIssue } from "types";
 import type { NextPage } from "next";
@@ -45,7 +47,11 @@ const IssueDetailsPage: NextPage = () => {
 
   const { user } = useUserAuth();
 
-  const { data: issueDetails, mutate: mutateIssueDetails } = useSWR<IIssue | undefined>(
+  const {
+    data: issueDetails,
+    mutate: mutateIssueDetails,
+    error,
+  } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId
       ? () =>
@@ -125,7 +131,17 @@ const IssueDetailsPage: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      {issueDetails && projectId ? (
+      {error ? (
+        <EmptyState
+          image={emptyIssue}
+          title="Issue does not exist"
+          description="The issue you are looking for does not exist, has been archived, or has been deleted."
+          primaryButton={{
+            text: "View other issues",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
+          }}
+        />
+      ) : issueDetails && projectId ? (
         <div className="flex h-full overflow-hidden">
           <div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
             <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />

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

@@ -20,8 +20,10 @@ import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "component
 import { ModuleDetailsSidebar } from "components/modules";
 import { AnalyticsProjectModal } from "components/analytics";
 // ui
-import { CustomMenu, SecondaryButton } from "components/ui";
+import { CustomMenu, EmptyState, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// images
+import emptyModule from "public/empty-state/module.svg";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -60,7 +62,7 @@ const SingleModule: React.FC = () => {
       : null
   );
 
-  const { data: moduleDetails } = useSWR(
+  const { data: moduleDetails, error } = useSWR(
     moduleId ? MODULE_DETAILS(moduleId as string) : null,
     workspaceSlug && projectId
       ? () =>
@@ -162,8 +164,22 @@ const SingleModule: React.FC = () => {
           </div>
         }
       >
-        <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
+        {error ? (
-
+          <EmptyState
+            image={emptyModule}
+            title="Module does not exist"
+            description="The module you are looking for does not exist or has been deleted."
+            primaryButton={{
+              text: "View other modules",
+              onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/modules`),
+            }}
+          />
+        ) : (
+          <>
+            <AnalyticsProjectModal
+              isOpen={analyticsModal}
+              onClose={() => setAnalyticsModal(false)}
+            />
             <div
               className={`h-full flex flex-col ${moduleSidebar ? "mr-[24rem]" : ""} ${
                 analyticsModal ? "mr-[50%]" : ""
@@ -171,13 +187,14 @@ const SingleModule: React.FC = () => {
             >
               <IssuesView openIssuesListModal={openIssuesListModal} />
             </div>
-
             <ModuleDetailsSidebar
               module={moduleDetails}
               isOpen={moduleSidebar}
               moduleIssues={moduleIssues}
               user={user}
             />
+          </>
+        )}
       </ProjectAuthorizationWrapper>
     </IssueViewContextProvider>
   );

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -28,7 +28,16 @@ import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { CustomSearchSelect, Loader, TextArea, ToggleSwitch, Tooltip } from "components/ui";
+import {
+  CustomSearchSelect,
+  EmptyState,
+  Loader,
+  TextArea,
+  ToggleSwitch,
+  Tooltip,
+} from "components/ui";
+// images
+import emptyPage from "public/empty-state/page.svg";
 // icons
 import {
   ArrowLeftIcon,
@@ -40,7 +49,7 @@ import {
   XMarkIcon,
   ChevronDownIcon,
 } from "@heroicons/react/24/outline";
-import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
+import { ColorPalletteIcon } from "components/icons";
 // helpers
 import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -82,7 +91,7 @@ const SinglePage: NextPage = () => {
       : null
   );
 
-  const { data: pageDetails } = useSWR(
+  const { data: pageDetails, error } = useSWR(
     workspaceSlug && projectId && pageId ? PAGE_DETAILS(pageId as string) : null,
     workspaceSlug && projectId
       ? () =>
@@ -267,13 +276,6 @@ const SinglePage: NextPage = () => {
     );
   };
 
-  const handleNewBlock = useCallback(() => {
-    setCreateBlockForm(true);
-    scrollToRef.current?.scrollIntoView({
-      behavior: "smooth",
-    });
-  }, [setCreateBlockForm, scrollToRef]);
-
   const handleShowBlockToggle = async () => {
     if (!workspaceSlug || !projectId) return;
 
@@ -311,8 +313,7 @@ const SinglePage: NextPage = () => {
       });
   };
 
-  const options =
+  const options = labels?.map((label) => ({
-    labels?.map((label) => ({
     value: label.id,
     query: label.name,
     content: (
@@ -326,7 +327,7 @@ const SinglePage: NextPage = () => {
         {label.name}
       </div>
     ),
-    })) ?? [];
+  }));
 
   useEffect(() => {
     if (!pageDetails) return;
@@ -350,7 +351,17 @@ const SinglePage: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      {pageDetails ? (
+      {error ? (
+        <EmptyState
+          image={emptyPage}
+          title="Page does not exist"
+          description="The page you are looking for does not exist or has been deleted."
+          primaryButton={{
+            text: "View other pages",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/pages`),
+          }}
+        />
+      ) : pageDetails ? (
         <div className="flex h-full flex-col justify-between space-y-4 overflow-hidden p-4">
           <div className="h-full w-full overflow-y-auto">
             <div className="flex items-start justify-between gap-2">

apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx

@@ -12,11 +12,13 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
-import { CustomMenu, PrimaryButton } from "components/ui";
+import { CustomMenu, EmptyState, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { StackedLayersIcon } from "components/icons";
+// images
+import emptyView from "public/empty-state/view.svg";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // fetch-keys
@@ -40,7 +42,7 @@ const SingleView: React.FC = () => {
       : null
   );
 
-  const { data: viewDetails } = useSWR(
+  const { data: viewDetails, error } = useSWR(
     workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null,
     workspaceSlug && projectId && viewId
       ? () =>
@@ -101,9 +103,21 @@ const SingleView: React.FC = () => {
           </div>
         }
       >
+        {error ? (
+          <EmptyState
+            image={emptyView}
+            title="View does not exist"
+            description="The view you are looking for does not exist or has been deleted."
+            primaryButton={{
+              text: "View other views",
+              onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/views`),
+            }}
+          />
+        ) : (
           <div className="h-full w-full flex flex-col">
             <IssuesView />
           </div>
+        )}
       </ProjectAuthorizationWrapper>
     </IssueViewContextProvider>
   );