import React from 'react';

import Button from '../button/button';

class Word extends React.Component {

  // flow definitions

  static propTypes = {
    word: React.PropTypes.object
  // word: React.PropTypes.instanceOf(Map).isRequired
  };

  state: {
  animate: boolean;
  }

  // constructor

  constructor(props) {
    super( props );

    this.state = {
      animate: true
    };
  }

  componentWillReceiveProps(nextProps) {

    if (nextProps !== this.props) {
      this.setState( {
        animate: true
      } );
    }
  }

  render() {

    const {word} = this.props;
    const nextWord = word.get( 'word' );

    // remove animation classes after duration
    if (this.state.animate) {
      const animateDuration = 1200;

      setTimeout( () => {
        this.setState( {
          animate: false
        } );
      }, animateDuration );
    }

    // render
    return (

    <div className='word'>
      <p key={ nextWord } className={ this.state.animate ? 'animated flip' : '' }>
        { nextWord }
      </p>
      { /* button */ }
      <div className='btn-container'>
        <Button {...this.props}/>
      </div>
    </div>
    );
  }
}

export default Word;

@@ -1,12 +1,21 @@
+// flow%0A%0A
 import React
@@ -70,16 +70,45 @@
 tton';%0A%0A
+type Props = %7B%0Aword: Map%0A%7D;%0A%0A
 class Wo
@@ -166,119 +166,20 @@
 %0A%0A  
-static propTypes = %7B%0A    word: React.PropTypes.object%0A  // word: React.PropTypes.instanceOf(Map).isRequired%0A  %7D
+props: Props
 ;%0A%0A 
@@ -810,16 +810,17 @@
  render%0A
+%0A
     retu

use flow