import { useState, ReactElement } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // services import { IssueService } from "services/issue"; // hooks import useLocalStorage from "hooks/use-local-storage"; import useUser from "hooks/use-user"; import useToast from "hooks/use-toast"; // layouts import { AppLayout } from "layouts/app-layout"; // components import { CycleIssuesHeader } from "components/headers"; import { ExistingIssuesListModal } from "components/core"; import { CycleDetailsSidebar } from "components/cycles"; import { CycleLayoutRoot } from "components/issues/issue-layouts"; // ui import { EmptyState } from "components/common"; // assets import emptyCycle from "public/empty-state/cycle.svg"; // types import { ISearchIssueResponse } from "types"; import { NextPageWithLayout } from "types/app"; const issueService = new IssueService(); const CycleDetailPage: NextPageWithLayout = () => { const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, cycleId } = router.query; const { cycle: cycleStore } = useMobxStore(); const { user } = useUser(); const { setToastAlert } = useToast(); const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false"); const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false; const { error } = useSWR( workspaceSlug && projectId && cycleId ? `CURRENT_CYCLE_DETAILS_${cycleId.toString()}` : null, workspaceSlug && projectId && cycleId ? () => cycleStore.fetchCycleWithId(workspaceSlug.toString(), projectId.toString(), cycleId.toString()) : null ); const toggleSidebar = () => { setValue(`${!isSidebarCollapsed}`); }; // TODO: add this function to bulk add issues to cycle const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => { if (!workspaceSlug || !projectId) return; const payload = { issues: data.map((i) => i.id), }; await issueService .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Selected issues could not be added to the cycle. Please try again.", }); }); }; const openIssuesListModal = () => { setCycleIssuesListModal(true); }; return ( <> {/* TODO: Update logic to bulk add issues to a cycle */} setCycleIssuesListModal(false)} searchParams={{ cycle: true }} handleOnSubmit={handleAddIssuesToCycle} /> {error ? ( router.push(`/${workspaceSlug}/projects/${projectId}/cycles`), }} /> ) : ( <>
{cycleId && !isSidebarCollapsed && (
)}
)} ); }; CycleDetailPage.getLayout = function getLayout(page: ReactElement) { return ( } withProjectWrapper> {page} ); }; export default CycleDetailPage;