<commit_before>import * as React from 'react'

import Repository from '../../models/repository'
import { Dispatcher } from '../../lib/dispatcher'
import sanitizedBranchName from './sanitized-branch-name'

interface ICreateBranchProps {
  readonly repository: Repository
  readonly dispatcher: Dispatcher
  readonly branches: ReadonlyArray<string>
  readonly currentBranch: string | null
}

interface ICreateBranchState {
  readonly currentError: Error | null
  readonly proposedName: string | null
  readonly sanitizedName: string | null
  readonly baseBranch: string | null
}

/** The Create Branch component. */
export default class CreateBranch extends React.Component<ICreateBranchProps, ICreateBranchState> {
  public constructor(props: ICreateBranchProps) {
    super(props)

    this.state = {
      currentError: null,
      proposedName: null,
      sanitizedName: null,
      baseBranch: this.props.currentBranch,
    }
  }

  private renderSanitizedName() {
    if (this.state.proposedName === this.state.sanitizedName) { return null }

    return (
      <div>Will be created as {this.state.sanitizedName}</div>
    )
  }

  public render() {
    const proposedName = this.state.proposedName
    const disabled = !proposedName || !!this.state.currentError
    const currentBranch = this.props.currentBranch
    return (
      <div id='create-branch' className='panel'>
        <div className='header'>Create New Branch</div>
        <hr/>

        <label>Name <input type='text' onChange={event => this.onBranchNameChange(event)}/></label>

        {this.renderSanitizedName()}

        <label>From
          <select onChange={event => this.onBaseBranchChange(event)}
                  defaultValue={currentBranch ? currentBranch : undefined}>
            {this.props.branches.map(branch => <option key={branch} value={branch}>{branch}</option>)}
          </select>
        </label>

        <hr/>
        <button onClick={() => this.createBranch()} disabled={disabled}>Create Branch</button>
      </div>
    )
  }

  private onBranchNameChange(event: React.FormEvent<HTMLInputElement>) {
    const str = event.target.value
    const sanitizedName = sanitizedBranchName(str)
    this.setState({
      currentError: this.state.currentError,
      proposedName: str,
      baseBranch: this.state.baseBranch,
      sanitizedName,
    })
  }

  private onBaseBranchChange(event: React.FormEvent<HTMLSelectElement>) {<commit_msg>Don't let the user create a branch name that already exists<commit_after>import * as React from 'react'

import Repository from '../../models/repository'
import { Dispatcher } from '../../lib/dispatcher'
import sanitizedBranchName from './sanitized-branch-name'
import { findIndex } from '../../lib/find'

interface ICreateBranchProps {
  readonly repository: Repository
  readonly dispatcher: Dispatcher
  readonly branches: ReadonlyArray<string>
  readonly currentBranch: string | null
}

interface ICreateBranchState {
  readonly currentError: Error | null
  readonly proposedName: string | null
  readonly sanitizedName: string | null
  readonly baseBranch: string | null
}

/** The Create Branch component. */
export default class CreateBranch extends React.Component<ICreateBranchProps, ICreateBranchState> {
  public constructor(props: ICreateBranchProps) {
    super(props)

    this.state = {
      currentError: null,
      proposedName: null,
      sanitizedName: null,
      baseBranch: this.props.currentBranch,
    }
  }

  private renderError() {
    const error = this.state.currentError
    if (error) {
      return <div>{error.message}</div>
    } else {
      if (this.state.proposedName === this.state.sanitizedName) { return null }

      return (
        <div>Will be created as {this.state.sanitizedName}</div>
      )
    }
  }

  public render() {
    const proposedName = this.state.proposedName
    const disabled = !proposedName || !!this.state.currentError
    const currentBranch = this.props.currentBranch
    return (
      <div id='create-branch' className='panel'>
        <div className='header'>Create New Branch</div>
        <hr/>

        <label>Name <input type='text' onChange={event => this.onBranchNameChange(event)}/></label>

        {this.renderError()}

        <label>From
          <select onChange={event => this.onBaseBranchChange(event)}
                  defaultValue={currentBranch ? currentBranch : undefined}>
            {this.props.branches.map(branch => <option key={branch} value={branch}>{branch}</option>)}
          </select>
        </label>

        <hr/>
        <button onClick={() => this.createBranch()} disabled={disabled}>Create Branch</button>
      </div>
    )
  }

  private onBranchNameChange(event: React.FormEvent<HTMLInputElement>) {
    const str = event.target.value
    const sanitizedName = sanitizedBranchName(str)
    const alreadyExists = findIndex(this.props.branches, b => b === sanitizedName) > -1
    let currentError: Error | null = null
    if (alreadyExists) {
      currentError = new Error(`A branch named ${sanitizedName} already exists`)
    }

    this.setState({
      currentError,
      proposedName: str,
      baseBranch: this.state.baseBranch,
      sanitizedName,
    })
  }

  private onBaseBranchChange(event: React.FormEvent<HTMLSelectElement>) {
{'fraction_non_alphanumeric': 0.11562440959758172, 'fraction_numerical': 0.0001889287738522577, 'mean_word_length': 3.3005686433793664, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 61, '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': '5696168', 'n_tokens_mistral': 1484, 'n_tokens_neox': 1512, 'n_words': 351}