<commit_before>import {Box} from 'grid-emotion';
import {Link} from 'react-router';
import PropTypes from 'prop-types';
import React from 'react';
import createReactClass from 'create-react-class';

import {addErrorMessage, addSuccessMessage} from 'app/actionCreators/indicator';
import {joinTeam, leaveTeam} from 'app/actionCreators/teams';
import {t, tct, tn} from 'app/locale';
import ApiMixin from 'app/mixins/apiMixin';
import {PanelItem} from 'app/components/panels';
import IdBadge from 'app/components/idBadge';

// TODO(dcramer): this isnt great UX

const AllTeamsRow = createReactClass({
  displayName: 'AllTeamsRow',

  propTypes: {
    urlPrefix: PropTypes.string.isRequired,
    access: PropTypes.object.isRequired,
    organization: PropTypes.object.isRequired,
    team: PropTypes.object.isRequired,
    openMembership: PropTypes.bool.isRequired,
  },

  mixins: [ApiMixin],

  getInitialState() {
    return {
      loading: false,
      error: false,
    };
  },

  joinTeam() {
    let {organization, team} = this.props;

    this.setState({
      loading: true,
    });

    joinTeam(
      this.api,
      {
        orgId: organization.slug,
        teamId: team.slug,
      },
      {
        success: () => {
          this.setState({
            loading: false,
            error: false,
          });
          addSuccessMessage(
            tct('You have joined [team]', {
              team: `#${team.slug}`,
            })
          );
        },
        error: () => {
          this.setState({
            loading: false,
            error: true,
          });
          addErrorMessage(
            tct('Unable to join [team]', {
              team: `#${team.slug}`,
            })
          );
        },
      }
    );
  },

  leaveTeam() {
    let {organization, team} = this.props;

    this.setState({
      loading: true,
    });

    leaveTeam(
      this.api,
      {
        orgId: organization.slug,
        teamId: team.slug,
      },
      {
        success: () => {
          this.setState({
            loading: false,
            error: false,
          });
          addSuccessMessage(
            tct('You have left [team]', {
              team: `#${team.slug}`,
            })
          );
        },
        error: () => {
          this.setState({
            loading: false,
            error: true,
          });
          addErrorMessage(
            tct('Unable to leave [team]', {
              team: `#${team.slug}`,
            })
          );
        },
      }
    );
  },

  render() {
    let {access, team, urlPrefix, openMembership} = this.props;
    let display = <IdBadge team={team} />;

    return (
      <PanelItem p={0} align="center">
        <Box flex="1" p={2}>
          {access.has('team:read') ? (
            <Link to={`${urlPrefix}teams/${team.slug}/`}>{display}</Link>
          ) : (
            display
          )}
        </Box>
        <Box flex="1" p={2}>
          {tn('%d Member', '%d Members', team.memberCount)}
        </Box>
        <Box p={2}>
          {this.state.loading ? (
            <a className="btn btn-default btn-sm btn-loading btn-disabled">...</a>
          ) : team.isMember ? (
            <a className="leave-team btn btn-default btn-sm" onClick={this.leaveTeam}>
              {t('Leave Team')}
            </a><commit_msg>ref(ui) Place member count so that it uses existing design patterns<commit_after>import {Box} from 'grid-emotion';
import {Link} from 'react-router';
import PropTypes from 'prop-types';
import React from 'react';
import createReactClass from 'create-react-class';

import {addErrorMessage, addSuccessMessage} from 'app/actionCreators/indicator';
import {joinTeam, leaveTeam} from 'app/actionCreators/teams';
import {t, tct, tn} from 'app/locale';
import ApiMixin from 'app/mixins/apiMixin';
import {PanelItem} from 'app/components/panels';
import IdBadge from 'app/components/idBadge';

// TODO(dcramer): this isnt great UX

const AllTeamsRow = createReactClass({
  displayName: 'AllTeamsRow',

  propTypes: {
    urlPrefix: PropTypes.string.isRequired,
    access: PropTypes.object.isRequired,
    organization: PropTypes.object.isRequired,
    team: PropTypes.object.isRequired,
    openMembership: PropTypes.bool.isRequired,
  },

  mixins: [ApiMixin],

  getInitialState() {
    return {
      loading: false,
      error: false,
    };
  },

  joinTeam() {
    let {organization, team} = this.props;

    this.setState({
      loading: true,
    });

    joinTeam(
      this.api,
      {
        orgId: organization.slug,
        teamId: team.slug,
      },
      {
        success: () => {
          this.setState({
            loading: false,
            error: false,
          });
          addSuccessMessage(
            tct('You have joined [team]', {
              team: `#${team.slug}`,
            })
          );
        },
        error: () => {
          this.setState({
            loading: false,
            error: true,
          });
          addErrorMessage(
            tct('Unable to join [team]', {
              team: `#${team.slug}`,
            })
          );
        },
      }
    );
  },

  leaveTeam() {
    let {organization, team} = this.props;

    this.setState({
      loading: true,
    });

    leaveTeam(
      this.api,
      {
        orgId: organization.slug,
        teamId: team.slug,
      },
      {
        success: () => {
          this.setState({
            loading: false,
            error: false,
          });
          addSuccessMessage(
            tct('You have left [team]', {
              team: `#${team.slug}`,
            })
          );
        },
        error: () => {
          this.setState({
            loading: false,
            error: true,
          });
          addErrorMessage(
            tct('Unable to leave [team]', {
              team: `#${team.slug}`,
            })
          );
        },
      }
    );
  },

  render() {
    let {access, team, urlPrefix, openMembership} = this.props;
    let display = (
      <IdBadge
        team={team}
        description={tn('%d Member', '%d Members', team.memberCount)}
      />
    );

    return (
      <PanelItem p={0} align="center">
        <Box flex="1" p={2}>
          {access.has('team:read') ? (
            <Link to={`${urlPrefix}teams/${team.slug}/`}>{display}</Link>
          ) : (
            display
          )}
        </Box>
        <Box p={2}>
          {this.state.loading ? (
            <a className="btn btn-default btn-sm btn-loading btn-disabled">...</a>
          ) : team.isMember ? (
            <a className="leave-team btn btn-default btn-sm" onClick={this.leaveTeam}>
              {t('Leave Team')}
            </a>
{'fraction_non_alphanumeric': 0.14655942806076855, 'fraction_numerical': 0.0014894250819183796, 'mean_word_length': 1.6967871485943775, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2146603', 'n_tokens_mistral': 2014, 'n_tokens_neox': 2035, 'n_words': 421}