<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { graphql, Query } from 'react-apollo';

import mapErrors from 'react/util/mapErrors';

import createChannelMutation from 'react/components/NewChannelForm/mutations/createChannel';
import newChannelQuery from 'react/components/NewChannelForm/queries/newChannelQuery';

import Text from 'react/components/UI/Text';
import TitledDialog from 'react/components/UI/TitledDialog';
import { Input, Textarea, Label, LabelledCheckbox, LabelledInput } from 'react/components/UI/Inputs';
import ChannelVisibilityPulldown from 'react/components/ChannelVisibilityPulldown';
import NewChannelGroups from 'react/components/NewChannelForm/components/NewChannelGroups';
import LoadingIndicator from 'react/components/UI/LoadingIndicator';

class NewChannelForm extends Component {
  static propTypes = {
    createChannel: PropTypes.func.isRequired,
    onClose: PropTypes.func.isRequired,
    authorType: PropTypes.oneOf(['USER', 'GROUP']),
    group_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  }

  static defaultProps = {
    authorType: 'USER',
    group_id: null,
  }

  state = {
    mode: 'resting',
    title: '',
    description: '',
    visibility: 'CLOSED',
    group_id: this.props.group_id,
    authorType: this.props.authorType,
    visit_channel: true,
    errorMessage: null,
    attributeErrors: {},
  }

  handleInput = fieldName => ({ target: { value: fieldValue } }) =>
    this.setState(prevState => ({
      [fieldName]: fieldValue,
      attributeErrors: {
        ...prevState.attributeErrors,
        [fieldName]: null, // Clear specific error once typing begins
      },
    }));

  handleCheckbox = fieldName => ({ target: { checked } }) =>
    this.setState({ [fieldName]: checked })
      type='checkbox'

  handleVisitChannel = this.handleCheckbox('visit_channel')
  handleTitle = this.handleInput('title')
  handleDescription = this.handleInput('description')

  handleVisibility = visibility =>
    this.setState({ visibility });

  handleAuthor = (group_id) => {
    if (group_id === 0) {
      this.setState({ authorType: 'USER' });
      return;
    }
    this.setState({ group_id, authorType: 'GROUP' });
  }

  handleSubmit = (e) => {
    e.preventDefault();

    const { createChannel, onClose } = this.props;
    const {
      title, description, visibility, group_id, visit_channel,
    } = this.state;

    const variables = {
      title, description, visibility, group_id,
    };

    this.setState({ mode: 'creating' });

    return createChannel({ variables })
      .then(({ data: { create_channel: { channel } } }) => {
        if (visit_channel) {
          window.location.href = channel.href;
          this.setState({ mode: 'redirecting' });
          return;
        }

        this.setState({ mode: 'success' });
        setTimeout(() => onClose(), 500);
      })
      .catch((err) => {
        this.setState({
          mode: 'error',
          ...mapErrors(err),
        });
      });
  }

