Communication Between Independent Components in React using PubSubJS

PubSubReactExample.jsx

/**
 * PubSubReactExample.jsx
 * https://anthonymineo.com/communication-between-independent-components-in-react-using-pubsubjs/
 * 
 * Anthony Mineo (@Mineo27)
 *
 * Disclaimer: The goal was to make this example easy to follow.
 * Obviously, there are a number of optimizations that can be done to the code below.
**/

// Imports / Requires 
import React from 'react';
import PubSub from 'pubsub-js';
import request from 'then-request';
import DropzoneComponent from 'react-dropzone-component';
// Use your preferred method for loading a component's CSS
require('dropzone/dist/min/dropzone.min.css');




/**
 * Component that makes a request for the list of files
 * @class FileList
 */
export class FileList extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      fileCollection: [],
      endpoint: 'http://website.com/api/filelist.json'
    }
  }

  componentWillMount(){
    // This is where we subscribe this class to the 'GET FILES' subscription.
    // once a publish event for 'GET FILES' has been fired, FileList.subscriber() will be triggered.
    this.token = PubSub.subscribe('GET FILES', this.subscriber.bind(this));
  }
  componentDidMount(){
    PubSub.publish('GET FILES', this.token);
  }
  componentWillUnmount(){
    PubSub.unsubscribe(this.token);
  }

  // The function that is subscribed to the publisher
  subscriber(msg, data){
    var self = this;
    request('GET', 'http://website.com/api/endpoint.json').done(function(result){
      this.setState({
        fileCollection: result
      });
    }.bind(self));
  }

  // return our files in an list
  returnFileInfo(){
    return this.state.fileCollection.map(function(file){
      return <li key={file.id}>
                <a href={file.url}>
                  <strong>{file.name}</strong>
                </a>
              </li>;
    });
  }

  render(){
    return  <ul>{this.returnFileInfo()}</ul>;
  }
}



/**
 * Dropzone File Uploader Component
 * @class FileUploader
 */
export class FileUploader extends React.Component {
  constructor(props){
    super(props);
    // Our DropzoneComponent config
    this.state = {
      componentConfig : {
        postUrl: 'endpoint.cfm?action=uploadFile'
      },
      djsConfig:{},
      eventHandlers:{
        success: this.updateFileList.bind(this)
      }
    };
  }


  updateFileList(response){
    // Example response object from our server could be 
    /*
        {
            id:10,
            url:'https://anthonymineo.com/mycoolimage.png',
            name:'Making beer'
        }
    */
    // You can also publish strings if you like



    // The magic publish event
    // This lets the subscribers know that they need to do their job
    // and trigger any events that need to take place
    /*
    PubSub.publish('GET FILES', response);
    */
    PubSub.publish('GET FILES', 'EAT PIE');
  }



  render(){
    return <DropzoneComponent 
            config={this.state.componentConfig} 
            eventHandlers={this.state.eventHandlers} 
            djsConfig={this.state.djsConfig} />;
  }
}