add gulp and run projects actions

bower.json

@@ -9,7 +9,8 @@
     "react": "0.13.2",
     "requirejs": "2.1.17",
     "jquery": "1.10.2",
-    "reflux": "~0.2.7"
+    "reflux": "0.2.7",
+    "bootstrap": "3.3.4"
   },
   "moduleType": [
     "amd"

gulpfile.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var gulp = require('gulp');
+var nodemon = require('gulp-nodemon');
 var gulpReactJade = require('gulp-react-jade-amd');
 
 gulp.task('react-jade', function() {
@@ -8,3 +9,19 @@ gulp.task('react-jade', function() {
 		.pipe(gulpReactJade())
 		.pipe(gulp.dest('static/js/templates'));
 });
+
+gulp.task('develop', function() {
+	gulp.watch('static/js/app/**/*.jade', ['react-jade']);
+	//gulp.watch('static/css/**/*.less', ['make-styles']);
+
+	return nodemon({
+		ignore: ['static/**/*.js', 'app/**/*.js', 'node_modules/**'],
+		script: 'app.js',
+		ext: 'js'
+	});
+});
+
+gulp.task('default', [
+	'react-jade',
+	'develop'
+]);

package.json

@@ -38,8 +38,10 @@
     "bower": "1.4.1",
     "expect.js": "0.3.1",
     "gulp": "3.8.11",
-    "mocha": "1.18.2",
+    "gulp-less": "3.0.3",
+    "gulp-nodemon": "2.0.3",
     "gulp-react-jade-amd": "git://github.com/vladimir-polyakov/gulp-react-jade-amd",
+    "mocha": "1.18.2",
     "nodemon": "1.3.7"
   }
 }

static/js/app/actions/project.js

@@ -2,7 +2,7 @@
 
 define(['reflux'], function(Reflux) {
 	var Actions = Reflux.createActions([
-		'load',
+		'run',
 		'readAll'
 	]);
 

static/js/app/components/projects/item.jade

@@ -1 +1 @@
-h1= item.name
+h1(onClick=onProjectSelect(item.name))= item.name

static/js/app/components/projects/item.js

@@ -1,12 +1,16 @@
 'use strict';
 
 define([
-	'react', 'templates/app/components/projects/item'
+	'react', 'app/actions/project', 'templates/app/components/projects/item'
-], function(React, template) {
+], function(React, ProjectActions, template) {
 	var Component = React.createClass({
+		onProjectSelect: function(projectName) {
+			ProjectActions.run(projectName)
+		},
 		render: function() {
 			return template({
-				item: this.props.item
+				item: this.props.item,
+				onProjectSelect: this.onProjectSelect
 			});
 		}
 	});

static/js/app/stores/project.js

@@ -3,13 +3,18 @@
 define([
 	'reflux', 'app/actions/project', 'app/resources'
 ], function(Reflux, ProjectActions, resources) {
+	var resource = resources.projects;
+
 	var Store = Reflux.createStore({
-		init: function() {
+		listenables: ProjectActions,
-			this.listenTo(ProjectActions.readAll, this.readAll);
+		onRun: function(projectName) {
+			resource.sync('run', {projectName: projectName}, function(err, result) {
+				console.log('run project, shoould get queue');
+			});
 		},
-		readAll: function() {
+		onReadAll: function() {
 			var self = this;
-			resources.projects.sync('read', function(err, projects) {
+			resource.sync('read', function(err, projects) {
 				self.trigger(projects);
 			});
 		}