Cacher is the code snippet organizer for pro developers

// CardTable Component
export default class CardsTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {data: []};
  }

  createDuplicates = (arr) => {
    let doubleArr = arr.slice(0);
    for (let obj of arr) {
      let clone = JSON.parse(JSON.stringify(obj));
      clone.id = `${obj.id}@2`;
      doubleArr.push(clone);
    }
    return doubleArr;
  }

  loadGhipy = (data) => {
    this.setState({data: []});
    let baseUrl = 'http://api.giphy.com/v1/gifs/search?q',
      keyword = data.keyword || 'cards',
      limit = data.number || 1,
      apikey = 'dc6zaTOxFJmzC';
    loadAjax(`${baseUrl}=${keyword}&api_key=${apikey}&limit=${limit}`,
      (xhr) => {
        let cardsData = JSON.parse(xhr.responseText),
          doubleData = this.createDuplicates(cardsData.data);
        this.setState({data: doubleData});
      }
    );
  }

  handleFormSubmit = (formData) => {
    this.setState({data: []});
    this.loadGhipy(formData);
  }

  componentDidMount = () => {
    // let dummyData = [];
    // this.loadGhipy(dummyData);
  }
  render = () => {
    return (
      <div className="cards-table">
        <h2 className="cards-table__title">{this.props.title}</h2>
        <CardsForm onFormSubmit={this.handleFormSubmit} />
        <CardsList data={this.state.data} />
      </div>
    );
  }
}

//CardsForm component
 CardsForm extends React.Component {
	constructor(props) {
	  super(props);
	  this.state = {keyword: '', number: ''};
	}

	handleKeywordChange = (e) => {
  	this.setState({keyword: e.target.value});
	}

	handleNumberChange = (e) => {
  	this.setState({number: e.target.value});
	}

	handleSubmit = (e) => {
		e.preventDefault();
	  let keyword = this.state.keyword.trim().split(' ').join('+'),
	    number   = this.state.number.trim();
	  if (!keyword || !number ) {
	    return;
	  }
			//send request to the server
	  this.props.onFormSubmit({keyword: keyword, number: number});
	  this.setState({keyword: '', number: ''});
	}
	
  render() {
    return (
      <form className="cards-form" onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Choose a keyword"
        	value={this.state.keyword}
          onChange={this.handleKeywordChange}
        />
        <input
        	type="number"
          placeholder="Choose the max number of cards"
          value={this.state.number}
          onChange={this.handleNumberChange}
        />
        <input type="submit" value="Try me!" />
      </form>
    );
  }
}

//CardList Component
class CardsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cardsInPlay: [],
      cardsOutOfPlay: [],
      picks: [],
      flip: 'initial'

    };
  }
  handleCardClick = (i) => {
    let item = this.props.data[i],
      picks = this.state.picks,
      newPicks = picks.concat([item]);

    //add the item clicked to the picks list
    this.setState({picks: newPicks, flip: 'initial'});

    // every 2 times we check
    if (picks.length >= 1) {
      if (this.checkForMatch(item)) {
        setTimeout(() => {
          alert('we have a pick');
        }, 300);
        this.setState({flip: 'pick'});
      } else {
        setTimeout(() => {
          this.setState({flip: 'no-pick'});
          alert('nope');
        }, 1000);
      }
      this.setState({picks: []});
    }
  }

  // We use the slug property to compare if there is a match here, since
  // react needs unique ID's for the components and because we create duplicates
  // adding '@2' to the clones ID's we can't compare for a match using ID
  checkForMatch = (item) => {
    let picks = this.state.picks;
    for (let pick of picks) {
      return pick.slug === item.slug;
    }
  }

  componentWillReceiveProps  = () => {
    setTimeout(() => {
      this.setState({cardsInPlay: this.props.data});
    }, 300);
    this.setState({flip: 'initial'});
  }

  componentWillMount  = () => {
    this.setState({flip: 'initial'});
  }

  renderCards() {
    return this.props.data.map((card, i) => {
      return (
        <Card onClick={() => this.handleCardClick(i)}
          title={card.slug}
          hit={this.state.hit}
          flip={this.state.flip}
          key={card.id}
          bgImage={card.images.original.url}
        />
      );
    });
  }

  render() {
    return (
      <div className="cards-list">
      <ReactCSSTransitionGroup transitionName="c-transition" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
        {this.renderCards()}
      </ReactCSSTransitionGroup>
      </div>
    );
  }

}

//Card Component
export default class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false
    };
  }
  handleclick  = (ev) => {
    this.props.onClick();
    this.setState({active: !this.state.active});
  }

  componentDidUpdate  = () => {

  }

  componentWillReceiveProps  = () => {
    // if (this.props.flipBack) {
    //   this.setState({active: false});
    // }
  }

  render() {
    let imgUrl = this.props.bgImage,
      CardBackStyle = {
        backgroundImage: 'url(' + imgUrl + ')',
        backgroundSize: 'cover'
      },
      activeClass = this.state.active ? 'clicked' : 'not-clicked',
      flipState = this.props.flip,
      classes = `card ${activeClass} ${flipState}`;
    return (
      <div className={classes} onClick={this.handleclick} >
        <div className="card__container">
          <div className="card__front"></div>
          <div className="card__back" style={CardBackStyle}>
            <h4 className="card__title"> {this.props.title} </h4>
          </div>
        </div>
      </div>
    );
  }
}