import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // react-beautiful-dnd import { Draggable } from "react-beautiful-dnd"; // components import StrictModeDroppable from "components/dnd/StrictModeDroppable"; import SingleIssue from "components/common/board-view/single-issue"; import BoardHeader from "components/common/board-view/board-header"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; // services import workspaceService from "services/workspace.service"; // types import { IIssue, Properties, NestedKeyOf, IWorkspaceMember, UserAuth } from "types"; // fetch-keys import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; type Props = { selectedGroup: NestedKeyOf | null; groupTitle: string; groupedByIssues: { [key: string]: IIssue[]; }; index: number; setIsIssueOpen: React.Dispatch>; properties: Properties; setPreloadedData: React.Dispatch< React.SetStateAction< | (Partial & { actionType: "createIssue" | "edit" | "delete"; }) | undefined > >; bgColor?: string; stateId: string | null; createdBy: string | null; handleDeleteIssue: React.Dispatch>; userAuth: UserAuth; }; const SingleBoard: React.FC = ({ selectedGroup, groupTitle, groupedByIssues, index, setIsIssueOpen, properties, setPreloadedData, bgColor = "#0f2b16", stateId, createdBy, handleDeleteIssue, userAuth, }) => { // Collapse/Expand const [isCollapsed, setIsCollapsed] = useState(true); const router = useRouter(); const { workspaceSlug } = router.query; if (selectedGroup === "priority") groupTitle === "high" ? (bgColor = "#dc2626") : groupTitle === "medium" ? (bgColor = "#f97316") : groupTitle === "low" ? (bgColor = "#22c55e") : (bgColor = "#ff0000"); const { data: people } = useSWR( workspaceSlug ? WORKSPACE_MEMBERS : null, workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null ); const addIssueToState = () => { setIsIssueOpen(true); if (selectedGroup) setPreloadedData({ state: stateId !== null ? stateId : undefined, [selectedGroup]: groupTitle, actionType: "createIssue", }); }; return ( {(provided, snapshot) => (
{(provided, snapshot) => (
{groupedByIssues[groupTitle].map((childIssue, index: number) => { const assignees = [ ...(childIssue?.assignees_list ?? []), ...(childIssue?.assignees ?? []), ]?.map((assignee) => { const tempPerson = people?.find((p) => p.member.id === assignee)?.member; return tempPerson; }); return ( {(provided, snapshot) => (
)}
); })} {provided.placeholder}
)}
)}
); }; export default SingleBoard;