import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; import { NextPageContext } from "next"; // icons import { ArrowLeftIcon, ListBulletIcon, PlusIcon } from "@heroicons/react/24/outline"; import { CyclesIcon } from "components/icons"; // lib import { requiredAdmin, requiredAuth } from "lib/auth"; // layouts import AppLayout from "layouts/app-layout"; // contexts import { IssueViewContextProvider } from "contexts/issue-view.context"; // components import { CreateUpdateIssueModal } from "components/issues"; import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core"; import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar"; // services import issuesServices from "services/issues.service"; import cycleServices from "services/cycles.service"; import projectService from "services/project.service"; // ui import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // types import { CycleIssueResponse, IIssue, IIssueLabels, SelectIssue, UserAuth } from "types"; // fetch-keys import { CYCLE_ISSUES, CYCLE_LIST, PROJECT_ISSUES_LIST, PROJECT_DETAILS, PROJECT_ISSUE_LABELS, CYCLE_DETAILS, PROJECT_MEMBERS, } from "constants/fetch-keys"; const SingleCycle: React.FC = (props) => { const [isIssueModalOpen, setIsIssueModalOpen] = useState(false); const [selectedIssues, setSelectedIssues] = useState(); const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false); const [cycleSidebar, setCycleSidebar] = useState(true); const [preloadedData, setPreloadedData] = useState< (Partial & { actionType: "createIssue" | "edit" | "delete" }) | null >(null); const router = useRouter(); const { workspaceSlug, projectId, cycleId } = router.query; const { data: activeProject } = useSWR( workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null ); const { data: issues } = useSWR( workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null, workspaceSlug && projectId ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string) : null ); const { data: cycles } = useSWR( workspaceSlug && projectId ? CYCLE_LIST(projectId as string) : null, workspaceSlug && projectId ? () => cycleServices.getCycles(workspaceSlug as string, projectId as string) : null ); const { data: cycleDetails } = useSWR( cycleId ? CYCLE_DETAILS(cycleId as string) : null, workspaceSlug && projectId && cycleId ? () => cycleServices.getCycleDetails( workspaceSlug as string, projectId as string, cycleId as string ) : null ); const { data: cycleIssues } = useSWR( workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null, workspaceSlug && projectId && cycleId ? () => cycleServices.getCycleIssues( workspaceSlug as string, projectId as string, cycleId as string ) : null ); const cycleIssuesArray = cycleIssues?.map((issue) => ({ ...issue.issue_detail, sub_issues_count: issue.sub_issues_count, bridge: issue.id, cycle: cycleId as string, })); const openCreateIssueModal = ( issue?: IIssue, actionType: "create" | "edit" | "delete" = "create" ) => { if (issue) { setPreloadedData(null); setSelectedIssues({ ...issue, actionType }); } else setSelectedIssues(null); setIsIssueModalOpen(true); }; const openIssuesListModal = () => { setCycleIssuesListModal(true); }; const handleAddIssuesToCycle = async (data: { issues: string[] }) => { if (!workspaceSlug || !projectId) return; await issuesServices .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, data) .then((res) => { console.log(res); mutate(CYCLE_ISSUES(cycleId as string)); }) .catch((e) => { console.log(e); }); }; return ( setIsIssueModalOpen(false)} /> setCycleIssuesListModal(false)} type="cycle" issues={issues?.results.filter((i) => !i.issue_cycle) ?? []} handleOnSubmit={handleAddIssuesToCycle} /> } left={ {cycleDetails?.name} } className="ml-1.5" width="auto" > {cycles?.map((cycle) => ( {cycle.name} ))} } right={
} > {cycleIssuesArray ? ( cycleIssuesArray.length > 0 ? (
) : (
) ) : (
)}
); }; export const getServerSideProps = async (ctx: NextPageContext) => { const user = await requiredAuth(ctx.req?.headers.cookie); const redirectAfterSignIn = ctx.req?.url; if (!user) { return { redirect: { destination: `/signin?next=${redirectAfterSignIn}`, permanent: false, }, }; } const projectId = ctx.query.projectId as string; const workspaceSlug = ctx.query.workspaceSlug as string; const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie); return { props: { isOwner: memberDetail?.role === 20, isMember: memberDetail?.role === 15, isViewer: memberDetail?.role === 10, isGuest: memberDetail?.role === 5, }, }; }; export default SingleCycle;