  render() {
    const {
      mode,
      title,
      description,
      visibility,
      visit_channel,
      errorMessage,
      attributeErrors,
      authorType,
      group_id,
    } = this.state;

    // If the state of the form is not resting or error,
    // disable the button.
    const isDisabled = !(mode === 'resting' || mode === 'error');

    return (
      <Query query={newChannelQuery}>
        {({ data, error, loading }) => {
          if (loading) {
            return (
              <TitledDialog
                title="New channel"
                label={{
                  resting: 'Create channel',
                }[mode]}
                onDone={this.handleSubmit}
              >
                <LoadingIndicator p={6} />
              </TitledDialog>
            );
          }

          if (error) {
            return (
              <TitledDialog
                title="New channel"
                label={{
                  resting: 'Create channel',
                }[mode]}
                onDone={this.handleSubmit}
              >
                <Text color="state.alert" f={2} p={6}>
                  {error.message}
                </Text>
              </TitledDialog>
            );
          }

          const { me: { groups } } = data;

          return (
            <TitledDialog
              title="New channel"
              label={{
                resting: 'Create channel',
                creating: 'Creating...',
                redirecting: 'Redirecting...',
                success: 'Created',
                error: 'Error',
              }[mode]}
              onDone={this.handleSubmit}
              disabled={isDisabled}
            >
              <div>
                <LabelledInput mt={6} mb={7}>
                  <Label>
                    Name
                  </Label>

                  <Input
                    f={7}
                    color={`channel.${visibility.toLowerCase()}`}
                    placeholder="Type channel name"
                    borderless
                    autoFocus
                    required
                    value={title}
                    onChange={this.handleTitle}
                    errorMessage={attributeErrors.title}
                  />
                </LabelledInput>

                {groups.length > 0 &&
                  <LabelledInput my={6} alignItems="start">
                    <Label>
                      Author
                    </Label>

                    <NewChannelGroups
                      onChange={this.handleAuthor}
                      value={group_id}
                    />
                  </LabelledInput>
                }

                <LabelledInput my={6} alignItems="start">
                  <Label>
                    Description
                  </Label>

                  <Textarea
                    placeholder="Describe your channel here"
                    rows={4}
                    value={description}
                    onChange={this.handleDescription}
                    errorMessage={attributeErrors.description}
                  />
                </LabelledInput>

                <LabelledInput my={6} alignItems="start">
                  <Label>
                    Privacy
                  </Label><commit_msg>Fixes new channel author dropdown<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { graphql, Query } from 'react-apollo';

import mapErrors from 'react/util/mapErrors';

import createChannelMutation from 'react/components/NewChannelForm/mutations/createChannel';
import newChannelQuery from 'react/components/NewChannelForm/queries/newChannelQuery';

import Text from 'react/components/UI/Text';
import TitledDialog from 'react/components/UI/TitledDialog';
import { Input, Textarea, Label, LabelledCheckbox, LabelledInput } from 'react/components/UI/Inputs';
import ChannelVisibilityPulldown from 'react/components/ChannelVisibilityPulldown';
import NewChannelGroups from 'react/components/NewChannelForm/components/NewChannelGroups';
import LoadingIndicator from 'react/components/UI/LoadingIndicator';

class NewChannelForm extends Component {
  static propTypes = {
    createChannel: PropTypes.func.isRequired,
    onClose: PropTypes.func.isRequired,
    authorType: PropTypes.oneOf(['USER', 'GROUP']),
    group_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  }

  static defaultProps = {
    authorType: 'USER',
    group_id: null,
  }

  state = {
    mode: 'resting',
    title: '',
    description: '',
    visibility: 'CLOSED',
    group_id: this.props.group_id,
    authorType: this.props.authorType,
    visit_channel: true,
    errorMessage: null,
    attributeErrors: {},
  }

  handleInput = fieldName => ({ target: { value: fieldValue } }) =>
    this.setState(prevState => ({
      [fieldName]: fieldValue,
      attributeErrors: {
        ...prevState.attributeErrors,
        [fieldName]: null, // Clear specific error once typing begins
      },
    }));

  handleCheckbox = fieldName => ({ target: { checked } }) =>
    this.setState({ [fieldName]: checked })
      type='checkbox'

  handleVisitChannel = this.handleCheckbox('visit_channel')
  handleTitle = this.handleInput('title')
  handleDescription = this.handleInput('description')

  handleVisibility = visibility =>
    this.setState({ visibility });

  handleAuthor = (group_id) => {
    if (group_id === 0) {
      this.setState({ authorType: 'USER' });
      return;
    }
    this.setState({ group_id, authorType: 'GROUP' });
  }

  handleSubmit = (e) => {
    e.preventDefault();

    const { createChannel, onClose } = this.props;
    const {
      title, description, visibility, group_id, visit_channel,
    } = this.state;

    const variables = {
      title, description, visibility, group_id,
    };

    this.setState({ mode: 'creating' });

    return createChannel({ variables })
      .then(({ data: { create_channel: { channel } } }) => {
        if (visit_channel) {
          window.location.href = channel.href;
          this.setState({ mode: 'redirecting' });
          return;
        }

        this.setState({ mode: 'success' });
        setTimeout(() => onClose(), 500);
      })
      .catch((err) => {
        this.setState({
          mode: 'error',
          ...mapErrors(err),
        });
      });
  }

  render() {
    const {
      mode,
      title,
      description,
      visibility,
      visit_channel,
      errorMessage,
      attributeErrors,
      authorType,
      group_id,
    } = this.state;

    // If the state of the form is not resting or error,
    // disable the button.
    const isDisabled = !(mode === 'resting' || mode === 'error');

    return (
      <Query query={newChannelQuery}>
        {({ data, error, loading }) => {
          if (loading) {
            return (
              <TitledDialog
                title="New channel"
                label={{
                  resting: 'Create channel',
                }[mode]}
                onDone={this.handleSubmit}
              >
                <LoadingIndicator p={6} />
              </TitledDialog>
            );
          }

          if (error) {
            return (
              <TitledDialog
                title="New channel"
                label={{
                  resting: 'Create channel',
                }[mode]}
                onDone={this.handleSubmit}
              >
                <Text color="state.alert" f={2} p={6}>
                  {error.message}
                </Text>
              </TitledDialog>
            );
          }

          const { me: { groups } } = data;

          return (
            <TitledDialog
              title="New channel"
              label={{
                resting: 'Create channel',
                creating: 'Creating...',
                redirecting: 'Redirecting...',
                success: 'Created',
                error: 'Error',
              }[mode]}
              onDone={this.handleSubmit}
              disabled={isDisabled}
            >
              <div>
                <LabelledInput mt={6} mb={7}>
                  <Label>
                    Name
                  </Label>

                  <Input
                    f={7}
                    color={`channel.${visibility.toLowerCase()}`}
                    placeholder="Type channel name"
                    borderless
                    autoFocus
                    required
                    value={title}
                    onChange={this.handleTitle}
                    errorMessage={attributeErrors.title}
                  />
                </LabelledInput>

                {groups.length > 0 &&
                  <LabelledInput my={6} alignItems="start">
                    <Label>
                      Author
                    </Label>

                    <NewChannelGroups
                      onChange={this.handleAuthor}
                      value={group_id || 0}
                    />
                  </LabelledInput>
                }

                <LabelledInput my={6} alignItems="start">
                  <Label>
                    Description
                  </Label>

                  <Textarea
                    placeholder="Describe your channel here"
                    rows={4}
                    value={description}
                    onChange={this.handleDescription}
                    errorMessage={attributeErrors.description}
                  />
                </LabelledInput>

                <LabelledInput my={6} alignItems="start">
                  <Label>
                    Privacy
                  </Label>
{'fraction_non_alphanumeric': 0.11582164407178121, 'fraction_numerical': 0.002429276702452786, 'mean_word_length': 1.5902171706921047, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 85, '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': '963294', 'n_tokens_mistral': 3325, 'n_tokens_neox': 3188, 'n_words': 682}