import { ArtistSearch, Label, TeamUser } from 'backend-api/models'; import { ROLES } from 'common-v2/constants'; import { getJoinedNames } from 'common/transducers'; import { ViewTeamModalMode } from 'common/types/artist'; import React, { useCallback, useMemo } from 'react'; import { bem } from 'utils/bem'; import { Badge } from '../badge'; import { Icon } from '../icon'; import { AllProjectsLoader } from '../loaders/all-projects-loader'; import { getTeamMembers } from '../team/transducers'; import { TooltipedText } from '../tooltiped-text'; import { Body, H3 } from '../typography'; import { UserAvatar } from '../user-avatar'; import { BEM_CLASS, SViewTeamModal } from './s-view-team-modal'; interface Props { isOpened: boolean; isLoading?: boolean; users?: TeamUser[]; mode: ViewTeamModalMode; onClose(): void; label?: Label; canEditArtistTeam?: boolean; artist?: ArtistSearch; onEditTeam?(): void; dataSelector?: string; } const classes = bem(BEM_CLASS); export const ViewTeamModal = React.memo( ({ isOpened, isLoading = false, users = [], mode, canEditArtistTeam = false, onClose, label, artist, onEditTeam, }: Props) => { const onEditTeamClick = useCallback(() => { if (!!onEditTeam && canEditArtistTeam && !!artist) { onEditTeam(); } }, [artist, canEditArtistTeam, onEditTeam]); const isArtistTeamMode = mode === ViewTeamModalMode.ARTIST_TEAM && !!label && !!artist; const title = isArtistTeamMode ? `${artist?.name || 'Artist'}'s Team (${users.length})` : `Project Collaborators (${users.length})`; const footerTitle = `To edit the artist team go to ${artist?.name || 'Artist'} page.`; const shouldDisplayFooter = isArtistTeamMode && canEditArtistTeam; const list = useMemo( () => getTeamMembers(users).map(user => { const { id, name, labels, roles } = user; const labelNames = getJoinedNames(labels); const roleNames = getJoinedNames(roles); const isEditorOrAdmin = roles?.some(({ id }) => id === ROLES.EDITOR.id || id === ROLES.ADMIN.id); const dataSelector = 'view-team-list-item'; return (
{name} {labelNames}
{roleNames}
); }), [users] ); return ( <>

{title}

{isArtistTeamMode && ( )}
{isLoading ? (
) : (
{list}
)} {shouldDisplayFooter && (
{footerTitle}
Go to Artist Page
)} ); } );