24 July 2015 – Everydays on pause

I have had great fun doing the “everydays” project doing it for over a month now. It became the perfect platform for me to experiment, learn new technologies and generally switch off from other work.

However, I have decided to put the project on hold. The reason for that is that most of my attention is going towards a new online course that I am building, also managing existing projects, reading and maintaining my health (sleep, training, food). It comes a point where you can spread yourself too thin to manage everything efficiently and keep the quality up. When that happens it is time to let go of something for the benefit of the rest and this is the point where I am at.

I really liked this project and there are great benefits to be take from it, thus my plans are to return and continue it once the course is launched. I will be sure to update this page once that happens. Meanwhile you can browse bellow and see what I have been doing during the project’s length.

23 July 2015 – Building a React.JS App – Part 15 – Everydays

Part 15: ES6 Refactor Firebase and React Binding with re-base

Profile.js

import React from 'react';
import Repos from './Github/Repos';
import UserProfile from './Github/UserProfile';
import Notes from './Notes/Notes';
import helpers from '../utils/helpers';
import Rebase from 're-base';

var base = Rebase.createClass('https://react-git-profiler.firebaseio.com');

class Profile extends React.Component {
	constructor (props) { // We have access to a constructor func in ES6 classes that is initialized with the class
		super(props);
		this.state = {
			notes: [],
			bio: {},
			repos: []
		};
	}
	init () {
		this.ref = base.bindToState(this.router.getCurrentParams().username, { // When the .username endpoint changes, this will update the state for 'notes' 
			 context: this,
			 asArray: true,
			 state: 'notes'
		});
		
		helpers.getGithubInfo(this.router.getCurrentParams().username)
		.then((dataObj) => {
			this.setState({
				bio: dataObj.bio,
				repos: dataObj.repos
			});
		}); // this refers to this in the upper contexts
	}
	componentWillMount () {
		this.router = this.context.router;
	}
	componentDidMount () { // Where all AJAX requests will live
		this.init();
	}
	componentWillUnmount () { // So that we don't get listeners keep adding, we will unmount them
		 base.removeBinding(this.ref);
	}
	componentWillReceiveProps () {
		base.removeBinding(this.ref);
		this.init();
	}
	handleAddNote (newNote) { // Make the function in the component where it will be evoked
		 base.post(this.router.getCurrentParams().username,  {
		 	data: this.state.notes.concat([newNote])
		 });																																								// in .set() we get the previous values in an array and output a new array with newNote added
	}
	render () {
		var username = this.router.getCurrentParams().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.bind(this)}
								/>
				</div>
			</div>
		)
	}
};

Profile.contextTypes = {
	 router: React.PropTypes.func.isRequired
};

export default 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'); - Removed, can't use mixins with ES6 classes
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: []
		}
	},
	init: function () {
		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
	},
	componentDidMount: function () { // Where all AJAX requests will live
		this.ref = new Firebase('https://react-git-profiler.firebaseio.com');
		this.init();
	},
	componentWillUnmount: function () { // So that we don't get listeners keep adding, we will unmount them
		this.unbind('notes');
	},
	componentWillReceiveProps: function () {
		this.unbind('notes');
		this.init();
	},
	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;*/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

import React from 'react';

import Repos from './Github/Repos';

import UserProfile from './Github/UserProfile';

import Notes from './Notes/Notes';

import helpers from '../utils/helpers';

import Rebase from 're-base';

var base = Rebase.createClass('https://react-git-profiler.firebaseio.com');

class Profile extends React.Component {

constructor (props) { // We have access to a constructor func in ES6 classes that is initialized with the class

super(props);

this.state = {

notes: [],

bio: {},

repos: []

};

}

init () {

this.ref = base.bindToState(this.router.getCurrentParams().username, { // When the .username endpoint changes, this will update the state for 'notes'

context: this,

asArray: true,

state: 'notes'

});

helpers.getGithubInfo(this.router.getCurrentParams().username)

.then((dataObj) => {

this.setState({

bio: dataObj.bio,

repos: dataObj.repos

});

}); // this refers to this in the upper contexts

}

componentWillMount () {

this.router = this.context.router;

}

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

this.init();

}

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

