Make it work!

.gitignore

@@ -31,5 +31,6 @@ firehose/vendor
 # Users Environment Variables
 .lock-wscript
 
+.env
 apps/public/firehose/stylesheets
 apps/public/firehose/javascript/firehose-app.js

.jshintrc

@@ -7,6 +7,7 @@
     "process": false,
     "require": false
   },
+  "esnext": true,
   "camelcase": true,
   "bitwise": true,
   "browser": true,
@@ -21,6 +22,5 @@
   "quotmark": true,
   "trailing": true,
   "undef": true,
-  "unused": "vars",
-  "maxlen": 80
+  "unused": "vars"
 }

Gulpfile.js

@@ -10,5 +10,10 @@ require('./firehose/Gulpfile');
  * files to be written before we move on to the next task,
  * because in this case we can't run parallel tasks.
  */
-gulp.task('default', ['lint-server', 'firehose']);
+
+gulp.task('build', ['firehose-build', 'lint-server']);
+
+gulp.task('watch', ['watch-firehose'])
+
+gulp.task('default', ['build', 'watch', "watch-server", 'run-server']);
 

README.md

@@ -1,14 +1,26 @@
 # Webmaker-Firehose
 
+Webmaker Firehose is a simple app server and React app that displays the latest
+makes created on Webmaker.org, and enables them to be featured on Webmaker.org by
+admins.
+
 ## Setup
 
