import { useState, useEffect } from "react"; import { useRouter } from "next/router"; // react-beautiful-dnd import StrictModeDroppable from "components/dnd/StrictModeDroppable"; import { Draggable } from "react-beautiful-dnd"; // hooks import useIssuesView from "hooks/use-issues-view"; import useIssuesProperties from "hooks/use-issue-properties"; // components import { BoardHeader, SingleBoardIssue } from "components/core"; // ui import { CustomMenu } from "components/ui"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; // helpers import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; // types import { IIssue, IState, UserAuth } from "types"; type Props = { type?: "issue" | "cycle" | "module"; currentState?: IState | null; groupTitle: string; handleEditIssue: (issue: IIssue) => void; makeIssueCopy: (issue: IIssue) => void; addIssueToState: () => void; handleDeleteIssue: (issue: IIssue) => void; openIssuesListModal?: (() => void) | null; handleTrashBox: (isDragging: boolean) => void; removeIssue: ((bridgeId: string, issueId: string) => void) | null; isCompleted?: boolean; userAuth: UserAuth; }; export const SingleBoard: React.FC = ({ type, currentState, groupTitle, handleEditIssue, makeIssueCopy, addIssueToState, handleDeleteIssue, openIssuesListModal, handleTrashBox, removeIssue, isCompleted = false, userAuth, }) => { // collapse/expand const [isCollapsed, setIsCollapsed] = useState(true); const { groupedByIssues, groupByProperty: selectedGroup, orderBy } = useIssuesView(); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string); const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted; useEffect(() => { if (currentState?.group === "completed" || currentState?.group === "cancelled") setIsCollapsed(false); }, [currentState]); return (
{isCollapsed && ( {(provided, snapshot) => (
{orderBy !== "sort_order" && ( <>
This board is ordered by{" "} {replaceUnderscoreIfSnakeCase( orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at" )}
)} {groupedByIssues?.[groupTitle].map((issue, index) => ( {(provided, snapshot) => ( handleEditIssue(issue)} makeIssueCopy={() => makeIssueCopy(issue)} handleDeleteIssue={handleDeleteIssue} handleTrashBox={handleTrashBox} removeIssue={() => { if (removeIssue && issue.bridge_id) removeIssue(issue.bridge_id, issue.id); }} isCompleted={isCompleted} userAuth={userAuth} /> )} ))} {provided.placeholder} {type === "issue" ? ( ) : ( !isCompleted && ( Add Issue } position="left" noBorder > Create new {openIssuesListModal && ( Add an existing issue )} ) )}
)} )}
); };