Merge branch 'master' into group-tracker

gulpfile.js

@@ -3,79 +3,37 @@ var gutil = require('gulp-util');
 var browserify = require('browserify');
 var watchify = require('watchify');
 var source = require('vinyl-source-stream');
-var spawn = require('child_process').spawn;
 var packageJson = require('./package.json');
-var nodemon = require('nodemon');
 var mocha = require('gulp-mocha');
 
-var logBuffer = function (buf) {
-  gutil.log(buf.toString());
-};
-
 gulp.task('build', ['set prod', 'bundle']);
 
 gulp.task('set prod', function () {
   process.env.NODE_ENV = 'production';
   gutil.log(gutil.colors.red('NODE_ENV='+process.env.NODE_ENV));
 });
 
-gulp.task('dev', ['watch-bundle', 'watch-serve'], function () {
+gulp.task('dev', ['watch-bundle'], function () {
   gutil.log('Now running in development mode.');
 });
 
-gulp.task('serve', function () {
-  var args = packageJson.scripts.start.split(' ');
-  var command = args.shift();
-  var server = spawn(command, args);
-
-  server.stdout.on('data', logBuffer);
-  server.stderr.on('data', logBuffer);
-
-  server.on('close', function (code) {
-    gutil.log('child process exited with code ' + code);
-  });
-});
-
-gulp.task('watch-serve', function () {
-  var server = nodemon({
-    debug: true,
-    watch: 'server/',
-    stdout: false
-  });
-  server.on('readable', function () {
-    this.stdout.on('data', logBuffer);
-    this.stderr.on('data', logBuffer);
-  });
-
-  server.on('close', function (code) {
-    gutil.log('child process exited with code ' + code);
-  });
-});
-
-gulp.task('bundle', function () {
-  var b = browserify();
-  b.add('./src/app.jsx');
-
-  return b.bundle()
-    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
+var bundleStream = function (browserify) {
+  return browserify.bundle()
+    .on('error', gutil.log.bind(gutil, gutil.colors.red('Browserify error:')))
     .pipe(source('app.js'))
     .pipe(gulp.dest('./dist/js/'));
+};
+
+gulp.task('bundle', function () {
+  var b = browserify(packageJson.browserify.config);
+  return bundleStream(b);
 });
 
 gulp.task('watch-bundle', function () {
-  var w = watchify(browserify(watchify.args));
-  w.on('log', gutil.log);
-  w.add('./src/app.jsx');
-
-  var watchifyBundle = function () {
-    return w.bundle()
-      .on('error', gutil.log.bind(gutil, 'Browserify Error'))
-      .pipe(source('app.js'))
-      .pipe(gulp.dest('./dist/js/'));
-  };
-  w.on('update', watchifyBundle);
-
-  return watchifyBundle();
+  var w = watchify(browserify(packageJson.browserify.config));
+  w.on('log', gutil.log.bind(gutil, 'Watchify:'));
+  w.on('update', bundleStream.bind(w, w));
+  return bundleStream(w);
 });
 
 gulp.task('mocha', function () {

package.json

@@ -4,12 +4,13 @@
   "version": "0.1.0",
   "description": "A Web app containing tools for managing a Star Wars Role Playing Game (FFG).",
   "license": "ISC",
-  "main": "server/main.js",
-  "scripts": {
-    "start": "node server/main.js"
-  },
   "private": true,
   "browserify": {
+    "config": {
+      "entries": ["src/app.jsx"],
+      "cache": {},
+      "packageCache": {}
+    },
     "transform": [
       "babelify",
       "browserify-shim"
@@ -18,9 +19,6 @@
   "browserify-shim": {
     "jquery": "global:$"
   },
-  "dependencies": {
-    "express": "^4.12.4"
-  },
   "devDependencies": {
     "babel": "^5.8.21",
     "babelify": "^6.1.3",
@@ -30,7 +28,6 @@
     "gulp-mocha": "^2.1.3",
     "gulp-util": "^3.0.4",
     "mocha": "^2.2.5",
-    "nodemon": "^1.3.7",
     "react": "^0.13.3",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.2.1"

src/CharacterTable.jsx

@@ -1,8 +1,24 @@
 var React = require('react');
 
 var CharacterTable = React.createClass({
+  getInitialState() {
+    return {
+      characters: []
+    }
+  },
+
+  componentDidMount() {
+    $.ajax('/api/characters')
+      .done((data) => {
+        if (!this.isMounted) return;
+        this.setState({
+          characters: data
+        });
+      });
+  },
+
   render: function () {
-    var rows = this.props.data.map((character) => {
+    var rows = this.state.characters.map((character) => {
       return (
         <tr>
           <th scope="row">{character.name}</th>