export function TeamSideBar()

in frontend/src/components/teamsAndOrgs/teams.js [254:354]
100 lines of code
9 McCabe index (conditional complexity)

export function TeamSideBar({ team, members, managers, requestedToJoin }: Object) {
  const [isUserTeamManager] = useEditTeamAllowed(team);

  return (
    <ReactPlaceholder
      showLoadingAnimation={true}
      type="media"
      rows={20}
      ready={
        typeof team.teamId === 'number' &&
        typeof organisations !== undefined &&
        typeof pmTeams !== undefined
      }
    >
      <div className="cf pb2">
        <div className="w-20 pv2 dib fl">
          <span className="blue-grey v-mid">
            <FormattedMessage {...messages.team} /> #{team.teamId}
          </span>
        </div>
        <div className="w-80 dib fr tr">
          {isUserTeamManager && (
            <EditButton url={`/manage/teams/${team.teamId}`}>
              <FormattedMessage {...messages.editTeam} />
            </EditButton>
          )}
          {team.inviteOnly && <InviteOnlyBox className="pv2 ph3 dib mh1 mv1" />}
          <VisibilityBox visibility={team.visibility} extraClasses="pv2 ph3 mh1 mv1 dib" />
        </div>
      </div>
      <h3 className="f2 ttu blue-dark fw7 barlow-condensed v-mid ma0 dib ttu">{team.name}</h3>
      <p className="blue-grey">{team.description}</p>
      <div className="cf">
        <div className="w-100 w-50-m fl">
          <h4>
            <FormattedMessage {...messages.organisation} />
          </h4>
          <Link
            className="link blue-dark fw5 mr2 underline"
            to={`/organisations/${team.organisationSlug}`}
          >
            <p>
              {typeof team.logo === 'string' && (
                <img src={team.logo} alt="organisation logo" className="mw4" />
              )}
            </p>
            {team.organisation}
          </Link>
        </div>
        <div className="w-100 w-50-m fl">
          <h4>
            <FormattedMessage {...messages.managers} />
          </h4>
          {managers.length === 0 ? (
            <span className="f6 blue-grey">
              <FormattedMessage {...messages.noManagers} />
            </span>
          ) : (
            <div className="cf db mt3">
              {managers.map((user, n) => (
                <UserAvatar
                  key={n}
                  username={user.username}
                  picture={user.pictureUrl}
                  size="large"
                  colorClasses="white bg-blue-grey mv1"
                />
              ))}
            </div>
          )}
          <h4>
            <FormattedMessage {...messages.members} />
          </h4>
          {members.length === 0 ? (
            <span className="f6 blue-grey">
              <FormattedMessage {...messages.noMembers} />
            </span>
          ) : (
            <div className="cf db mt3">
              {members.map((user, n) => (
                <UserAvatar
                  key={n}
                  username={user.username}
                  picture={user.pictureUrl}
                  colorClasses="white bg-blue-grey mv1"
                />
              ))}
            </div>
          )}
          <div className="cf db mt3">
            {requestedToJoin && (
              <span className="red pr5-ns">
                <FormattedMessage {...messages.waitingApproval} />
              </span>
            )}
          </div>
        </div>
      </div>
    </ReactPlaceholder>
  );
}