diff --git a/.eslintrc.json b/.eslintrc.json index 5df3444a6..23bdea410 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -55,6 +55,7 @@ "no-var": [2], "no-lonely-if": [2], "curly": [2], + "no-unused-vars": ["error", { "argsIgnorePattern": "next" }], "no-multiple-empty-lines": [ "error", {"max": 1} diff --git a/app.js b/app.js index d4041c93a..29817c970 100644 --- a/app.js +++ b/app.js @@ -11,14 +11,57 @@ app.use(bodyParser.json()); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); -// API Routes. +// Routes. app.use('/api/v1', require('./routes/api')); +app.use('/client', express.static(path.join(__dirname, 'dist'))); +app.use('/admin', require('./routes/admin')); -// Static Routes. -app.use('/client/', express.static(path.join(__dirname, 'dist'))); +//============================================================================== +// ERROR HANDLING +//============================================================================== -app.get('/admin*', (req, res) => { - res.render('admin', {basePath: '/client/coral-admin'}); +const ErrNotFound = new Error('Not Found'); +ErrNotFound.status = 404; + +// Catch 404 and forward to error handler. +app.use((req, res, next) => { + next(ErrNotFound); +}); + +// General error handler. Respond with the message and error if we have it while +// returning a status code that makes sense. +if (app.get('env') === 'development') { + app.use('/api', (err, req, res, next) => { + res.status(err.status || 500); + res.json({ + message: err.message, + error: err + }); + }); + + app.use('/', (err, req, res, next) => { + res.status(err.status || 500); + res.render('error', { + message: err.message, + error: err + }); + }); +} + +app.use('/api', (err, req, res, next) => { + res.status(err.status || 500); + res.json({ + message: err.message, + error: {} + }); +}); + +app.use('/', (err, req, res, next) => { + res.status(err.status || 500); + res.render('error', { + message: err.message, + error: {} + }); }); module.exports = app; diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js new file mode 100644 index 000000000..d00caa6c5 --- /dev/null +++ b/client/coral-admin/src/AppRouter.js @@ -0,0 +1,23 @@ +import React from 'react'; +import {Router, Route, IndexRoute, browserHistory} from 'react-router'; + +import ModerationQueue from 'containers/ModerationQueue'; +import CommentStream from 'containers/CommentStream'; +import EmbedLink from 'components/EmbedLink'; +import Configure from 'containers/Configure'; +import CommunityContainer from 'containers/CommunityContainer'; +import LayoutContainer from 'containers/LayoutContainer'; + +const routes = ( + + + + + + + +); + +const AppRouter = () => ; + +export default AppRouter; diff --git a/client/coral-admin/src/components/App.js b/client/coral-admin/src/components/App.js index 0239aa177..3c6e88a14 100644 --- a/client/coral-admin/src/components/App.js +++ b/client/coral-admin/src/components/App.js @@ -1,24 +1,15 @@ - import React from 'react'; import {Provider} from 'react-redux'; import 'material-design-lite'; -import {Router, Route, browserHistory} from 'react-router'; -import ModerationQueue from 'containers/ModerationQueue'; import store from 'services/store'; -import CommentStream from 'containers/CommentStream'; -import EmbedLink from 'components/EmbedLink'; -import Configure from 'containers/Configure'; + +import AppRouter from '../AppRouter'; export default class App extends React.Component { render () { return ( - - - - - - + ); } diff --git a/client/coral-admin/src/components/ui/Drawer.js b/client/coral-admin/src/components/ui/Drawer.js new file mode 100644 index 000000000..9ea727911 --- /dev/null +++ b/client/coral-admin/src/components/ui/Drawer.js @@ -0,0 +1,14 @@ +import React from 'react'; +import {Navigation, Drawer} from 'react-mdl'; +import {Link} from 'react-router'; +import styles from './Header.css'; + +export default () => ( + + + Moderate + Community + Configure + + +); diff --git a/client/coral-admin/src/components/Header.css b/client/coral-admin/src/components/ui/Header.css similarity index 100% rename from client/coral-admin/src/components/Header.css rename to client/coral-admin/src/components/ui/Header.css diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js new file mode 100644 index 000000000..b7c654bd4 --- /dev/null +++ b/client/coral-admin/src/components/ui/Header.js @@ -0,0 +1,14 @@ +import React from 'react'; +import {Navigation, Header} from 'react-mdl'; +import {Link} from 'react-router'; +import styles from './Header.css'; + +export default () => ( +
+ + Moderate + Community + Configure + +
+); diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js new file mode 100644 index 000000000..e80d55c30 --- /dev/null +++ b/client/coral-admin/src/components/ui/Layout.js @@ -0,0 +1,12 @@ +import React from 'react'; +import {Layout as LayoutMDL} from 'react-mdl'; +import Header from './Header'; +import Drawer from './Drawer'; + +export const Layout = ({children}) => ( + +
+ + {children} + +); diff --git a/client/coral-admin/src/containers/CommentStream.js b/client/coral-admin/src/containers/CommentStream.js index 739ff2778..da4d03a22 100644 --- a/client/coral-admin/src/containers/CommentStream.js +++ b/client/coral-admin/src/containers/CommentStream.js @@ -1,4 +1,3 @@ - import React from 'react'; import styles from './CommentStream.css'; import {Snackbar} from 'react-mdl'; @@ -6,7 +5,6 @@ import {connect} from 'react-redux'; import {createComment, flagComment} from 'actions/comments'; import CommentList from 'components/CommentList'; import CommentBox from 'components/CommentBox'; -import Page from 'components/Page'; /** * Renders a comment stream using a CommentList component @@ -44,19 +42,17 @@ class CommentStream extends React.Component { // Render the comment box along with the CommentList render ({comments}, {snackbar, snackbarMsg}) { return ( - -
- - - {snackbarMsg} -
- +
+ + + {snackbarMsg} +
); } } diff --git a/client/coral-admin/src/containers/CommunityContainer.js b/client/coral-admin/src/containers/CommunityContainer.js new file mode 100644 index 000000000..b936edcec --- /dev/null +++ b/client/coral-admin/src/containers/CommunityContainer.js @@ -0,0 +1,11 @@ +import React, {Component} from 'react'; + +export default class CommunityContainer extends Component { + render() { + return ( +
+

Community

+
+ ); + } +} diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js index f8ab0159e..5cb504ee4 100644 --- a/client/coral-admin/src/containers/Configure.js +++ b/client/coral-admin/src/containers/Configure.js @@ -10,7 +10,6 @@ import { Button, Icon } from 'react-mdl'; -import Page from 'components/Page'; import styles from './Configure.css'; import I18n from 'coral-framework/i18n/i18n'; import translations from '../translations'; @@ -78,7 +77,6 @@ class Configure extends React.Component { : 'Embed Comment Stream'; return ( -
@@ -106,7 +104,6 @@ class Configure extends React.Component { }
- ); } } diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js new file mode 100644 index 000000000..50f54a631 --- /dev/null +++ b/client/coral-admin/src/containers/LayoutContainer.js @@ -0,0 +1,18 @@ +import React, {Component}from 'react'; +import {connect} from 'react-redux'; + +import {Layout} from '../components/ui/Layout'; + +class LayoutContainer extends Component { + render () { + return ; + } +} + +LayoutContainer.propTypes = {}; + +const mapStateToProps = () => ({data: {}}); + +const mapDispatchToProps = (dispatch) => ({dispatch}); + +export default connect(mapStateToProps, mapDispatchToProps)(LayoutContainer); diff --git a/client/coral-admin/src/containers/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue.js index 3728deb1e..6cd9f46fc 100644 --- a/client/coral-admin/src/containers/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue.js @@ -1,8 +1,6 @@ - import React from 'react'; import {connect} from 'react-redux'; import ModerationKeysModal from 'components/ModerationKeysModal'; -import Page from 'components/Page'; import CommentList from 'components/CommentList'; import {updateStatus} from 'actions/comments'; import styles from './ModerationQueue.css'; @@ -20,8 +18,6 @@ class ModerationQueue extends React.Component { constructor (props) { super(props); - console.log('ModerationQueue', props); - this.state = {activeTab: 'pending', singleView: false, modalOpen: false}; } @@ -61,10 +57,9 @@ class ModerationQueue extends React.Component { render () { const {comments} = this.props; const {activeTab, singleView, modalOpen} = this.state; - console.log('moderation queue', styles); return ( - +
); } } diff --git a/package.json b/package.json index 69407cf62..a3656ddba 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,6 @@ }, "homepage": "https://github.com/coralproject/talk#readme", "dependencies": { - "autoprefixer": "^6.5.2", "body-parser": "^1.15.2", "debug": "^2.2.0", "ejs": "^2.5.2", @@ -53,22 +52,22 @@ "uuid": "^2.0.3" }, "devDependencies": { - "autoprefixer": "6.5.0", - "babel-core": "^6.14.0", "babel-eslint": "^7.1.0", "babel-jest": "^15.0.0", - "babel-loader": "^6.2.5", - "babel-plugin-transform-async-to-generator": "^6.8.0", + "autoprefixer": "^6.5.0", + "babel-core": "^6.18.2", + "babel-loader": "^6.2.7", + "babel-plugin-transform-async-to-generator": "^6.16.0", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-object-assign": "^6.8.0", "babel-plugin-transform-react-jsx": "^6.8.0", - "babel-polyfill": "^6.13.0", - "babel-preset-es2015": "6.13.0", + "babel-polyfill": "^6.16.0", + "babel-preset-es2015": "^6.18.0", "babel-preset-es2015-minimal": "^2.1.0", "babel-preset-stage-0": "^6.16.0", "chai": "^3.5.0", "chai-http": "^3.0.0", - "copy-webpack-plugin": "^3.0.1", + "copy-webpack-plugin": "^4.0.0", "css-loader": "^0.25.0", "eslint": "^3.9.1", "eslint-plugin-react": "^6.6.0", @@ -81,8 +80,9 @@ "material-design-lite": "^1.2.1", "mocha": "^3.1.2", "mocha-junit-reporter": "^1.12.1", - "postcss-loader": "^0.13.0", - "postcss-modules": "0.5.2", + "postcss-loader": "^1.1.0", + "postcss-modules": "^0.5.2", + "postcss-smart-import": "^0.5.1", "pre-git": "^3.10.0", "precss": "^1.4.0", "pym.js": "^1.1.1", @@ -97,11 +97,7 @@ "style-loader": "^0.13.1", "supertest": "^2.0.1", "timeago.js": "^2.0.3", - "webpack": "^1.13.2", - "webpack-dashboard": "^0.2.0", - "webpack-dev-middleware": "^1.8.3", - "webpack-hot-middleware": "^2.12.2", - "webpack-module-hot-accept": "^1.0.4", + "webpack": "^1.13.3", "whatwg-fetch": "^1.0.0" }, "engines": { diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..79fae36cb --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: [ + require('postcss-smart-import')({ /* ...options */ }), + require('precss')({ /* ...options */ }), + require('autoprefixer')({ /* ...options */ }) + ] +}; diff --git a/routes/admin/index.js b/routes/admin/index.js new file mode 100644 index 000000000..52957f54a --- /dev/null +++ b/routes/admin/index.js @@ -0,0 +1,13 @@ +const express = require('express'); + +const router = express.Router(); + +router.get('/embed/stream/preview', (req, res) => { + res.render('embed-stream', {basePath: '/client/embed/stream'}); +}); + +router.get('*', (req, res) => { + res.render('admin', {basePath: '/client/coral-admin'}); +}); + +module.exports = router; diff --git a/views/admin.ejs b/views/admin.ejs index 9b5fe84bf..038fb58d7 100644 --- a/views/admin.ejs +++ b/views/admin.ejs @@ -10,8 +10,8 @@ body, #root { width: 100%; height: 100%; - margin: 0; - background: #fff; + margin: 0; + background: #fff; } diff --git a/views/admin.ejs~HEAD b/views/admin.ejs~HEAD new file mode 100644 index 000000000..038fb58d7 --- /dev/null +++ b/views/admin.ejs~HEAD @@ -0,0 +1,22 @@ + + + + + + Talk - Coral Admin + + + + + +
+ + + diff --git a/views/embed-stream.ejs b/views/embed-stream.ejs new file mode 100644 index 000000000..47bda6bee --- /dev/null +++ b/views/embed-stream.ejs @@ -0,0 +1,23 @@ + + + + + + Talk - Coral Admin + + + + + + +
+ + + diff --git a/views/error.ejs b/views/error.ejs new file mode 100644 index 000000000..18d70b831 --- /dev/null +++ b/views/error.ejs @@ -0,0 +1,20 @@ + + + + + + + Error + + + + +
+ + 
<%= message %>
+ + 
<%= error.stack %>
+ +
+ + diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 73662d409..e2c92b396 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -52,7 +52,11 @@ module.exports = { exclude: /node_modules/ }, { - loaders: ['style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'postcss-loader'], + loaders: [ + 'style-loader', + 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', + 'postcss-loader' + ], test: /.css$/, }, { @@ -86,5 +90,6 @@ module.exports = { ...buildTargets.map(target => path.join(__dirname, 'client', target, 'src')), ...buildEmbeds.map(embed => path.join(__dirname, 'client', `coral-embed-${embed}`, 'src')) ] - } + }, + postcss: require('./postcss.config.js') }; diff --git a/webpack.config.js b/webpack.config.js index d28ca9d14..434da160d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,7 +7,8 @@ devConfig.devtool = null; devConfig.plugins = devConfig.plugins.concat([ new webpack.DefinePlugin({ 'process.env': { - 'NODE_ENV': JSON.stringify('production') + 'NODE_ENV': `"${'production'}"`, + 'VERSION': `"${require('./package.json')}"` } }), new webpack.optimize.UglifyJsPlugin({