-Clone this repo, then run `npm install` to get everything set up.
+Required for local dev:
+
+* [MakeAPI server](https://github.com/mozilla/makeapi)
+* [Webmaker login](https://github.com/mozilla/login.webmaker.org) - for login, ensure your account has admin privileges.
+* [Webmaker.org server](https://github.com/mozilla/webmaker.org) - for viewing the gallery
+* [Make Valet](https://github.com/mozilla/make-valet) - for proxying make url requests
+* To create/edit makes, you'll want a webmaker app like [Thimble](https://github.com/mozilla/thimble.webmaker.org)
+or [Popcorn](https://github.com/mozilla/popcorn.webmaker.org)
+
+Clone this repo, then run `npm install` to get dependencies set up.
+
+run `cp server/config/defaults.env .env` to create an environment file. Change any
+values you need to. The default settings should work out of the box with other webmaker apps.
 
 To perform a build for the current implementation, run `gulp`.
 
 To test the current implementation, run `node server` and
 point your browser at [http://localhost:5001](http://localhost:5001)
-
-### Development with live reloading
-
-TODO

firehose/Gulpfile.js

@@ -4,6 +4,23 @@ var watch = require('gulp-watch');
 // where are we running?
 var path = require("path");
 var cwd = path.dirname(__filename);
+var lessSRC = cwd + '/less/*.less';
+
+/**
+ * LESS compilation is independent of any other task
+ */
+gulp.task('less', function() {
+  var less = require('gulp-less');
+  var plumber = require('gulp-plumber');
+  var sourcemaps = require('gulp-sourcemaps');
+
+  return gulp.src(lessSRC)
+      .pipe(plumber())
+      .pipe(sourcemaps.init())
+      .pipe(less())
+      .pipe(sourcemaps.write())
+      .pipe(gulp.dest(cwd + '/public/stylesheets'))
+});
 
 /**
  * Browserify bundling of firehose app.
@@ -12,6 +29,7 @@ gulp.task('bundle-firehose', function() {
   var browserify = require('browserify');
   var transform = require('vinyl-transform');
   var reactify = require('reactify');
+  var to5ify = require("6to5ify");
   var source = require('vinyl-source-stream');
 
   // Don't process react. We'll link to its CDN minified version.
@@ -23,14 +41,14 @@ gulp.task('bundle-firehose', function() {
   });
 
   return browserify(cwd + '/components/firehose-app.jsx')
+    .transform(to5ify)
     .transform(reactify)
     .transform(donottouch)
     .bundle()
     .pipe(source('firehose-app.js'))
     .pipe(gulp.dest(cwd + '/build/'));
 });
 
-
 /**
  * Minify firehose app
  */
@@ -45,7 +63,7 @@ gulp.task('minify-firehose', ['bundle-firehose'], function() {
 
 // used in both the lint and watch tasks
 var jsxSrc = cwd + '/components/**/*.js*';
-
+var mixinSrc = cwd + '/mixins/**/*.js*';
 
 /**
  * Javascript and JSX linting
@@ -57,7 +75,7 @@ gulp.task('lint-firehose', function() {
   var jsxhinter = require('jshint-jsx');
   jsxhinter.JSHINT = jsxhinter.JSXHINT;
 
-  return gulp.src(jsxSrc)
+  return gulp.src([jsxSrc, mixinSrc])
     .pipe(jshint({ linter: 'jshint-jsx' }))
     .pipe(jshint.reporter('default'));
 });
@@ -69,13 +87,12 @@ gulp.task('lint-firehose', function() {
  * files to be written before we move on to the next task,
  * because in this case we can't run parallel tasks.
  */
-gulp.task('firehose', ['lint-firehose', 'minify-firehose']);
-
+gulp.task('firehose-build', ['lint-firehose', 'less', 'minify-firehose']);
 
-/**
- * Automatic rebuilding when .jsx files are changed
- */
 gulp.task('watch-firehose', function() {
   watch(jsxSrc, function() { gulp.start('lint-firehose'); });
   watch(jsxSrc, function() { gulp.start('minify-firehose'); });
+  watch(mixinSrc, function() { gulp.start('lint-firehose'); });
+  watch(mixinSrc, function() { gulp.start('minify-firehose'); });
+  watch(lessSRC, function() { gulp.start('less'); });
 });

firehose/actions/FirehoseActions.js

@@ -0,0 +1,51 @@
+var FirehoseDispatcher = require("../dispatcher/FirehoseDispatcher");
+var FirehoseConstants = require("./FirehoseConstants");
+var EventEmitter = require("events").EventEmitter;
+
+var FirehoseActions = Object.assign({}, EventEmitter.prototype, {
+  toggleFeature: function() {
+    FirehoseDispatcher.dispatch({
+      actionType: FirehoseConstants.TOGGLE_FEATURE
+    });
+  },
+  trash: function() {
+    FirehoseDispatcher.dispatch({
+      actionType: FirehoseConstants.TRASH
+    });
+  },
+  navigate: function(delta) {
+    FirehoseDispatcher.dispatch({
+      actionType: FirehoseConstants.NAVIGATE,
+      delta: delta
+    });
+  },
+  addListener: function(actionType, callback) {
+    this.on(actionType, callback);
+  },
+  deleteListener: function(actionType, callback) {
+    this.removeListener(actionType, callback);
+  },
+  emitEvent: function(actionType, data) {
+    this.emit(actionType, data);
+  }
+});
+
+FirehoseDispatcher.register(function(payload) {
+  switch(payload.actionType) {
+    case FirehoseConstants.TOGGLE_FEATURE:
+      FirehoseActions.emitEvent(FirehoseConstants.TOGGLE_FEATURE);
+      break;
+
+    case FirehoseConstants.TRASH:
+      FirehoseActions.emitEvent(FirehoseConstants.TRASH);
+      break;
+
+    case FirehoseConstants.NAVIGATE:
+      FirehoseActions.emitEvent(FirehoseConstants.NAVIGATE, payload.delta);
+      break;
+    default:
+      // no op
+  }
+})
+
+module.exports = FirehoseActions;

firehose/actions/FirehoseConstants.js

@@ -0,0 +1,7 @@
+var FirehoseConstants = {
+  "TOGGLE_FEATURE": "TOGGLE_FEATURE",
+  "TRASH": "TRASH",
+  "NAVIGATE": "NAVIGATE"
+};
+
+module.exports = FirehoseConstants;

firehose/components/Firehose.jsx

@@ -1,43 +1,94 @@
 var React = require("react");
-var WebmakerLoginUX = require("./WebmakerLoginUX.jsx");
-var FirehoseEditor = require("./FirehoseEditor.jsx");
+var Header = require ("./header/Header.jsx");
+var FirehoseEditor = require("./views/FirehoseEditor.jsx");
+var FirehoseActions = require("../actions/FirehoseActions");
 
 var Firehose = React.createClass({
   getInitialState: function() {
     return {
       loggedIn: false,
-      isAdmin: false
+      isAdmin: false,
+      viewState: "one-up"
     };
   },
-  handleLoggedIn: function(user) {
+  componentDidMount: function() {
+    window.addEventListener("keyup", this.onKeyUpTriggered);
+    window.addEventListener("keydown", this.onKeyDownTriggered);
+    this.setState({
+      csrfToken: document.querySelector("meta[name='csrf-token']").getAttribute("content")
+    });
+  },
+  componentWillUnmount: function() {
+    window.removeEventListener("keyup", this.onKeyUpTriggered);
+    window.removeEventListener("keydown", this.onKeyDownTriggered);
+  },
+  onLoggedIn: function(user) {
     this.setState({
       loggedIn: true,
       isAdmin: !!user.isAdmin
     });
-    this.render();
   },
-  handleLoggedOut: function() {
+  onLoggedOut: function() {
     this.setState({
       loggedIn: false,
       isAdmin: false
     });
-    this.render();
+  },
+  onToggle: function(newState) {
+    this.setState({
+      viewState: newState
+    });
+  },
+  onKeyDownTriggered: function (event) {
+    if (event.keyCode === 32 && event.target === document.body) {
+      event.preventDefault();
+    }
+  },
+  onKeyUpTriggered: function(evt) {
+    let keyCode = evt.keyCode;
+    // 'f' or spacebar pressed
+    if (keyCode === 70 || keyCode === 32 ) {
+      FirehoseActions.toggleFeature();
+      // 'd' or Backspace pressed
+    } else if ( keyCode === 68 || keyCode === 8 ) {
+      FirehoseActions.trash();
+      // left or right pressed
+    } else if ( keyCode === 39 || keyCode === 37 ) {
+      let delta = (keyCode === 39 ? 1 : -1);
+      FirehoseActions.navigate(delta);
+    }
+
   },
   render: function() {
+    var header = <Header
+                  onLoggedIn={this.onLoggedIn}
+                  onLoggedOut={this.onLoggedOut}
+                  onToggle={this.onToggle}
+                  viewState={this.state.viewState}
+                  csrfToken={this.state.csrfToken} />;
+
     if ( this.state.loggedIn && this.state.isAdmin ) {
       return (
-        <FirehoseEditor/>
+        <div>
+          {header}
+          <FirehoseEditor
+            viewState={this.state.viewState}
+            csrfToken={this.state.csrfToken} />
+        </div>
       );
     } else if ( this.state.loggedIn && !this.state.isAdmin) {
       return (
-        <h1>no admin!</h1>
+        <div>
+          {header}
+          <h1>You do not have permission to use the Firehose!</h1>
+        </div>
       );
     }
 
     return (
-      <WebmakerLoginUX
-        onLoggedIn={this.handleLoggedIn}
-        onLoggedOut={this.handleLoggedOut} ></WebmakerLoginUX>
+      <div>
+        {header}
+      </div>
     );
   }
 });