giphy input

gistfile1.txt

"use strict";

import React from "react";
import Czas from 'absolvent/React/Czas'

function padNumbers(number) {
  return String(100 + number).substr(1, 2);
}

export default class Timer extends React.Component {
  static propTypes = {
    additionalTime: React.PropTypes.number.isRequired,
    countdown: React.PropTypes.number.isRequired
  };

  constructor(props) {
    super(props);

    this.state = {
      timeLeft: props.countdown,
      additionalTime: props.additionalTime,
      pause: false,
      buttonName: "Pauza",
      img: "",
      input: "funny+cat"
    };

    this.myBind("handleClickButton", "handleAdditionalTime", "refresh", "change");
  }

  change(e) {
    this.setState({input: e.target.value});
  }
  refresh() {
    let that = this;
    let rand = Math.floor((Math.random() * 100));
    fetch("http://api.giphy.com/v1/gifs/search?q=" + encodeURIComponent(this.state.input) + "&api_key=dc6zaTOxFJmzC&limit=1&offset="+rand).then(function (response) {
      return response.json();
    }).then(function (json) {
      console.log(json.data);
      that.setState({img:json.data[0].images.fixed_height.url})
    })
  }
  componentDidMount() {
    this.setDecrementCountdownInterval();
    this.refresh();
  }

  componentWillUnmount() {
    this.clearCountdownInterval();
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      pause: nextProps.pausee
    });
  }

  // ES6 - manualnie przekazuje `this` do metody
  // rest parameter - tablica wartosci od 0 do methods.length (ES6)
  myBind(...methods) {
    methods.forEach((method) => this[method] = this[method].bind(this));
  }

  setDecrementCountdownInterval() {
    this.decrementCountdownInterval = setInterval(() => {
      return this.decrementCountdown();
    }, 1000);
  }

  clearCountdownInterval() {
    clearInterval(this.decrementCountdownInterval);
  }

  decrementCountdown() {
    if (this.state.timeLeft < 1) {
      this.clearCountdownInterval();
    } else {
      this.setState({
        timeLeft: this.state.timeLeft - 1
      });
    }
  }

  handleClickButton() {
    if (this.state.pause === false) {
      this.setState({
        pause: true,
        buttonName: "Wznów"
      });
      this.clearCountdownInterval();
    } else {
      this.setState({
        pause: false,
        buttonName: "Pauza"
      });
      this.setDecrementCountdownInterval();
    }
  }

  handleAdditionalTime() {
    this.setState({
      timeLeft: this.state.timeLeft + this.state.additionalTime
    });
  }

  render() {
    if (this.state.timeLeft < 1) {
      return (
          <div style={{
                    backgroundColor: "#f55",
                    color: "#fff"
                }}>
            time is up
          </div>
      );
    }

    return (
        <div>
          <input type="text" value={this.state.input} onChange={this.change}/>
          <button onClick={this.refresh}>Refresh</button>
          <br />
          <img src={this.state.img} width="300"/>
          <p>
            {padNumbers(this.state.timeLeft / 3600)}:
            {padNumbers(this.state.timeLeft / 60)}:
            {padNumbers(this.state.timeLeft % 60)}
          </p>
          <Czas pausee={this.state.pause} />
        </div>
    );
  }
}