switch API to weatherstack

[rantibi]

Apixu is now officially relaunching as weatherstack - a new weather API service.
Apixu API is now deprecated and scheduled for shutdown on October 14th, 2019.
https://weatherstack.com/quickstart

[thammuio]

@farahat80 - this is a good component and we like it. Is there any migration plan in place for this?

[alenniu]

@farahat80 Please help us, I spent a lot of my time on my project and it depended partly on this component.

[rantibi]

I did some quick a dirty fix using OWM:
OpenWeatherMapApi.js

import { utils } from './utils';

export default class OpenWeatherMapApi {
  constructor(unit, apiKey) {
    this.unit = unit;
    this.apiKey = apiKey;
    this.baseApiUrl = 'https://api.openweathermap.org/data/2.5/forecast';
  }
  getForecast(args) {
    const self = this;
    const endpoint = self.baseApiUrl;
    const params = Object.assign(
      {
        appid: self.apiKey,
        cnt: 40,
        lang: self.lang,
      },
      args,
    );
    const promise = axios
      .get(endpoint, {
        params,
      })
      .then(response => {
        const data = response.data;
        if (data) {
          return self._map(data, params.lang);
        }
        return {};
      });
    return promise;
  }
  _map(data, lang) {
    const daysData = data.list;
    const mapped = {};
    mapped.location = data.city;
    mapped.days = daysData
      .filter(daysData => daysData.dt_txt.indexOf('12:00:00') !== -1)
      .map(item => ({
        date: utils.formatDate(item.dt_txt, lang),
        dt_txt: item.dt_txt,
        description: item.weather[0] ? item.weather[0].description : null,
        icon: item.weather[0] ? item.weather[0].icon : null,
        temperature: {
          min: item.main.temp_min.toFixed(0),
          max: item.main.temp_max.toFixed(0),
        },
        wind: item.wind.speed.toFixed(0),
        humidity: item.main.humidity,
      }));
    if (mapped.days.length > 0) {
      mapped.days[0].temperature.current = data.list[0].main.temp;
    }
    return mapped;
  }
}

icons.js

  icons: {
    '01d': 'wi-day-sunny',
    '02d': 'wi-day-cloudy',
    '03d': 'wi-cloudy',
    '04d': 'wi-cloudy',
    '09d': 'wi-showers',
    '10d': 'wi-day-rain',
    '11d': 'wi-day-thunderstorm',
    '13d': 'wi-day-snow-thunderstorm',
    '50d': 'wi-fog',
    '01n': 'wi-night-clear',
    '02n': 'wi-night-alt-cloudy',
    '03n': 'wi-cloudy',
    '04n': 'wi-cloudy',
    '09n': 'wi-showers',
    '10n': 'wi-night-rain',
    '11n': 'wi-night-thunderstorm',
    '13n': 'wi-night-snow-thunderstorm',
    '50n': 'wi-fog',
  }
};

and this should be change too in Weather.js:

    const { type, lon, lat, city, lang, unit } = this.props;
    switch (type) {
      case 'city':
        return { q: city, lang };
      case 'geo':
        return {
          lat,
          lon,
          lang,
          units: unit,
        };
      default:
        return {
          q: 'auto:ip',
          lang,
        };
    }
  }```

I don't have the time at the moment to do it properly, but you can use it as a temporary solution

[farahat80]

I am working on a quick migration and it should be ready by the end of this week, also a newer version is being developed that will allow you to choose between multiple weather provider

[thammuio]

I am working on a quick migration and it should be ready by the end of this week, also a newer version is being developed that will allow you to choose between multiple weather provider

Awesome. Will look forward to it. Thanks.

[farahat80]

Due to WeatherStack not providing forecast data on the free plan, so I decided to switch the component temporarily to use OpenWeather API which provides 1000 calls for free including forecast data, a newer version has been released 0.5.2.

This is a temporary solution, the whole component is being refactored at the moment to decouple the provider implementation from the component UI allowing easier integrations with more than one provider

Thanks @rantibi for your code, that saved me a lot of time