16 July 2015 – Building a React.JS App – Part 8

Part 8: Making server requests in React with Axios

helpers.js

var axios = require('axios');

function getRepos (username) {
	return axios.get('https://api.github.com/users/' + username + '/repos');
}

function getUserInfo (username) {
	return axios.get('https://api.github.com/users/' + username);
}

var helpers = {
	getGithubInfo: function (username) {
		return axios.all([getRepos(username), getUserInfo(username)]) // Waiting for both "promises" to be resolved before it returns an array of data to .then
			.then(function (arr) {
				return {
					repos: arr[0].data,
					bio: arr[1].data
				}
			});
	}
};

module.exports = helpers;

var axios = require('axios');

function getRepos (username) {

return axios.get('https://api.github.com/users/' + username + '/repos');

}

function getUserInfo (username) {

return axios.get('https://api.github.com/users/' + username);

}

var helpers = {

getGithubInfo: function (username) {

return axios.all([getRepos(username), getUserInfo(username)]) // Waiting for both "promises" to be resolved before it returns an array of data to .then

.then(function (arr) {

return {

repos: arr[0].data,

bio: arr[1].data

}

});

}

};

module.exports = helpers;

Profile.js

var React = require('react');
var Router = require('react-router');
var Repos = require('./Github/Repos.js');
var UserProfile = require('./Github/UserProfile.js');
var Notes = require('./Notes/Notes.js');
var ReactFireMixin = require('reactfire');
var Firebase = require('firebase');
var helpers = require('../utils/helpers');

var Profile = React.createClass({
	
	// Allows to query the route parameter and to get the specific username, also allows communication of react fire with firebase and the profile component
	mixins: [Router.State, ReactFireMixin],
	getInitialState: function () {
		return {
			notes: [],
			bio: {},
			repos: []
		}
	},
	componentDidMount: function () { // Where all AJAX requests will live
		this.ref = new Firebase('https://react-git-profiler.firebaseio.com');
		var childRef = this.ref.child(this.getParams().username);
		this.bindAsArray(childRef, 'notes'); // .bindAsArray is added as a property when we inserted "ReactFireMixin" into the mixins: array above
		
		helpers.getGithubInfo(this.getParams().username)
			.then(function (dataObj) {
				this.setState({
					bio: dataObj.bio,
					repos: dataObj.repos
				});
			}.bind(this)); // this refers to this in the upper contexts
	},
	componentWillUnmount: function () { // So that we don't get listeners keep adding, we will unmount them
		this.unbind('notes');
	},
	handleAddNote: function (newNote) { // Make the function in the component where it will be evoked
		this.ref.child(this.getParams().username).set(this.state.notes.concat([newNote]));  // Get current profile and replace the data at the selected endpoint with the value in .set()
																																												// in .set() we get the previous values in an array and output a new array with newNote added
	},
	render: function () {
		var username = this.getParams().username; // "username" is what we use in the route URL in routes.js
		return (
			<div className="row">
				<div className="col-md-4">
					<UserProfile username={username} bio={this.state.bio} />
				</div>
				<div className="col-md-4">
					<Repos username={username} repos={this.state.repos} />
				</div>
				<div className="col-md-4">
					<Notes
								username={username}
								notes={this.state.notes}
								addNote={this.handleAddNote}
								/>
				</div>
			</div>
		)
	}
});

module.exports = Profile;

var React = require('react');

var Router = require('react-router');

var Repos = require('./Github/Repos.js');

var UserProfile = require('./Github/UserProfile.js');

var Notes = require('./Notes/Notes.js');

var ReactFireMixin = require('reactfire');

var Firebase = require('firebase');

var helpers = require('../utils/helpers');

var Profile = React.createClass({

// Allows to query the route parameter and to get the specific username, also allows communication of react fire with firebase and the profile component

mixins: [Router.State, ReactFireMixin],

getInitialState: function () {

return {

notes: [],

bio: {},

repos: []

}

componentDidMount: function () { // Where all AJAX requests will live

this.ref = new Firebase('https://react-git-profiler.firebaseio.com');

var childRef = this.ref.child(this.getParams().username);

this.bindAsArray(childRef, 'notes'); // .bindAsArray is added as a property when we inserted "ReactFireMixin" into the mixins: array above

helpers.getGithubInfo(this.getParams().username)

.then(function (dataObj) {

this.setState({

bio: dataObj.bio,

repos: dataObj.repos

});

}.bind(this)); // this refers to this in the upper contexts

componentWillUnmount: function () { // So that we don't get listeners keep adding, we will unmount them

this.unbind('notes');

handleAddNote: function (newNote) { // Make the function in the component where it will be evoked

this.ref.child(this.getParams().username).set(this.state.notes.concat([newNote])); // Get current profile and replace the data at the selected endpoint with the value in .set()

// in .set() we get the previous values in an array and output a new array with newNote added

render: function () {

var username = this.getParams().username; // "username" is what we use in the route URL in routes.js

return (