weather.jsx

import React, { Component } from 'react';
import fetch from 'fetch-jsonp';

const cache = {};

export default class Weather extends Component {
  parseWeather = data => {
    // removed for brevity
  };

  fetchWeather() {
    const { fullCity, weatherKey } = this.props;
    const city = encodeURIComponent(fullCity);
    if (cache[city]) {
      this.parseWeather(cache[city]);
    } else {
      fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${weatherKey}`)
        .then(response => response.json())
        .then(data => {
          cache[city] = { ...data };
          this.parseWeather(data);
        })
        .catch(() => {
          this.parseWeather({});
        });
    }
  }

  componentDidMount() {
    this.fetchWeather();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.fullCity !== this.props.fullCity) {
      this.fetchWeather();
    }
  }

  render() {
    // removed for brevity
  }
}