Part 15: ES6 Refactor Firebase and React Binding with re-base
Profile.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 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;*/ |
AddNote.js bugfix
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
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;*/ |
bundles.js bugfix
1 2 3 |
_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 |