Render errors using isomorphic react.

client/components/ErrorPage.js

@@ -0,0 +1,29 @@
+import ErrorStore from '../stores/ErrorStore'
+import React from 'react'
+
+export default class ErrorPage extends React.Component {
+
+  constructor() {
+    this.state = ErrorStore.getState()
+
+    this._onChange = () => {
+      this.setState(ErrorStore.getState())
+    }
+  }
+
+  componentDidMount() {
+    ErrorStore.listen(this._onChange)
+  }
+
+  componentDidUnmount() {
+    ErrorStore.unlisten(this._onChange)
+  }
+
+  render() {
+    return <div>
+      <h1>{this.state.status}</h1>
+      <p>{this.state.message}</p>
+    </div>
+  }
+
+}

client/components/NotFoundPage.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-export default class NotFoundPage extends React.Component {
-
-  render() {
-    return <h1>Not Found</h1>;
-  }
-
-}

client/routes.js

@@ -1,15 +1,16 @@
-import React from 'react';
+import React from 'react'
-import { Route, DefaultRoute, NotFoundRoute, RouteHandler } from 'react-router';
+import { Route, DefaultRoute, NotFoundRoute, RouteHandler } from 'react-router'
 
-import App from './components/App';
+import App from './components/App'
-import DownloadPage from './components/DownloadPage';
+import DownloadPage from './components/DownloadPage'
-import UploadPage from './components/UploadPage';
+import UploadPage from './components/UploadPage'
-import NotFoundPage from './components/NotFoundPage';
+import ErrorPage from './components/ErrorPage'
 
 export default (
   <Route handler={App}>
     <DefaultRoute handler={UploadPage} />
     <Route name="download" path="d/:token" handler={DownloadPage} />
-    <NotFoundRoute handler={NotFoundPage} />
+    <Route name="error" path="error" handler={ErrorPage} />
+    <NotFoundRoute handler={ErrorPage} />
   </Route>
-);
+)

client/stores/ErrorStore.js

@@ -0,0 +1,10 @@
+import alt from '../alt'
+
+export default alt.createStore(class ErrorStore {
+
+  constructor() {
+    this.status = 404
+    this.message = 'Not Found'
+  }
+
+}, 'ErrorStore')

server/index.js

@@ -1,45 +1,52 @@
-var Upload = require('./Upload');
+var Upload = require('./Upload')
-var express = require('express');
+var express = require('express')
-var http = require('http');
+var http = require('http')
-var path = require('path');
+var path = require('path')
-var peer = require('peer');
+var peer = require('peer')
-var routes = require('./routes');
+var socketIO = require('socket.io')
-var socketIO = require('socket.io');
+var morgan = require('morgan')
-var morgan = require('morgan');
+
-
+var app = express()
-var app = express();
+var server = http.Server(app)
-var server = http.Server(app);
+var io = socketIO(server)
-var io = socketIO(server);
 
 server.listen(process.env.PORT || 3000, function () {
-  var host = server.address().address;
+  var host = server.address().address
-  var port = server.address().port;
+  var port = server.address().port
-  console.log('WebDrop listening on %s:%s', host, port);
+  console.log('WebDrop listening on %s:%s', host, port)
-});
+})
 
-app.use('/peer', peer.ExpressPeerServer(server));
+app.use('/peer', peer.ExpressPeerServer(server))
-app.use(morgan('combined'));
+app.use(morgan('dev'))
-app.use(require('./assets'));
+
-app.use(require('./routes'));
+app.get('/js', require('./routes/javascript'))
+app.get('/css', require('./routes/css'))
+app.use(require('./routes/static'))
+
+app.use([
+  require('./routes/bootstrap'),
+  require('./routes/error'),
+  require('./routes/react')
+])
 
 io.on('connection', function (socket) {
 
-  var upload = null;
+  var upload = null
 
   socket.on('upload', function (metadata, res) {
-    if (!upload) upload = new Upload(socket);
+    if (!upload) upload = new Upload(socket)
-    upload.metadata = metadata;
+    upload.metadata = metadata
-    res(upload.token);
+    res(upload.token)
-  });
+  })
 
   socket.on('download', function (data) {
-    var uploader = Upload.find(data.token);
+    var uploader = Upload.find(data.token)
-    if (!uploader) return;
+    if (!uploader) return
-    uploader.socket.emit('download', data.peerID);
+    uploader.socket.emit('download', data.peerID)
-  });
+  })
 
   socket.on('disconnect', function () {
-    if (upload) Upload.remove(upload);
+    if (upload) Upload.remove(upload)
-  });
+  })
 
-});
+})

server/routes.js

