117 lines
4.3 KiB
TypeScript
117 lines
4.3 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { observer } from "mobx-react";
|
|
import { PanelLeft } from "lucide-react";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { TransferIcon } from "@plane/propel/icons";
|
|
import type { TInboxIssueCurrentTab } from "@plane/types";
|
|
import { EInboxIssueCurrentTab } from "@plane/types";
|
|
import { cn } from "@plane/utils";
|
|
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
|
|
import { ExternalContoursContentRoot } from "./content-root";
|
|
import { ExternalContoursEmptyState } from "./empty-state";
|
|
import { ExternalContoursSidebar } from "./sidebar";
|
|
|
|
type TExternalContoursRoot = {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
inboxIssueId: string | undefined;
|
|
navigationTab?: TInboxIssueCurrentTab | undefined;
|
|
};
|
|
|
|
export const ExternalContoursRoot = observer(function ExternalContoursRoot(props: TExternalContoursRoot) {
|
|
const { workspaceSlug, projectId, inboxIssueId, navigationTab } = props;
|
|
const [isMobileSidebar, setIsMobileSidebar] = useState(true);
|
|
const { t } = useTranslation();
|
|
const { loader, error, currentTab, currentProjectId, requestIds, handleCurrentTab, fetchRequests } =
|
|
useProjectExternalContours();
|
|
|
|
useEffect(() => {
|
|
if (!workspaceSlug || !projectId) return;
|
|
|
|
const resolvedTab = navigationTab || EInboxIssueCurrentTab.OPEN;
|
|
const hasProjectChanged = currentProjectId && currentProjectId !== projectId;
|
|
|
|
if (hasProjectChanged) {
|
|
void handleCurrentTab(workspaceSlug, projectId, EInboxIssueCurrentTab.OPEN);
|
|
return;
|
|
}
|
|
|
|
if (currentProjectId === projectId && currentTab === resolvedTab) {
|
|
if (loader === "init-loading") return;
|
|
if (requestIds.length > 0) return;
|
|
}
|
|
|
|
if (currentTab !== resolvedTab) {
|
|
void handleCurrentTab(workspaceSlug, projectId, resolvedTab);
|
|
return;
|
|
}
|
|
|
|
void fetchRequests(workspaceSlug.toString(), projectId.toString(), resolvedTab);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [workspaceSlug, projectId, navigationTab]);
|
|
|
|
if (error && error?.status === "init-error") {
|
|
return (
|
|
<div className="relative flex h-full w-full flex-col items-center justify-center gap-3">
|
|
<TransferIcon className="size-[60px]" strokeWidth={1.5} />
|
|
<div className="text-secondary">{error?.message}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{!inboxIssueId && (
|
|
<div className="flex h-12 w-full items-center border-b border-subtle px-4 lg:hidden">
|
|
<PanelLeft
|
|
onClick={() => setIsMobileSidebar(!isMobileSidebar)}
|
|
className={cn("h-4 w-4", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex h-full w-full overflow-hidden bg-surface-1 pt-2">
|
|
<div
|
|
className={cn(
|
|
"absolute top-[50px] bottom-0 z-10 w-full flex-shrink-0 bg-surface-1 transition-all lg:!relative lg:!top-0 lg:w-2/6",
|
|
isMobileSidebar ? "translate-x-0" : "-translate-x-full lg:!translate-x-0"
|
|
)}
|
|
>
|
|
<ExternalContoursSidebar
|
|
setIsMobileSidebar={setIsMobileSidebar}
|
|
workspaceSlug={workspaceSlug.toString()}
|
|
projectId={projectId.toString()}
|
|
inboxIssueId={inboxIssueId}
|
|
/>
|
|
</div>
|
|
|
|
{inboxIssueId ? (
|
|
<ExternalContoursContentRoot
|
|
setIsMobileSidebar={setIsMobileSidebar}
|
|
isMobileSidebar={isMobileSidebar}
|
|
workspaceSlug={workspaceSlug.toString()}
|
|
projectId={projectId.toString()}
|
|
inboxIssueId={inboxIssueId.toString()}
|
|
/>
|
|
) : (
|
|
<div className="flex h-full w-full flex-col overflow-hidden px-8">
|
|
<div className="hidden h-20 shrink-0 lg:block" />
|
|
<div className="flex min-h-0 flex-1 items-center justify-center">
|
|
<ExternalContoursEmptyState
|
|
compact
|
|
title={t("external_contours_page.empty_state.detail_title")}
|
|
description={t("external_contours_page.empty_state.detail_description")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
});
|