Render errors using isomorphic react.

nb/hide-http
Alex Kern 11 years ago
parent 856bc55d08
commit 0c56b2ebd0

@ -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>
}
}

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

@ -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 (
<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>
);
)

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

@ -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)
})
});
})

@ -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)
})
})

@ -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)
}
})

@ -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')))

@ -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()
}

@ -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'
})

@ -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)
})
}

@ -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)
Loading…
Cancel
Save