Creating Components

// use strict by default
'use strict';

/**
 * ES6 import syntax.
 */
import React = from 'react';
import Router, { Link, RouteHandler } = from 'react-router';
import JWTStore from '../stores/JWTStore';

var UserPage = React.createClass({

  /**
   * displayName is used mostly in error messages, but also
   * in the React chrome extension. Always include a 
   * displayName.
   */
  displayName: 'UserPage',

  /**
   * The render function is required. It must return a valid
   * React Element. We are using ES6 syntax to declare the
   * function.
   */
  render() {
    return (
      /**
       * jsx is compiled to function calls. Due to this, there
       * must always be a *single* Element returned in the 
       * render() call
       */
      <div>
          This will be the base wrapper of the 'Users' page where either your or another users profile will appear <br/>
          This will let you see your public facing page at /u/username/ too <br/>
          'Your' homepage/dashboard will live at /home/<br/>
          /**
           * RouteHandler comes from React-Router and displays
           * the sub-route's content (more on this in Routing)
           */
          <RouteHandler />
      </div>
    );
  }
});

var RootUser = React.createClass({
  displayName: 'RootUser',
  render() {
    return (
      <div>
        <p/>
        This is root user page.<br/>
        When not looking at a specific user or an owned image<br/>
        This will show a list of repos/images owned by the root user <br/>
        /**
         * Link is from React-Router and requires the params
         * to be set as an object. The `repo` route is 
         * designated in Routes.jsx
         */
        <Link to='repo' params={{user:'testing', splat:'1234'}}>This could be a image box of some sort</Link>
      </div>
    );
  }
});

var User = React.createClass({
  displayName: 'User',
  /**
   * contextTypes are required to access Fluxible or React-Router
   * functions. In this case, we specify that React-Router is 
   * required for this Element.
   */
  contextTypes: {
    router: React.PropTypes.func.isRequired
  },
  render() {
    return (
      <div>
        <p/>
        /**
         * Using the router from contextTypes:
         */
        This is the UID: {this.context.router.getCurrentParams().uid}<br/>
        This is main user page.<br/>
        This will show a list of repos/images owned by the user <br/>
        <RouteHandler />
      </div>
      );
  }
});

/**
 * Only export one Element per file.
 */
module.exports = {
  userpage: UserPage,
  rootuser: RootUser,
  user: User
};