Weather

Buttons.js

export const Faren = c => Math.round(c * (9 / 5) - 459.67);

export const Celc = k => Math.round(k - 273.15);

Geo.js

export const buildRequestUrl = (lat, lon) => {
  const key = "b8a59b301233a16e12819fc3b17ebc57";
  return `http://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&APPID=${key}`;
};

export const getCurrentLocation = () => {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject, {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    });
  }).catch(e => new Error(e));
};

export const extractPosition = position => ({
  lat: position.coords.latitude,
  lon: position.coords.longitude
});

Weather.js

import React, { Component } from "react";
import { buildRequestUrl, getCurrentLocation, extractPosition } from "./Geo";
import { Faren, Celc } from "./Buttons";

class Weather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      city: "",
      temp: "",
      icon: null,
      checker: false
    };
  }

  CelcConvert() {
    this.setState({
      checker: true
    });
  }

  FarenConvert() {
    this.setState({
      checker: false
    });
  }
  async componentDidMount() {
    if (navigator.geolocation) {
      const position = await getCurrentLocation();
      const { lat, lon } = extractPosition(position);
      const data = await fetch(buildRequestUrl(lat, lon)).then(resp =>
        resp.json()
      );

      if (this.state.checker) {
        this.setState({
          city: data.city.name,
          temp: Faren(data.list[0].main.temp),
          icon: data.list[0].weather[0].icon
        });
      } else {
        this.setState({
          city: data.city.name,
          temp: Celc(data.list[0].main.temp),
          icon: data.list[0].weather[0].icon
        });
      }
    } else {
      alert("No internet connection");
    }
  }

  render() {
    const icon = this.state.icon;
    const temp = this.state.temp;
    const city = this.state.city;
    console.log(this.state.checker);

    return (
      <div>
        <header>
          <div className="headerContainer">
            <p className="headerText">Forest Weather</p>
          </div>
        </header>

        <main>
          <div className="mainContainer">
            <div className="location">{city}</div>
            <div className="tempConvertContainer">
              <div className="temperature">{temp}</div>
              <div>
                <button
                  className="celcium"
                  onClick={this.CelcConvert.bind(this)}
                >
                  C
                </button>
                <button
                  className="farenheit"
                  onClick={this.FarenConvert.bind(this)}
                >
                  F
                </button>
              </div>
            </div>
            <div>
              <img
                src={`http://openweathermap.org/img/w/${icon}.png`}
                className="image"
                alt="weather-image"
              />
            </div>
          </div>
        </main>
        <footer>
          <div className="footerContainer">
            <div>
              <figure>
                <a href="https://github.com/SerafimPoch">
                  <img
                    src="https://octodex.github.com/images/dojocat.jpg"
                    alt="my github account"
                    className="github"
                  />
                </a>
                <figcaption>My GitHub</figcaption>
              </figure>
            </div>
          </div>
        </footer>
      </div>
    );
  }
}

export default Weather;