import React from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import { ProjectMemberService } from "services/project"; // ui import { Avatar, AvatarGroup, CustomSearchSelect } from "@plane/ui"; // fetch-keys import { PROJECT_MEMBERS } from "constants/fetch-keys"; type Props = { value: string[]; projectId: string; onChange: (val: string[]) => void; disabled?: boolean; }; // services const projectMemberService = new ProjectMemberService(); export const SidebarAssigneeSelect: React.FC = ({ value, projectId, onChange, disabled = false }) => { const router = useRouter(); const { workspaceSlug } = router.query; const { data: members } = useSWR( workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId ? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string) : null ); const options = members?.map((member) => ({ value: member.member.id, query: member.member.display_name, content: (
{member.member.display_name}
), })); return ( {value && value.length > 0 && Array.isArray(value) ? (
{value.map((assigneeId) => { const member = members?.find((m) => m.member.id === assigneeId)?.member; if (!member) return null; return ; })} {value.length} Assignees
) : ( )} } options={options} onChange={onChange} multiple disabled={disabled} /> ); };