base.removeBinding(this.ref);

}

componentWillReceiveProps () {

base.removeBinding(this.ref);

this.init();

}

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

base.post(this.router.getCurrentParams().username, {

data: this.state.notes.concat([newNote])

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

}

render () {

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

return (

</div>

</div>

<Notes

username={username}

notes={this.state.notes}

addNote={this.handleAddNote.bind(this)}

</div>

)

}

};

Profile.contextTypes = {

router: React.PropTypes.func.isRequired

};

export default 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'); - Removed, can't use mixins with ES6 classes

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: []

}

init: function () {

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

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

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

this.init();

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

this.unbind('notes');

componentWillReceiveProps: function () {

this.unbind('notes');

this.init();

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>

</div>

<Notes

username={username}

notes={this.state.notes}

addNote={this.handleAddNote}

</div>

)

}

});

module.exports = Profile;*/

AddNote.js bugfix

import React from 'react';

class AddNote extends React.Component {
	
	HandleSubmit () {
		var newNote = this.refs.note.getDOMNode().value;  // This is getting the value from the input below with a ref="note"
		this.refs.note.getDOMNode().value = '';
		this.props.addNote(newNote);
	} // Don't have to put commas - technically not in an object
	render () {
		return (
			<div className="input-group">
				<input type="text" className="form-control" ref="note" placeholder="Add New Note" />
				<span className="input-group-btn">
					<button type="submit" className="btn btn-default" onClick={this.HandleSubmit.bind(this)}>Add Note</button>
				</span>
			</div>
		)
	}
};

AddNote.propTypes = {
	username: React.PropTypes.string.isRequired,
	addNote: React.PropTypes.func.isRequired
};

export default AddNote;

/*var AddNote = React.createClass({
	propTypes: {
		username: React.PropTypes.string.isRequired,
		addNote: React.PropTypes.func.isRequired
	},
	handleSubmit: function () {
		var newNote = this.refs.note.getDOMNode().value;  // This is getting the value from the input below with a ref="note"
		this.refs.note.getDOMNode().value = '';
		this.props.addNote(newNote);
	},
	render: function () {
		return (
			<div className="input-group">
				<input type="text" className="form-control" ref="note" placeholder="Add New Note" />
				<span className="input-group-btn">
					<button type="submit" className="btn btn-default" onClick={this.handleSubmit}>Add Note</button>
				</span>
			</div>
		)
	}
});

module.exports = AddNote;*/

import React from 'react';

class AddNote extends React.Component {

HandleSubmit () {

var newNote = this.refs.note.getDOMNode().value; // This is getting the value from the input below with a ref="note"

this.refs.note.getDOMNode().value = '';

this.props.addNote(newNote);

} // Don't have to put commas - technically not in an object

render () {

return (

</span>

</div>

)

}

};

AddNote.propTypes = {

username: React.PropTypes.string.isRequired,

addNote: React.PropTypes.func.isRequired

};

export default AddNote;

/*var AddNote = React.createClass({

propTypes: {

username: React.PropTypes.string.isRequired,

addNote: React.PropTypes.func.isRequired

handleSubmit: function () {

var newNote = this.refs.note.getDOMNode().value; // This is getting the value from the input below with a ref="note"

this.refs.note.getDOMNode().value = '';

this.props.addNote(newNote);

render: function () {

return (

</span>

</div>

)

}

});

module.exports = AddNote;*/

bundles.js bugfix

_reactRouter2['default'].run(_configRoutes2['default'], function (Root, state) {
		_react2['default'].render(_react2['default'].createElement(Root, state), document.getElementById('app'));
	}); // Removing a "P;" that was redundant

_reactRouter2['default'].run(_configRoutes2['default'], function (Root, state) {

_react2['default'].render(_react2['default'].createElement(Root, state), document.getElementById('app'));

}); // Removing a "P;" that was redundant

