Weather-app

Geo.js

const buildRequestUrl = (lat, lon) => {
  const key = "b8a59b301233a16e12819fc3b17ebc57";
  let url =
    "https://api.openweathermap.org/data/2.5/forecast?" +
    "lat=" +
    lat +
    "&lon=" +
    lon +
    "&APPID=" +
    key;
  return url;
};

export const getGeodata = (lat, lon) =>
  fetch(buildRequestUrl(lat, lon)).then(res => res.json());

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

Weather.js

import React, { Component } from "react";

import { getGeodata, extractPosition } from "./Geo";

class Weather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      city: ""
    };
  }

  async componentDidMount() {
    if (navigator.geolocation) {
      const { lat, lon } = await navigator.geolocation.getCurrentPosition(
        extractPosition
      );
      const data = getGeodata(lat, lon);
      let city = data.city.name;
      this.setState({ city });
    } else {
      alert("No internet connection");
    }
  }

  render() {
    // console.log(this.sendRequest());
    return (
      <div>
        <header>
          <div className="headerContainer">
            <p className="headerText">Forest Weather</p>
          </div>
        </header>

        <main>
          <div className="mainContainer">
            <div className="location">{this.state.city}</div>
            <div className="tempConvertContainer">
              <div className="temperature">-2</div>
              <div>
                <button className="celcium">C</button>
                <button className="farenheit">F</button>
              </div>
            </div>
            <div className="image">
              <img src="https://avatars0.githubusercontent.com/u/14139853?s=400&v=4" />
            </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;