Exercise Solution

In the last drip you were asked to finish implementing the 'setFeed' function for the service in our addon and inject this service into your component. Here is how I implemented it:

setFeed(topic){
  // Here we are using a template literal to put the correct topic in our url.
  const url = `http://rss2json.com/api.json?rss_url=https%3A%2F%2Fwww.dailydrip.com%2Ftopics%2F${topic}%2Ffeed.rss`;
  // Here we are setting a topic property on our service that we use to check if we need to fetch a new feed in the getFeed() function.
  this.set('topic', topic);

  let feedPromise = new RSVP.Promise((resolve, reject) =>{
    // Here we are setting up our request:
    var xhr = new XMLHttpRequest();

    xhr.open('GET', url);
    xhr.onreadystatechange = function(){
      if (this.readyState === this.DONE) {
        // If we get a successful response we setup our data object
        if (this.status === 200) {
          let data = JSON.parse(this.responseText);
          // Here is our data formatted as an object like we want
          let returbObj = { title: data.feed.title, feed: data.items};
          // This is where we resolve the promise
          resolve(returbObj);
        } else {
          // If we get a bad response we return an error here.
          reject(new Error(`Failed with status: [${this.status}]`));
        }
      }
    };
    // Here we are just sending our request.
    xhr.send();
  });
  // Here we are setting the property on our service to our promise object that we created above.
  return set(this, 'results', feedPromise);
}

Finally, back in the daily-drip-feed component (addon/components/daily-drip-feed.js) we just add our service.

import Ember from 'ember';
import layout from '../templates/components/daily-drip-feed';

const { Component,
        get,
        inject,
        set
      } = Ember;

export default Component.extend({
  layout,
  feed: inject.service(),
  topic: 'ember',
  init(){
    this._super(...arguments);
    let topic = get(this, 'topic');
    get(this, 'feed').getFeed(topic).then((results) => {
      set(this, 'results', results);
    });
  }
});

So that should work. From the root of our addon, if you were to cd to tests/dummy and run ember s. You can see our addon working.

Tomorrow, we will fill out the addon's readme, publish to npm, and look at running our tests with travis-ci. See you then.