import React from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; // hooks import { useIssues } from "hooks/store"; // components import { DraftIssueAppliedFiltersRoot } from "../filters/applied-filters/roots/draft-issue"; import { DraftIssueListLayout } from "../list/roots/draft-issue-root"; import { ProjectDraftEmptyState } from "../empty-states"; import { IssuePeekOverview } from "components/issues/peek-overview"; import { ActiveLoader } from "components/ui"; // ui import { DraftKanBanLayout } from "../kanban/roots/draft-issue-root"; // constants import { EIssuesStoreType } from "constants/issue"; export const DraftIssueLayoutRoot: React.FC = observer(() => { // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // hooks const { issues, issuesFilter } = useIssues(EIssuesStoreType.DRAFT); useSWR( workspaceSlug && projectId ? `DRAFT_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}` : null, async () => { if (workspaceSlug && projectId) { await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString()); await issues?.fetchIssues( workspaceSlug.toString(), projectId.toString(), issues?.groupedIssueIds ? "mutation" : "init-loader" ); } } ); const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout || undefined; if (!workspaceSlug || !projectId) return <>; if (issues?.loader === "init-loader" || !issues?.groupedIssueIds) { return <>{activeLayout && }; } return (
{issues?.groupedIssueIds?.length === 0 ? (
) : (
{activeLayout === "list" ? ( ) : activeLayout === "kanban" ? ( ) : null} {/* issue peek overview */}
)}
); });