Commenting out the entire application

Author: mxstbr

app/app.js

@@ -1,10 +1,8 @@
 /**
- *
  * app.js
  *
- * This is the entry file for the application, mostly just setup and boilerplate
- * code. Routes are configured at the end of this file!
- *
+ * This is the entry file for the application, only setup and boilerplate
+ * code.
  */
 
 import 'babel-polyfill';
@@ -27,30 +25,25 @@ import { fromJS } from 'immutable';
 const reduxRouterMiddleware = syncHistory(browserHistory);
 import sagaMiddleware from 'redux-saga';
 
-// Observer loading of Open Sans (to remove open sans, remove the <link> tag in
+// Observe loading of Open Sans (to remove open sans, remove the <link> tag in
 // the index.html file and this observer)
 import styles from './containers/App/styles.css';
 const openSansObserver = new FontFaceObserver('Open Sans', {});
 
-// When Open Sans is loaded, add the js-open-sans-loaded class to the body
+// When Open Sans is loaded, add a font-family using Open Sans to the body
 openSansObserver.check().then(() => {
   document.body.classList.add(styles.fontLoaded);
 }, () => {
   document.body.classList.remove(styles.fontLoaded);
 });
 
-// Import the pages
-import App from 'App';
-
-// Import the CSS file, which HtmlWebpackPlugin transfers to the build folder
+// Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
 import '../node_modules/sanitize.css/dist/sanitize.min.css';
 
-/*
-*   Create the store with two middlewares :
-*   1. redux-thunk : Allow us to asynchronous things in the actions
-*   2. reduxRouterMiddleware : Sync dispatched route actions to the history
-*/
-
+// Create the store with two middlewares
+// 1. sagaMiddleware: Imports all the asynchronous flows ("sagas") from the
+//    sagas folder and triggers them
+// 2. reduxRouterMiddleware: Syncs the location/URL path to the state
 import rootReducer from './rootReducer';
 import sagas from './sagas';
 const createStoreWithMiddleware = applyMiddleware(reduxRouterMiddleware, sagaMiddleware(...sagas))(createStore);
@@ -66,6 +59,7 @@ if (module.hot) {
 }
 
 // Set up the router, wrapping all Routes in the App component
+import App from 'App';
 import routes from './routes';
 const rootRoute = {
   component: App,

app/components/A/index.js

@@ -1,4 +1,8 @@
-import React from 'react';
+/**
+ * A link to a certain page, an anchor tag
+ */
+
+import React, { PropTypes } from 'react';
 
 import styles from './styles.css';
 
@@ -18,4 +22,10 @@ class A extends React.Component {
   }
 }
 
+A.propTypes = {
+  className: PropTypes.string,
+  href: PropTypes.string.isRequired,
+  target: PropTypes.string
+};
+
 export default A;

app/components/A/index.test.js

@@ -1,3 +1,7 @@
+/**
+ * Testing our link component
+ */
+
 import A from './index';
 
 import expect from 'expect';

app/components/Button/index.js

