[ React / ReactNative / fetch ] extract api calls into reusable package that can be used in both React & ReactNative

api.js

'use strict';

if (typeof fetch === 'undefined') {
  console.info("Using Fetch Polyfill");

  // Polyfill fetch for clients with no existing fetch implementation
  //
  // Uses github's fetch implementation
  // https://github.com/github/fetch

  require('whatwg-fetch'); //
}
else {
  // This can be removed, but it useful during dev and testing to know if the client natively implements fetch
  console.info("Using Native Fetch");
}


// helper: wrap callback in error aware wrapper
function callbackFactory(next) {
  return function (err, data) {
    if (typeof err !== 'undefined') {
      console.error(err, err.response);
    }
    next(data)
  };
}

// helper: check response.status for request failure conditions
function statusCheck(response) {

  // Check for that request was successful
  if (response.status >= 200 && response.status < 300) {
    return response
  }

  // Handler request failure, pass response for client handling and error reporting
  var errorMsg = 'Api call failed: ' + response.url;
  var error = new Error(errorMsg);
  error.response = response;
  throw error;
}

// helper: convert fetch response to JSON
function toJSON(response) {
  return response.json()
}


// Api widget requests
function widgets(hostname) {
  var endpoint = hostname + '/api/widgets';
  return {
    all: function (cb) {
      fetch(endpoint, {
        credentials: 'include' //  Required to send cookies with the request in Chrome's fetch implementation
      })
        .then(statusCheck)
        .then(toJSON)
        .then(function (json) {
          cb(undefined, json);
        })
        .catch(function (error) {
          cb(error, undefined)
        });
    }
  }
}

// Api factory that configures the api with hostname
function ApiFactory (hostname) {
  if (typeof hostname === 'undefined') {
    console.warn("api: hostname undefined, falling back to relative url support");
    hostname = '';
  }

  return {
    widgets: widgets(hostname),
    callbackFactory: callbackFactory
  }
}

// export ApiFactory for usage
module.exports = ApiFactory

widgets.jsx

var React = require('react'); // or var React = require('react-native');
var apiFactory = require('api');
var Api = apiFactory('http://widgets.domain'); // set hostname prefix, could be process.env.HOSTNAME

var Widgets = React.createClass({

  getInitialState: function () {
    return {
      widgets: []
    }
  },

  componentDidMount: function () {
    Api.widgets.all(
      Api.callbackFactory(data => {
        this.setState({widgets: data});
      })
    );
  },

  renderWidget: function (widget) {
    return <li>{widget.name}</li>
  },

  render: function () {
    return (
      <div>
        {this.state.widgets.map(this.renderWidget)}
      </div>
    )
  }

});

module.exports = Widgets;