'use strict';

import React, { PropTypes } from 'react';
import shouldComponentUpdatePure from '../utils/shouldComponentUpdatePure';

const DEFAULT_LOGIN = 'gaearon';
const GITHUB_REPO = 'https://github.com/gaearon/flux-react-router-example';

function parseFullName(params) {
  if (!params.login) {
    return DEFAULT_LOGIN;
  }
  return params.login + (params.name ? '/' + params.name : '');
}

// TODO: update input when URL changes
export default class Explore extends React.Component {

  shouldComponentUpdate = shouldComponentUpdatePure

  static propTypes = {
    params: PropTypes.shape({
      login: PropTypes.string,
      name: PropTypes.string
    })
  }

  static contextTypes = {
    router: PropTypes.func.isRequired
  }

  constructor() {
    super();

    this.handleKeyUp = this.handleKeyUp.bind(this);
    this.handleGoClick = this.handleGoClick.bind(this);
  }

  render() {
    return (
      <div className='Explore'>
        <p>Type a username or repo full name and hit 'Go':</p>
        <input
          size='45'
          ref='loginOrRepo'
          onKeyUp={this.handleKeyUp}
          defaultValue={parseFullName(this.props.params)} />
        <button onClick={this.handleGoClick}>Go!</button>
        <p>Code on <a href={GITHUB_REPO} target='_blank'>Github</a>.</p>
      </div>
    );
  }

  handleKeyUp(e) {
    if (e.keyCode === 13) {
      this.handleGoClick();
    }
  }

  handleGoClick() {
    const val = React.findDOMNode(this.refs.loginOrRepo).value;
    this.context.router.transitionTo(`/${val}`);
  }
}

@@ -394,47 +394,8 @@
 %0A%7D%0A%0A
-// TODO: update input when URL changes%0A
 expo
@@ -838,16 +838,774 @@
 );%0A  %7D%0A%0A
+  // FIXME: update input when URL changes.%0A  //%0A  // What we want is the %60input%60 field to reflect%0A  // the current URL and still be editable by the user.%0A  //%0A  // Since we want the user to edit the field, we have to%0A  // use an %60uncontrolled%60 component (and provide a%0A  // %60defaultValue%60 to initialize the field).%0A  //%0A  // Problem here is that we can't programmatically update%0A  // the field with other values. To do that, we would have%0A  // to use a %60controlled%60 component with a %60value%60,%0A  // but this will prevent the user to change the field.%0A  //%0A  // To enable user input in this case, we have to provide%0A  // an %60onChange%60 event, which is triggered whenever the%0A  // user types something (and we can't check the key event here).%0A  //%0A  // Any idea?%0A
   render

Add FIXME note