forked from github/plane
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { FC } from "react";
|
|
import { observer } from "mobx-react";
|
|
import useSWR from "swr";
|
|
import { Inbox } from "lucide-react";
|
|
// components
|
|
import { EmptyState } from "@/components/empty-state";
|
|
import { InboxSidebar, InboxContentRoot } from "@/components/inbox";
|
|
import { InboxLayoutLoader } from "@/components/ui";
|
|
// constants
|
|
import { EmptyStateType } from "@/constants/empty-state";
|
|
// hooks
|
|
import { useProjectInbox } from "@/hooks/store";
|
|
|
|
type TInboxIssueRoot = {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
inboxIssueId: string | undefined;
|
|
inboxAccessible: boolean;
|
|
};
|
|
|
|
export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
|
|
const { workspaceSlug, projectId, inboxIssueId, inboxAccessible } = props;
|
|
// hooks
|
|
const { isLoading, error, fetchInboxIssues } = useProjectInbox();
|
|
|
|
useSWR(
|
|
inboxAccessible && workspaceSlug && projectId ? `PROJECT_INBOX_ISSUES_${workspaceSlug}_${projectId}` : null,
|
|
async () => {
|
|
inboxAccessible &&
|
|
workspaceSlug &&
|
|
projectId &&
|
|
(await fetchInboxIssues(workspaceSlug.toString(), projectId.toString()));
|
|
},
|
|
{ revalidateOnFocus: false, revalidateIfStale: false }
|
|
);
|
|
|
|
// loader
|
|
if (isLoading === "init-loading")
|
|
return (
|
|
<div className="relative flex w-full h-full flex-col">
|
|
<InboxLayoutLoader />
|
|
</div>
|
|
);
|
|
|
|
// error
|
|
if (error && error?.status === "init-error")
|
|
return (
|
|
<div className="relative w-full h-full flex flex-col gap-3 justify-center items-center">
|
|
<Inbox size={60} strokeWidth={1.5} />
|
|
<div className="text-custom-text-200">{error?.message}</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="relative w-full h-full flex overflow-hidden">
|
|
<InboxSidebar workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
|
|
|
|
{inboxIssueId ? (
|
|
<InboxContentRoot
|
|
workspaceSlug={workspaceSlug.toString()}
|
|
projectId={projectId.toString()}
|
|
inboxIssueId={inboxIssueId.toString()}
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full relative flex justify-center items-center">
|
|
<EmptyState type={EmptyStateType.INBOX_DETAIL_EMPTY_STATE} layout="screen-simple" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|