Part 10: Making a route detection using React componentWillReceiveProps and updating the data
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 |
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: [] } }, 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; |
