import Image from "next/image"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import workspaceService from "services/workspace.service"; // ui import { Avatar, CustomSearchSelect, CustomSelect, Input } from "components/ui"; // types import { IGithubRepoCollaborator } from "types"; import { IUserDetails } from "./root"; // fetch-keys import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; type Props = { collaborator: IGithubRepoCollaborator; index: number; users: IUserDetails[]; setUsers: React.Dispatch>; }; const importOptions = [ { key: "map", label: "Map to existing", }, { key: "invite", label: "Invite by email", }, { key: false, label: "Do not import", }, ]; export const SingleUserSelect: React.FC = ({ collaborator, index, users, setUsers }) => { const router = useRouter(); const { workspaceSlug } = router.query; const { data: members } = useSWR( workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug.toString()) : null, workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug.toString()) : null ); const options = members?.map((member) => ({ value: member.member.email, query: (member.member.first_name && member.member.first_name !== "" ? member.member.first_name : member.member.email) + " " + member.member.last_name ?? "", content: (
{member.member.first_name && member.member.first_name !== "" ? member.member.first_name + "(" + member.member.email + ")" : member.member.email}
), })) ?? []; return (
{`${collaborator.login}

{collaborator.login}

{importOptions.find((o) => o.key === users[index].import)?.label}
} onChange={(val: any) => { const newUsers = [...users]; newUsers[index].import = val; newUsers[index].email = ""; setUsers(newUsers); }} optionsClassName="w-full" noChevron > {importOptions.map((option) => (
{option.label}
))}
{users[index].import === "invite" && ( { const newUsers = [...users]; newUsers[index].email = e.target.value; setUsers(newUsers); }} placeholder="Enter email of the user" className="py-1 border-gray-200 text-xs" /> )} {users[index].import === "map" && members && ( { const newUsers = [...users]; newUsers[index].email = val; setUsers(newUsers); }} optionsClassName="w-full" /> )} ); };