@@ -1,56 +0,0 @@
-var DownloadFile = require('../client/DownloadFile')
-var React = require('react')
-var ReactRouter = require('react-router')
-var Upload = require('./Upload')
-var alt = require('../client/alt')
-var clientRoutes = require('../client/routes')
-var express = require('express')
-
-var routes = module.exports = new express.Router()
-
-routes.get('/d/:token', function (req, res, next) {
-
-  var uploader = Upload.find(req.params.token)
-  if (uploader) {
-    res.locals.data = {
-      DownloadStore: {
-        status: 'ready',
-        token: uploader.token,
-        file: uploader.metadata
-      }
-    }
-  }
-
-  next()
-
-})
-
-routes.use(function (req, res, next) {
-  var err = new Error('Not Found')
-  err.status = 404
-  next(err)
-})
-
-routes.use(function (err, req, res, next) {
-
-  // TODO: Get these error pages working with isomorphic react.
-  var status = err.status || 500
-  var message = err.message || ''
-
-  res.status(status)
-  next()
-
-})
-
-routes.use(function (req, res) {
-
-  alt.bootstrap(JSON.stringify(res.locals.data || {}))
-
-  ReactRouter.run(clientRoutes, req.url, function (Handler) {
-    var html = React.renderToString(<Handler data={alt.takeSnapshot()} />)
-    alt.flush()
-    res.write('<!DOCTYPE html>')
-    res.end(html)
-  })
-
-})

server/routes/bootstrap.js

@@ -0,0 +1,25 @@
+var Upload = require('../Upload')
+var express = require('express')
+
+var routes = module.exports = new express.Router()
+
+routes.get('/d/:token', function (req, res, next) {
+
+  var uploader = Upload.find(req.params.token)
+  if (uploader) {
+    res.locals.data = {
+      DownloadStore: {
+        status: 'ready',
+        token: uploader.token,
+        file: uploader.metadata
+      }
+    }
+
+    next()
+  } else {
+    var err = new Error('Not Found')
+    err.status = 404
+    next(err)
+  }
+
+})

server/routes/css.js

@@ -1,17 +1,19 @@
-var browserify = require('browserify-middleware')
 var express = require('express')
 var nib = require('nib')
 var path = require('path')
 var stylus = require('stylus')
 
+var CSS_PATH = path.resolve(__dirname, '../../css')
+var COMPILED_PATH = path.resolve(__dirname, '../../css/index.css')
+
 var routes = module.exports = new express.Router()
 
-routes.get('/css', function (req, res, next) {
+routes.use(function (req, res, next) {
   req.url = '/index.css'
   next()
 }, stylus.middleware({
-  src: path.resolve(__dirname, '../css'),
+  src: CSS_PATH,
-  dest: path.resolve(__dirname, '../css'),
+  dest: CSS_PATH,
   compile: function (str, path) {
     return stylus(str)
       .set('filename', path)
@@ -20,11 +22,5 @@ routes.get('/css', function (req, res, next) {
       .import('nib')
   }
 }), function (req, res) {
-  res.sendFile(path.resolve(__dirname, '../css/index.css'))
+  res.sendFile(COMPILED_PATH)
 })
-
-routes.get('/js', browserify(path.resolve(__dirname, '../client/index.js'), {
-  transform: 'babelify'
-}))
-
-routes.use(express.static(path.resolve(__dirname, '../static')))

server/routes/error.js

@@ -0,0 +1,17 @@
+module.exports = function (err, req, res, next) {
+
+  var status = err.status || 500
+  var message = err.message || ''
+
+  req.url = '/error'
+  res.status(status)
+  res.locals.data = {
+    ErrorStore: {
+      status: status,
+      message: message
+    }
+  }
+
+  next()
+
+}

server/routes/javascript.js

@@ -0,0 +1,9 @@
+var browserify = require('browserify-middleware')
+var express = require('express')
+var path = require('path')
+
+var CLIENT_MODULE_PATH = path.resolve(__dirname, '../../client/index.js')
+
+module.exports = browserify(CLIENT_MODULE_PATH, {
+  transform: 'babelify'
+})

server/routes/react.js

@@ -0,0 +1,29 @@
+var React = require('react')
+var ReactRouter = require('react-router')
+var alt = require('../../client/alt')
+var clientRoutes = require('../../client/routes')
+
+function isNotFound(state) {
+  for (var r of state.routes) {
+    if (r.isNotFound) return true
+  }
+
+  return false
+}
+
+module.exports = function (req, res) {
+
+  alt.bootstrap(JSON.stringify(res.locals.data || {}))
+
+  ReactRouter.run(clientRoutes, req.url, function (Handler, state) {
+
+    var html = React.renderToString(<Handler data={alt.takeSnapshot()} />)
+    alt.flush()
+
+    if (isNotFound(state)) res.status(404)
+    res.write('<!DOCTYPE html>\n')
+    res.end(html)
+
+  })
+
+}

server/routes/static.js

@@ -0,0 +1,6 @@
+var express = require('express')
+var path = require('path')
+
+var STATIC_PATH = path.resolve(__dirname, '../../static')
+
+module.exports = express.static(STATIC_PATH)