diff --git a/client/components/ErrorPage.js b/client/components/ErrorPage.js new file mode 100644 index 0000000..a4bc4a7 --- /dev/null +++ b/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
+

{this.state.status}

+

{this.state.message}

+
+ } + +} diff --git a/client/components/NotFoundPage.js b/client/components/NotFoundPage.js deleted file mode 100644 index a2dddf7..0000000 --- a/client/components/NotFoundPage.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -export default class NotFoundPage extends React.Component { - - render() { - return

Not Found

; - } - -} diff --git a/client/routes.js b/client/routes.js index 48018ec..e3b6979 100644 --- a/client/routes.js +++ b/client/routes.js @@ -1,15 +1,16 @@ -import React from 'react'; -import { Route, DefaultRoute, NotFoundRoute, RouteHandler } from 'react-router'; +import React from 'react' +import { Route, DefaultRoute, NotFoundRoute, RouteHandler } from 'react-router' -import App from './components/App'; -import DownloadPage from './components/DownloadPage'; -import UploadPage from './components/UploadPage'; -import NotFoundPage from './components/NotFoundPage'; +import App from './components/App' +import DownloadPage from './components/DownloadPage' +import UploadPage from './components/UploadPage' +import ErrorPage from './components/ErrorPage' export default ( - + + -); +) diff --git a/client/stores/ErrorStore.js b/client/stores/ErrorStore.js new file mode 100644 index 0000000..22194ff --- /dev/null +++ b/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') diff --git a/server/index.js b/server/index.js index 59bfee4..a648e9f 100644 --- a/server/index.js +++ b/server/index.js @@ -1,45 +1,52 @@ -var Upload = require('./Upload'); -var express = require('express'); -var http = require('http'); -var path = require('path'); -var peer = require('peer'); -var routes = require('./routes'); -var socketIO = require('socket.io'); -var morgan = require('morgan'); - -var app = express(); -var server = http.Server(app); -var io = socketIO(server); +var Upload = require('./Upload') +var express = require('express') +var http = require('http') +var path = require('path') +var peer = require('peer') +var socketIO = require('socket.io') +var morgan = require('morgan') + +var app = express() +var server = http.Server(app) +var io = socketIO(server) server.listen(process.env.PORT || 3000, function () { - var host = server.address().address; - var port = server.address().port; - console.log('WebDrop listening on %s:%s', host, port); -}); + var host = server.address().address + var port = server.address().port + console.log('WebDrop listening on %s:%s', host, port) +}) -app.use('/peer', peer.ExpressPeerServer(server)); -app.use(morgan('combined')); -app.use(require('./assets')); -app.use(require('./routes')); +app.use('/peer', peer.ExpressPeerServer(server)) +app.use(morgan('dev')) + +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); - upload.metadata = metadata; - res(upload.token); - }); + if (!upload) upload = new Upload(socket) + upload.metadata = metadata + res(upload.token) + }) socket.on('download', function (data) { - var uploader = Upload.find(data.token); - if (!uploader) return; - uploader.socket.emit('download', data.peerID); - }); + var uploader = Upload.find(data.token) + if (!uploader) return + uploader.socket.emit('download', data.peerID) + }) socket.on('disconnect', function () { - if (upload) Upload.remove(upload); - }); + if (upload) Upload.remove(upload) + }) -}); +}) diff --git a/server/routes.js b/server/routes.js deleted file mode 100644 index 9030d50..0000000 --- a/server/routes.js +++ /dev/null @@ -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() - alt.flush() - res.write('') - res.end(html) - }) - -}) diff --git a/server/routes/bootstrap.js b/server/routes/bootstrap.js new file mode 100644 index 0000000..13a19b9 --- /dev/null +++ b/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) + } + +}) diff --git a/server/assets.js b/server/routes/css.js similarity index 50% rename from server/assets.js rename to server/routes/css.js index 4dd8427..831dc2d 100644 --- a/server/assets.js +++ b/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'), - dest: path.resolve(__dirname, '../css'), + src: CSS_PATH, + 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'))) diff --git a/server/routes/error.js b/server/routes/error.js new file mode 100644 index 0000000..0e08d4f --- /dev/null +++ b/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() + +} diff --git a/server/routes/javascript.js b/server/routes/javascript.js new file mode 100644 index 0000000..38fdc0c --- /dev/null +++ b/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' +}) diff --git a/server/routes/react.js b/server/routes/react.js new file mode 100644 index 0000000..6144597 --- /dev/null +++ b/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() + alt.flush() + + if (isNotFound(state)) res.status(404) + res.write('\n') + res.end(html) + + }) + +} diff --git a/server/routes/static.js b/server/routes/static.js new file mode 100644 index 0000000..9ace400 --- /dev/null +++ b/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)