Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WEB-2042] fix: project publish issue loader and error handling #5223

Merged
merged 1 commit into from
Jul 25, 2024
Merged

[WEB-2042] fix: project publish issue loader and error handling #5223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions space/app/issues/[anchor]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import useSWR from "swr";
// components
import { LogoSpinner } from "@/components/common";
import { IssuesNavbarRoot } from "@/components/issues";
import { SomethingWentWrongError } from "@/components/issues/issue-layouts/error";
// hooks
import { useIssueFilter, usePublish, usePublishList } from "@/hooks/store";
// assets
Expand All @@ -27,7 +28,7 @@ const IssuesLayout = observer((props: Props) => {
const publishSettings = usePublish(anchor);
const { updateLayoutOptions } = useIssueFilter();
// fetch publish settings
useSWR(
const { error } = useSWR(
anchor ? `PUBLISH_SETTINGS_${anchor}` : null,
anchor
? async () => {
Expand All @@ -45,7 +46,9 @@ const IssuesLayout = observer((props: Props) => {
: null
);

if (!publishSettings) return <LogoSpinner />;
if (!publishSettings && !error) return <LogoSpinner />;

if (error) return <SomethingWentWrongError />;

return (
<div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
Expand Down
17 changes: 17 additions & 0 deletions space/core/components/issues/issue-layouts/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Image from "next/image";
// assets
import SomethingWentWrongImage from "public/something-went-wrong.svg";

export const SomethingWentWrongError = () => (
<div className="grid h-full w-full place-items-center p-6">
<div className="text-center">
<div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
<div className="grid h-32 w-32 place-items-center">
<Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
</div>
</div>
<h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>
<p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
</div>
</div>
);
54 changes: 17 additions & 37 deletions space/core/components/issues/issue-layouts/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { FC, useEffect } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
import useSWR from "swr";
// components
import { IssueKanbanLayoutRoot, IssuesListLayoutRoot } from "@/components/issues";
Expand All @@ -13,7 +12,7 @@ import { useIssue, useIssueDetails, useIssueFilter } from "@/hooks/store";
// store
import { PublishStore } from "@/store/publish/publish.store";
// assets
import SomethingWentWrongImage from "public/something-went-wrong.svg";
import { SomethingWentWrongError } from "./error";

type Props = {
peekId: string | undefined;
Expand All @@ -24,7 +23,7 @@ export const IssuesLayoutsRoot: FC<Props> = observer((props) => {
const { peekId, publishSettings } = props;
// store hooks
const { getIssueFilters } = useIssueFilter();
const { loader, groupedIssueIds, fetchPublicIssues } = useIssue();
const { fetchPublicIssues } = useIssue();
const issueDetailStore = useIssueDetails();
// derived values
const { anchor } = publishSettings;
Expand All @@ -48,46 +47,27 @@ export const IssuesLayoutsRoot: FC<Props> = observer((props) => {

if (!anchor) return null;

if (error) return <SomethingWentWrongError />;

return (
<div className="relative h-full w-full overflow-hidden">
{peekId && <IssuePeekOverview anchor={anchor} peekId={peekId} />}
{activeLayout && (
<div className="relative flex h-full w-full flex-col overflow-hidden">
{/* applied filters */}
<IssueAppliedFilters anchor={anchor} />

{loader && !groupedIssueIds ? (
<div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
) : (
<>
{error ? (
<div className="grid h-full w-full place-items-center p-6">
<div className="text-center">
<div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
<div className="grid h-32 w-32 place-items-center">
<Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
</div>
</div>
<h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>
<p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
</div>
{activeLayout === "list" && (
<div className="relative h-full w-full overflow-y-auto">
<IssuesListLayoutRoot anchor={anchor} />
</div>
)}
{activeLayout === "kanban" && (
<div className="relative mx-auto h-full w-full p-5">
<IssueKanbanLayoutRoot anchor={anchor} />
</div>
) : (
activeLayout && (
<div className="relative flex h-full w-full flex-col overflow-hidden">
{/* applied filters */}
<IssueAppliedFilters anchor={anchor} />

{activeLayout === "list" && (
<div className="relative h-full w-full overflow-y-auto">
<IssuesListLayoutRoot anchor={anchor} />
</div>
)}
{activeLayout === "kanban" && (
<div className="relative mx-auto h-full w-full p-5">
<IssueKanbanLayoutRoot anchor={anchor} />
</div>
)}
</div>
)
)}
</>
</div>
)}
</div>
);
Expand Down
Loading