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

2024-06-14 14:31:34 +00:00 · 2023-08-02 16:47:36 +05:30 · 2023-08-02 16:47:36 +05:30 · a1ae338c37
commit a1ae338c37
parent c16b0daa22
6 changed files with 164 additions and 87 deletions
--- a/apps/app/components/ui/empty-state.tsx
+++ b/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}>
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/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(
-    cycleId ? CYCLE_DETAILS(cycleId as string) : null,
+  const { data: cycleDetails, error } = useSWR(
+    workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
    workspaceSlug && projectId && cycleId
      ? () =>
          cycleServices.getCycleDetails(
-            workspaceSlug as string,
-            projectId as string,
-            cycleId as string
+            workspaceSlug.toString(),
+            projectId.toString(),
+            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>
  );
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/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} />
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/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>
  );
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/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 =
-    labels?.map((label) => ({
+  const options = 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">
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/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>
  );