import React, { useState } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; import useSWR from "swr"; // services import { ModuleService } from "services/module.service"; // hooks import useToast from "hooks/use-toast"; import useUserAuth from "hooks/use-user-auth"; // layouts import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; // components import { ExistingIssuesListModal } from "components/core"; import { ModuleDetailsSidebar } from "components/modules"; import { ModuleLayoutRoot } from "components/issues"; import { ModuleIssuesHeader } from "components/headers"; // ui import { BreadcrumbItem, Breadcrumbs, CustomMenu, DiceIcon } from "@plane/ui"; import { EmptyState } from "components/common"; // images import emptyModule from "public/empty-state/module.svg"; // helpers import { truncateText } from "helpers/string.helper"; // types import { ISearchIssueResponse } from "types"; // fetch-keys import { MODULE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys"; // services const moduleService = new ModuleService(); const SingleModule: React.FC = () => { const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false); const [moduleSidebar, setModuleSidebar] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, moduleId } = router.query; const { user } = useUserAuth(); const { setToastAlert } = useToast(); const { data: modules } = useSWR( workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null, workspaceSlug && projectId ? () => moduleService.getModules(workspaceSlug as string, projectId as string) : null ); const { data: moduleIssues } = useSWR( workspaceSlug && projectId && moduleId ? MODULE_ISSUES(moduleId as string) : null, workspaceSlug && projectId && moduleId ? () => moduleService.getModuleIssues(workspaceSlug as string, projectId as string, moduleId as string) : null ); const { data: moduleDetails, error } = useSWR( moduleId ? MODULE_DETAILS(moduleId as string) : null, workspaceSlug && projectId ? () => moduleService.getModuleDetails(workspaceSlug as string, projectId as string, moduleId as string) : null ); const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => { if (!workspaceSlug || !projectId) return; const payload = { issues: data.map((i) => i.id), }; await moduleService .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Selected issues could not be added to the module. Please try again.", }) ); }; const openIssuesListModal = () => { setModuleIssuesListModal(true); }; return ( <> setModuleIssuesListModal(false)} searchParams={{ module: true }} handleOnSubmit={handleAddIssuesToModule} /> router.back()}>

{`${truncateText( moduleDetails?.project_detail.name ?? "Project", 32 )} Modules`}

} /> } left={ {moduleDetails?.name && truncateText(moduleDetails.name, 40)} } className="ml-1.5" width="auto" > {modules?.map((module) => ( router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)} > {truncateText(module.name, 40)} ))} } right={} > {error ? ( router.push(`/${workspaceSlug}/projects/${projectId}/modules`), }} /> ) : ( <>
)}
); }; export default SingleModule;