22 July 2015 – Building a React.JS App – Part 14 – Everydays

Part 14: ES6 Refactor Routing without Mixins

Home.js

import React from 'react';

class Home extends React.Component {
	render () {
		return (
			<h2 className="text-center">
				Search by Github Username Above
			</h2>
		)
	}
};

export default Home; 

/*var React = require('react');

var Home = React.createClass({
	render: function () {
		return (
			<h2 className="text-center">
				Search by Github Username Above
			</h2>
		)
	}
});

module.exports = Home;*/

import React from 'react';

class Home extends React.Component {

render () {

return (

Search by Github Username Above

</h2>

)

}

};

export default Home;

/*var React = require('react');

var Home = React.createClass({

render: function () {

return (

Search by Github Username Above

</h2>

)

}

});

module.exports = Home;*/

Main.js

import React from 'react';
import { RouteHandler } from 'react-router';
import SearchGithub from './SearchGithub'; 

class Main extends React.Component {
	render () {
		return (
			<div className="main-container">
				<nav className="navbar navbar-default" role="navigation">
					<div className="col-sm-7 col-sm-offset-2" style={{marginTop: 15}}>
						<SearchGithub />
					</div>
				</nav>
				<div className="container">
					<RouteHandler {...this.props} />
				</div>
			</div>
		)
	}
}

export default Main;

/*var React = require('react');
var RouteHandler = require('react-router').RouteHandler;
var SearchGithub = require('./SearchGithub');

var Main = React.createClass({
	render: function () {
		return (
			<div className="main-container">
				<nav className="navbar navbar-default" role="navigation">
					<div className="col-sm-7 col-sm-offset-2" style={{marginTop: 15}}>
						<SearchGithub />
					</div>
				</nav>
				<div className="container">
					<RouteHandler />
				</div>
			</div>
		)
	}
});

// We don't want this file to decide when to render this component,
// so we are removing it
//React.render(<Main />, document.getElementById('app'));

// Instead we are going to expert the compontent, so that whenever you
// do require('Main') it will render the compontent above.
module.exports = Main;*/

import React from 'react';

import { RouteHandler } from 'react-router';

import SearchGithub from './SearchGithub';

