Clock.js

var CryptoJS = require("crypto-js");

var months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

var days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      icon: 3200,
      data: [],
      overlayAmount: 0
    };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000 * 60);
    this.checkAuth();
    this.weatherID = setInterval(() => this.checkAuth(), 1000 * 60);
    this.iconID = setInterval(() => this.updateIcon(), 1000 * 60);
    // console.log("didmount " + this.state.icon);
    this.setState({
      overlayAmount: this.state.overlayAmount
    });
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
    clearInterval(this.weatherID);
    clearInterval(this.iconID);
    // console.log("willmount " + this.state.icon);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  updateIcon() {
    this.setState({
      icon: this.state.data.current_observation.condition.code
    });
  }

  IncrementOverlay = () => {
    var opacity = this.state.overlayAmount;
    var currentOpacity = opacity <= 0.9 ? opacity + 0.1 : (opacity = 0);
    this.setState({ overlayAmount: currentOpacity });
  };

  // Weather API sample javascript code
  // Requires: jQuery and crypto-js (v3.1.9)
  //
  // Copyright 2019 Oath Inc. Licensed under the terms of the zLib license see https://opensource.org/licenses/Zlib for terms.
  checkAuth() {
    var url = "https://weather-ydn-yql.media.yahoo.com/forecastrss";
    var method = "GET";
    var app_id = "***********";
    var consumer_key =
      "*******************************************";
    var consumer_secret = "*****************************************";
    var concat = "&";
    var query = { location: "budapest", format: "json", u: "c" };
    var oauth = {
      oauth_consumer_key: consumer_key,
      oauth_nonce: Math.random()
        .toString(36)
        .substring(2),
      oauth_signature_method: "HMAC-SHA1",
      oauth_timestamp: parseInt(new Date().getTime() / 1000, 0).toString(),
      oauth_version: "1.0"
    };

    var merged = {};
    $.extend(merged, query, oauth);
    // Note the sorting here is required
    var merged_arr = Object.keys(merged)
      .sort()
      .map(function(k) {
        return [k + "=" + encodeURIComponent(merged[k])];
      });
    var signature_base_str =
      method +
      concat +
      encodeURIComponent(url) +
      concat +
      encodeURIComponent(merged_arr.join(concat));

    var composite_key = encodeURIComponent(consumer_secret) + concat;
    var hash = CryptoJS.HmacSHA1(signature_base_str, composite_key);
    var signature = hash.toString(CryptoJS.enc.Base64);

    oauth["oauth_signature"] = signature;
    var auth_header =
      "OAuth " +
      Object.keys(oauth)
        .map(function(k) {
          return [k + '="' + oauth[k] + '"'];
        })
        .join(",");

    $.ajax({
      url: url + "?" + $.param(query),
      headers: {
        Authorization: auth_header,
        "X-Yahoo-App-Id": app_id
      },
      method: "GET",
      success: function(data) {
        // console.log(data);
        this.setState({ data: data });
        document.getElementById("todayWeather").innerHTML =
          data.current_observation.condition.text;
        document.getElementById("todayBackground").style.backgroundImage =
          "url(https://source.unsplash.com/1600x900/?" +
          data.current_observation.condition.text
            .split(/[ ,]+/)
            .filter(function(v) {
              return v !== "";
            })
            .join(",") +
          ")";
        document.getElementById("todayTemp").innerHTML =
          data.current_observation.condition.temperature + "˚C";
        // console.log("actual code " + data.current_observation.condition.code);
      }.bind(this)
    });
  }

  handleClick = e => {
    e.preventDefault();
    window.location.href = "https://unsplash.com/";
  };
  
  
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Container>
          <CurrentTimeContainer>
            <CurrentTime>
              {this.state.date.getHours()}:
              {("0" + this.state.date.getMinutes()).slice(-2)}
            </CurrentTime>
          </CurrentTimeContainer>
          <CurrentDate>
            {days[this.state.date.getDay()]},{" "}
            {months[this.state.date.getMonth()]} {this.state.date.getDate()}{" "}
          </CurrentDate>
          <WeatherContainer>
            <CurrentTemp id="todayTemp">loading...</CurrentTemp>
            <IconContainer>
              <Icon
                name={this.state.icon}
                id="icon"
                width={"100%"}
                height={"100%"}
              />
            </IconContainer>
            <CurrentWeather id="todayWeather">loading...</CurrentWeather>
          </WeatherContainer>
          <Footer>
            <PhotoCredit onClick={this.handleClick}>
              <LogoUnsplash
                alt="unsplash logo"
                // onclick="window.location='https://unsplash.com/'"
                src="https://source.unsplash.com/assets/core/logo-black-df2168ed0c378fa5506b1816e75eb379d06cfcd0af01e07a2eb813ae9b5d7405.svg"
              />
              <span>Photo by Unsplash</span>
            </PhotoCredit>
            <WeatherCredit>
              <a href="https://www.yahoo.com/?ilc=401">
                {" "}
                <LogoYahoo
                  alt="powered by Yahoo"
                  src="https://poweredby.yahoo.com/white_retina.png"
                  width="134"
                  height="29"
                />{" "}
              </a>
            </WeatherCredit>
          </Footer>
          <BackgroundCanvas />
          <BackgroundImage id="todayBackground" />
          <Overlay
            amount={this.state.overlayAmount}
            onClick={this.IncrementOverlay}
          />
        </Container>
      </ThemeProvider>
    );
  }
}