plane/web/components/issues/issue-layouts/cycle-layout-root.tsx

import React from "react";
// next imports
import { useRouter } from "next/router";
// swr
import useSWR from "swr";
// mobx react lite
import { observer } from "mobx-react-lite";
// components
import { CycleListLayout } from "./list/cycle-root";
import { CycleKanBanLayout } from "./kanban/cycle-root";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";

export const CycleLayoutRoot: React.FC = observer(() => {
  const router = useRouter();
  const { workspaceSlug, projectId, cycleId } = router.query as {
    workspaceSlug: string;
    projectId: string;
    cycleId: string;
  };

  const {
    project: projectStore,
    issueFilter: issueFilterStore,
    cycleIssue: cycleIssueStore,
    cycleIssueFilter: cycleIssueFilterStore,
  } = useMobxStore();

  useSWR(workspaceSlug && projectId && cycleId ? `CYCLE_ISSUES` : null, async () => {
    if (workspaceSlug && projectId && cycleId) {
      // fetching the project display filters and display properties
      await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
      // fetching the cycle filters
      await cycleIssueFilterStore.fetchCycleFilters(workspaceSlug, projectId, cycleId);

      // fetching the project state, labels and members
      await projectStore.fetchProjectStates(workspaceSlug, projectId);
      await projectStore.fetchProjectLabels(workspaceSlug, projectId);
      await projectStore.fetchProjectMembers(workspaceSlug, projectId);

      // fetching the cycle issues
      await cycleIssueStore.fetchIssues(workspaceSlug, projectId, cycleId);
    }
  });

  const activeLayout = issueFilterStore.userDisplayFilters.layout;

  return (
    <div className="w-full h-full">
      {activeLayout === "list" ? <CycleListLayout /> : activeLayout === "kanban" ? <CycleKanBanLayout /> : null}
    </div>
  );
});