@@ -12,11 +12,12 @@ import styles from './styles.css';
 
 function Button(props) {
   const className = props.className ? props.className : styles.button;
+  // Render an anchor tag
   let button = (
     <a className={className} href={props.href} onClick={props.onClick}>{props.children}</a>
   );
 
-
+  // If the Button has a handleRoute prop, we want to render a button
   if (props.handleRoute) {
     button = (
       <button className={className} onClick={ props.handleRoute } >{props.children}</button>

app/components/Button/index.test.js

@@ -1,3 +1,7 @@
+/**
+ * Testing our Button component
+ */
+
 import Button from './index';
 
 import expect from 'expect';

app/components/List/index.js

@@ -6,11 +6,13 @@ class List extends React.Component {
   render() {
     const ComponentToRender = this.props.component;
     let content = (<div></div>);
+    // If we have items, render them
     if (this.props.items) {
       content = this.props.items.map((item, index) => (
         <ComponentToRender key={'item-' + index } item={item} />
       ));
     } else {
+      // Otherwise render a single component
       content = (<ComponentToRender />);
     }
 

app/containers/App/actions.js

@@ -22,26 +22,52 @@ import {
   LOAD_REPOS_ERROR
 } from './constants';
 
+/**
+ * Changes the input field of the form
+ *
+ * @param  {name} name The new text of the input field
+ *
+ * @return {object}    An action object with a type of CHANGE_USERNAME
+ */
 export function changeUsername(name) {
   return {
     type: CHANGE_USERNAME,
     name
   };
 }
 
+/**
+ * Load the repositories, this action starts the getGithubData saga
+ *
+ * @return {object} An action object with a type of LOAD_REPOS
+ */
 export function loadRepos() {
   return {
     type: LOAD_REPOS
   };
 }
 
+/**
+ * Dispatched when the repositories are loaded by the getGithubData saga
+ *
+ * @param  {array} repos The repository data
+ *
+ * @return {object}      An action object with a type of LOAD_REPOS_SUCCESS passing the repos
+ */
 export function reposLoaded(repos) {
   return {
     type: LOAD_REPOS_SUCCESS,
     repos
   };
 }
 
+/**
+ * Dispatched when loading the repositoreis fails
+ *
+ * @param  {object} error The error
+ *
+ * @return {object}       An action object with a type of LOAD_REPOS_ERROR passing the error
+ */
 export function repoLoadingError(error) {
   return {
     type: LOAD_REPOS_ERROR,

app/containers/App/constants.js

@@ -2,10 +2,11 @@
  * AppConstants
  * Each action has a corresponding type, which the reducer knows and picks up on.
  * To avoid weird typos between the reducer and the actions, we save them as
- * constants here.
+ * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
+ * reducers accidentally picking up actions they shouldn't.
  *
  * Follow this format:
- * export const YOUR_ACTION_CONSTANT = 'yourapp/YourContainer/YOUR_ACTION_CONSTANT';
+ * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
  */
 
 export const LOAD_REPOS = 'boilerplate/App/LOAD_REPOS';

app/containers/App/reducer.js

@@ -1,8 +1,8 @@
 /*
  * AppReducer
  *
- * The reducer takes care of our data
- * Using actions, we can change our application state
+ * The reducer takes care of our data. Using actions, we can change our
+ * application state.
  * To add a new action, add it to the switch statement in the reducer function
  *
  * Example:
@@ -18,6 +18,7 @@ import {
 } from './constants';
 import { fromJS } from 'immutable';
 
+// The initial state of the App
 const initialState = fromJS({
   loading: false,
   error: false,
@@ -31,7 +32,7 @@ const initialState = fromJS({
 function globalReducer(state = initialState, action) {
   switch (action.type) {
     case CHANGE_USERNAME:
-      // Delete prefixed '@' from github username
+      // Delete prefixed '@' from the github username
       return state
         .setIn(['userData', 'username'], action.name.replace(/@/gi, ''));
     case LOAD_REPOS:

app/containers/FeaturePage/index.js

@@ -15,12 +15,20 @@ import A from 'A';
 import styles from './styles.css';
 
 export class FeaturePage extends React.Component {
-  onChangeRoute = (url) => {
-    this.props.changeRoute(url);
+  /**
+   * Changes the route
+   *
+   * @param  {string} route The route we want to go to
+   */
+  openRoute = (route) => {
+    this.props.changeRoute(route);
   };
 
-  changeRouteToHome = () => {
-    this.onChangeRoute('/');
+  /**
+   * Changed route to '/'
+   */
+  openHomePage = () => {
+    this.openRoute('/');
   };
 
   render() {
@@ -47,7 +55,7 @@ export class FeaturePage extends React.Component {
             <p><A href="http://www.html5rocks.com/en/tutorials/service-worker/introduction/"><strong>ServiceWorker</strong></A> and <A href="http://www.html5rocks.com/en/tutorials/appcache/beginner/"><strong>AppCache</strong></A> make it possible to use the application offline. As soon as the website has been opened once, it is cached and available without a network connection. <A href="https://developer.chrome.com/multidevice/android/installtohomescreen"><strong><code className={ styles.code }>manifest.json</code></strong></A> is specifically for Chrome on Android. Users can add the website to the homescreen and use it like a native app!</p>
           </li>
         </ul>
-        <Button handleRoute={ this.changeRouteToHome }>Home</Button>
+        <Button handleRoute={ this.openHomePage }>Home</Button>
       </div>
     );
   }