import React from "react"; // react-beautiful-dnd import { DraggableProvided } from "react-beautiful-dnd"; // icons import { ArrowsPointingInIcon, ArrowsPointingOutIcon, EllipsisHorizontalIcon, PlusIcon, } from "@heroicons/react/24/outline"; // helpers import { addSpaceIfCamelCase } from "helpers/string.helper"; // types import { IIssue, IProjectMember, NestedKeyOf } from "types"; type Props = { groupedByIssues: { [key: string]: IIssue[]; }; selectedGroup: NestedKeyOf | null; groupTitle: string; bgColor?: string; addIssueToState: () => void; members: IProjectMember[] | undefined; isCollapsed: boolean; setIsCollapsed: React.Dispatch>; }; export const BoardHeader: React.FC = ({ groupedByIssues, selectedGroup, groupTitle, bgColor, addIssueToState, isCollapsed, setIsCollapsed, members, }) => { const createdBy = selectedGroup === "created_by" ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..." : null; let assignees: any; if (selectedGroup === "assignees") { assignees = groupTitle && groupTitle !== "" ? groupTitle.split(",") : []; assignees = assignees.length > 0 ? assignees .map((a: string) => members?.find((m) => m.member.id === a)?.member.first_name) .join(", ") : "No assignee"; } return (

{selectedGroup === "created_by" ? createdBy : selectedGroup === "assignees" ? assignees : addSpaceIfCamelCase(groupTitle)}

{groupedByIssues[groupTitle].length}
); };