class Main extends React.Component {

render () {

return (

</div>

</nav>

</div>

)

}

export default Main;

/*var React = require('react');

var RouteHandler = require('react-router').RouteHandler;

var SearchGithub = require('./SearchGithub');

var Main = React.createClass({

render: function () {

return (

</div>

</nav>

</div>

)

}

});

// We don't want this file to decide when to render this component,

// so we are removing it

//React.render(<Main />, document.getElementById('app'));

// Instead we are going to expert the compontent, so that whenever you

// do require('Main') it will render the compontent above.

module.exports = Main;*/

app.js

import React from 'react';
import Router from 'react-router';
import routes from './config/routes';

// This file will be in charge of the render methods

/*Router.run(routes, function (Root) {	
	// Similar to what we did initially in Main.js, but instead the component is replaced dynamically and rendered here;
	React.render(<Root />, document.getElementById('app'));
});*/

Router.run(routes, (Root, state) => {
	React.render (<Root {...state} />, document.getElementById('app'));
});

import React from 'react';

import Router from 'react-router';

import routes from './config/routes';

// This file will be in charge of the render methods

/*Router.run(routes, function (Root) {

// Similar to what we did initially in Main.js, but instead the component is replaced dynamically and rendered here;

React.render(<Root />, document.getElementById('app'));

});*/

Router.run(routes, (Root, state) => {

React.render (<Root {...state} />, document.getElementById('app'));

});

SearchGithub.js

import React from 'react';

class SearchGithub extends React.Component {
	handleSubmit () {
		// We pass the router through this.context so that we can use it with the
		// .transitionTo method as this. is not referring to the mixing function in our ES6 refactor 
		var router = this.context.router;
		var username = this.refs.username.getDOMNode().value;
		this.refs.username.getDOMNode().value='';
		router.transitionTo('profile', {username: username}); // Available from the Router.Navigation mixing as a property
	}
	render () {
		return (
			<div className="col-sm-12">
				<form onSubmit={this.handleSubmit.bind(this)}>
					<div className="form-group col-sm-7">
						<input type="text" className="form-control" ref="username" />
					</div>
					<div className="form-group col-sm-5">
						<button type="submit" className="btn btn-block btn-primary">Search Github</button>
					</div>
				</form>
			</div>
		)
	}
};


// Because in ES6 we can't use mixins, we need to pass the function to the component
// through the property contextTypes which then can access the function within the component
SearchGithub.contextTypes = {
	router: React.PropTypes.func.isRequired
};

export default SearchGithub;

/*var React = require('react');
var Router = require('react-router');

var SearchGithub = React.createClass({
	mixins: [Router.Navigation],
	handleSubmit: function () {
		var username = this.refs.username.getDOMNode().value;
		this.refs.username.getDOMNode().value='';
		this.transitionTo('profile', {username: username}); // Available from the Router.Navigation mixing as a property
		// We pass the route we want to transition to - in routes.js we defined the router as "profile" = <Route name="profile" path="profile/:username" handler={Profile} />
	},
	render: function () {
		return (
			<div className="col-sm-12">
				<form onSubmit={this.handleSubmit}>
					<div className="form-group col-sm-7">
						<input type="text" className="form-control" ref="username" />
					</div>
					<div className="form-group col-sm-5">
						<button type="submit" className="btn btn-block btn-primary">Search Github</button>
					</div>
				</form>
			</div>
		)
	}
});

module.exports = SearchGithub;*/

import React from 'react';

class SearchGithub extends React.Component {

handleSubmit () {

// We pass the router through this.context so that we can use it with the

// .transitionTo method as this. is not referring to the mixing function in our ES6 refactor

var router = this.context.router;

var username = this.refs.username.getDOMNode().value;

this.refs.username.getDOMNode().value='';

router.transitionTo('profile', {username: username}); // Available from the Router.Navigation mixing as a property

}

render () {

return (

</div>

<button type="submit" className="btn btn-block btn-primary">Search Github</button>

</div>

</form>

</div>

)

}

};

// Because in ES6 we can't use mixins, we need to pass the function to the component

// through the property contextTypes which then can access the function within the component

SearchGithub.contextTypes = {

router: React.PropTypes.func.isRequired

};

export default SearchGithub;

/*var React = require('react');

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

var SearchGithub = React.createClass({

mixins: [Router.Navigation],

handleSubmit: function () {

var username = this.refs.username.getDOMNode().value;

this.refs.username.getDOMNode().value='';

this.transitionTo('profile', {username: username}); // Available from the Router.Navigation mixing as a property

// We pass the route we want to transition to - in routes.js we defined the router as "profile" = <Route name="profile" path="profile/:username" handler={Profile} />

render: function () {

return (

</div>

<button type="submit" className="btn btn-block btn-primary">Search Github</button>

</div>

</form>

</div>

)

}

});

module.exports = SearchGithub;*/

21 July 2015 – Building a React.JS App – Part 13 – Everydays

Part 13: Building a React App: ES6 Refactor propTypes in ES6

UserProfile.js

import React from 'react';

class UserProfile extends React.Component {
	render () {
		return (
			<div>
				<h3> User Profile </h3>
				<ul className="list-group">
					{this.props.bio.avatar_url && <li className="list-group-item"><img src={this.props.bio.avatar_url} /></li>}
					{this.props.bio.name && <li className="list-group-item">Name: {this.props.bio.name}</li>}
					{this.props.bio.login && <li className="list-group-item">Username: {this.props.bio.username}</li>}
					{this.props.bio.email && <li className="list-group-item">Email: {this.props.bio.email}</li>}
					{this.props.bio.location && <li className="list-group-item">Location: {this.props.bio.location}</li>}
					{this.props.bio.company && <li className="list-group-item">Company: {this.props.bio.company}</li>}
					{this.props.bio.followers && <li className="list-group-item">Followers: {this.props.bio.followers}</li>}
					{this.props.bio.following && <li className="list-group-item">Following: {this.props.bio.following}</li>}
					{this.props.bio.public_repos && <li className="list-group-item">Public repos: {this.props.bio.public_repos}</li>}
					{this.props.bio.blog && <li className="list-group-item">Blog: <a href={this.props.bio.blog}>{this.props.bio.blog}</a></li>}
				</ul>
			</div>
		)
	}
}

UserProfile.propTypes = {
	username: React.PropTypes.string.isRequired,
	bio: React.PropTypes.object.isRequired
}

export default UserProfile;

/*var UserProfile = React.createClass({
	propTypes: {
		username: React.PropTypes.string.isRequired,
		bio: React.PropTypes.object.isRequired
	},
	render: function () {
		return (
			// Each component can have it's own state, but when it receives it's
			// state from the parent component this is called props
			
			// These are the names of the props, because in the main component Profile.js
			// We have passed them as such: <UserProfile username={username} bio={this.state.bio} />
			<div>
				<h3> User Profile </h3>
				<ul className="list-group">
					{this.props.bio.avatar_url && <li className="list-group-item"><img src={this.props.bio.avatar_url} /></li>}
					{this.props.bio.name && <li className="list-group-item">Name: {this.props.bio.name}</li>}
					{this.props.bio.login && <li className="list-group-item">Username: {this.props.bio.username}</li>}
					{this.props.bio.email && <li className="list-group-item">Email: {this.props.bio.email}</li>}
					{this.props.bio.location && <li className="list-group-item">Location: {this.props.bio.location}</li>}
					{this.props.bio.company && <li className="list-group-item">Company: {this.props.bio.company}</li>}
					{this.props.bio.followers && <li className="list-group-item">Followers: {this.props.bio.followers}</li>}
					{this.props.bio.following && <li className="list-group-item">Following: {this.props.bio.following}</li>}
					{this.props.bio.public_repos && <li className="list-group-item">Public repos: {this.props.bio.public_repos}</li>}
					{this.props.bio.blog && <li className="list-group-item">Blog: <a href={this.props.bio.blog}>{this.props.bio.blog}</a></li>}
				</ul>
			</div>
		)
	}
});

module.exports = UserProfile;*/

import React from 'react';

class UserProfile extends React.Component {

render () {

return (

<div>

<h3> User Profile </h3>

{this.props.bio.avatar_url && <li className="list-group-item"><img src={this.props.bio.avatar_url} /></li>}

{this.props.bio.name && <li className="list-group-item">Name: {this.props.bio.name}</li>}

{this.props.bio.login && <li className="list-group-item">Username: {this.props.bio.username}</li>}

{this.props.bio.email && <li className="list-group-item">Email: {this.props.bio.email}</li>}

{this.props.bio.location && <li className="list-group-item">Location: {this.props.bio.location}</li>}

{this.props.bio.company && <li className="list-group-item">Company: {this.props.bio.company}</li>}

{this.props.bio.followers && <li className="list-group-item">Followers: {this.props.bio.followers}</li>}

{this.props.bio.following && <li className="list-group-item">Following: {this.props.bio.following}</li>}

{this.props.bio.public_repos && <li className="list-group-item">Public repos: {this.props.bio.public_repos}</li>}

{this.props.bio.blog && <li className="list-group-item">Blog: <a href={this.props.bio.blog}>{this.props.bio.blog}</a></li>}

</ul>

</div>

)

}

UserProfile.propTypes = {

username: React.PropTypes.string.isRequired,

bio: React.PropTypes.object.isRequired

}

export default UserProfile;

/*var UserProfile = React.createClass({

propTypes: {

username: React.PropTypes.string.isRequired,

bio: React.PropTypes.object.isRequired

render: function () {

return (

// Each component can have it's own state, but when it receives it's

// state from the parent component this is called props

// These are the names of the props, because in the main component Profile.js

// We have passed them as such: <UserProfile username={username} bio={this.state.bio} />