From 8685e31b578f63f7f527ad67275e9d600254391b Mon Sep 17 00:00:00 2001 From: David Erwin Date: Mon, 7 Nov 2016 15:31:12 -0500 Subject: [PATCH 1/3] Integrating webpack build files, working commit --- client/coral-admin/config.sample.json | 2 +- client/coral-admin/public/index.html | 2 +- client/coral-admin/webpack.config.dev.js | 10 +++++----- client/coral-admin/webpack.config.js | 10 +++++----- package.json | 2 +- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/client/coral-admin/config.sample.json b/client/coral-admin/config.sample.json index f5b9ad5f8..55d39db05 100644 --- a/client/coral-admin/config.sample.json +++ b/client/coral-admin/config.sample.json @@ -1,3 +1,3 @@ { - "base": "client/coral-admin" + "basePath": "client/coral-admin" } diff --git a/client/coral-admin/public/index.html b/client/coral-admin/public/index.html index c31c22a6d..ef1adffec 100644 --- a/client/coral-admin/public/index.html +++ b/client/coral-admin/public/index.html @@ -17,6 +17,6 @@
- + diff --git a/client/coral-admin/webpack.config.dev.js b/client/coral-admin/webpack.config.dev.js index ca3b5cab5..421da4bb7 100644 --- a/client/coral-admin/webpack.config.dev.js +++ b/client/coral-admin/webpack.config.dev.js @@ -9,9 +9,9 @@ const config = require('./config.json') // doing a string replace here because I spent a day trying to do it the "webpack" way // ond nothing works. just trying to replace a string in an index.html file is // apparently something no one has ever done in the js community. -let templateString = fs.readFileSync('./index.ejs').toString() +let templateString = fs.readFileSync(path.join(__dirname, 'index.ejs')).toString() templateString = templateString.replace('<%= basePath %>', config.basePath) -fs.writeFileSync('./public/index.html', templateString) +fs.writeFileSync(path.join(__dirname, 'public/index.html'), templateString) console.log(templateString) @@ -24,9 +24,9 @@ module.exports = { filename: '[name].js' }, module: { - loaders: [ - { test: /.js$/, loaders: 'buble', include: path.join(__dirname, 'src') }, - { test: /.json$/, loaders: 'json', include: __dirname, exclude: /node_modules/ }, + loader: [ + { test: /\.js$/, loaders: 'buble', include: path.join(__dirname, 'src') }, + { test: /\.json$/, loaders: 'json', include: __dirname, exclude: /node_modules/ }, { test: /\.css$/, loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader' } ] }, diff --git a/client/coral-admin/webpack.config.js b/client/coral-admin/webpack.config.js index 67d5aef22..78585038a 100644 --- a/client/coral-admin/webpack.config.js +++ b/client/coral-admin/webpack.config.js @@ -10,15 +10,15 @@ const config = require('./config.json') // doing a string replace here because I spent a day trying to do it the "webpack" way // ond nothing works. just trying to replace a string in an index.html file is // apparently something no one has ever done in the js community. -let templateString = fs.readFileSync('./index.ejs').toString() +let templateString = fs.readFileSync(path.join(__dirname, 'index.ejs')).toString() templateString = templateString.replace('<%= basePath %>', config.basePath) -fs.writeFileSync('./public/index.html', templateString) +fs.writeFileSync(path.join(__dirname, 'public/index.html'), templateString) module.exports = Object.assign({}, devConfig, { module: { - loaders: [ - { test: /.js$/, loaders: 'buble', include: [path.join(__dirname, 'src'), path.join(__dirname, '../', 'coral-framework')] }, - { test: /.json$/, loaders: 'json', include: __dirname, exclude: /node_modules/ }, + loader: [ + { test: /\.js$/, loaders: 'buble', include: [path.join(__dirname, 'src'), path.join(__dirname, '../', 'coral-framework')] }, + { test: /\.json$/, loaders: 'json', include: __dirname, exclude: /node_modules/ }, { test: /\.css$/, loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader' } ] }, diff --git a/package.json b/package.json index 856db50c6..99ac9edfd 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "app.js", "scripts": { "start": "./bin/www", - "build": "webpack --config ./client/coral-embed-stream/webpack.config.js", + "build": "webpack --config ./client/coral-embed-stream/webpack.config.js && webpack --config ./client/coral-admin/webpack.config.js", "lint": "eslint .", "pretest": "npm install", "test": "mocha tests --recursive", From 018784d72522f9b10251c40a4b16d3b7e37b6770 Mon Sep 17 00:00:00 2001 From: Dan Zajdband Date: Mon, 7 Nov 2016 16:26:49 -0500 Subject: [PATCH 2/3] fix(coral-admin): building, no css --- client/coral-admin/package.json | 6 +++--- client/coral-admin/src/components/App.js | 8 ++++---- client/coral-admin/src/components/Header.js | 8 ++++---- .../coral-admin/src/containers/Configure.css | 5 ++++- client/coral-admin/webpack.config.dev.js | 20 ++++++------------- client/coral-admin/webpack.config.js | 19 ++++++------------ 6 files changed, 27 insertions(+), 39 deletions(-) diff --git a/client/coral-admin/package.json b/client/coral-admin/package.json index ced6a3512..048359526 100644 --- a/client/coral-admin/package.json +++ b/client/coral-admin/package.json @@ -26,8 +26,8 @@ }, "devDependencies": { "autoprefixer": "6.5.0", - "buble": "0.13.0", - "buble-loader": "0.3.0", + "babel-core": "^6.18.2", + "babel-loader": "^6.2.7", "copy-webpack-plugin": "3.0.1", "css-loader": "0.25.0", "json-loader": "0.5.4", @@ -36,7 +36,7 @@ "precss": "1.4.0", "standard": "8.2.0", "style-loader": "0.13.1", - "webpack": "2.1.0-beta.25", + "webpack": "^1.13.3", "webpack-dev-server": "1.16.1" } } diff --git a/client/coral-admin/src/components/App.js b/client/coral-admin/src/components/App.js index 545cd80a4..2c77fe900 100644 --- a/client/coral-admin/src/components/App.js +++ b/client/coral-admin/src/components/App.js @@ -20,10 +20,10 @@ export default class App extends React.Component {
- - - - + + + +
diff --git a/client/coral-admin/src/components/Header.js b/client/coral-admin/src/components/Header.js index 8aebe7864..ed8bfc9bd 100644 --- a/client/coral-admin/src/components/Header.js +++ b/client/coral-admin/src/components/Header.js @@ -9,14 +9,14 @@ export default (props) => (
- Moderate - Configure + Moderate + Configure
- Moderate - Configure + Moderate + Configure {props.children} diff --git a/client/coral-admin/src/containers/Configure.css b/client/coral-admin/src/containers/Configure.css index 2f98a8b99..2c65fd5bc 100644 --- a/client/coral-admin/src/containers/Configure.css +++ b/client/coral-admin/src/containers/Configure.css @@ -23,7 +23,10 @@ } .configSettingEmbed { - composes: configSetting; + border: 1px solid #ccc; + border-radius: 4px; + height: 90px; + margin-bottom: 10px; display: block; height: 170px; } diff --git a/client/coral-admin/webpack.config.dev.js b/client/coral-admin/webpack.config.dev.js index 421da4bb7..e8b0c86f0 100644 --- a/client/coral-admin/webpack.config.dev.js +++ b/client/coral-admin/webpack.config.dev.js @@ -24,25 +24,17 @@ module.exports = { filename: '[name].js' }, module: { - loader: [ - { test: /\.js$/, loaders: 'buble', include: path.join(__dirname, 'src') }, + loaders: [ + { test: /.js$/, loader: 'babel', include: path.join(__dirname, 'src'), exclude: /node_modules/ }, { test: /\.json$/, loaders: 'json', include: __dirname, exclude: /node_modules/ }, - { test: /\.css$/, loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader' } + { test: /\.css$/, loaders: ['style-loader', 'css-loader?importLoaders=1', 'postcss-loader'] } ] }, - plugins: [ - new webpack.LoaderOptionsPlugin({ - options: { - context: __dirname, - postcss: [autoprefixer, precss] - } - }) - ], + plugins: [ autoprefixer, precss ], resolve: { - modules: [ + root: [ path.resolve('./src'), - path.resolve('../'), - 'node_modules' + path.resolve('../') ] }, devServer: { diff --git a/client/coral-admin/webpack.config.js b/client/coral-admin/webpack.config.js index 78585038a..1f3d81500 100644 --- a/client/coral-admin/webpack.config.js +++ b/client/coral-admin/webpack.config.js @@ -16,10 +16,11 @@ fs.writeFileSync(path.join(__dirname, 'public/index.html'), templateString) module.exports = Object.assign({}, devConfig, { module: { - loader: [ - { test: /\.js$/, loaders: 'buble', include: [path.join(__dirname, 'src'), path.join(__dirname, '../', 'coral-framework')] }, - { test: /\.json$/, loaders: 'json', include: __dirname, exclude: /node_modules/ }, - { test: /\.css$/, loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader' } + context: __dirname, + loaders: [ + { test: /.js$/, loader: 'babel', include: [path.join(__dirname, 'src'), path.join(__dirname, '../', 'coral-framework')], exclude: /node_modules/ }, + { test: /.json$/, loader: 'json', include: __dirname, exclude: /node_modules/ }, + { test: /.css$/, loaders: ['style-loader', 'css-loader?importLoaders=1', 'postcss-loader'] } ] }, plugins: [ @@ -27,14 +28,6 @@ module.exports = Object.assign({}, devConfig, { from: path.join(__dirname, '..', 'coral-embed-stream', 'dist'), to: './embed/comment-stream' }]), - new webpack.LoaderOptionsPlugin({ - options: { - context: __dirname, - postcss: [autoprefixer, precss], - minimize: true, - debug: false - } - }), - new webpack.optimize.UglifyJsPlugin() + autoprefixer, precss ] }) From ed509ad36bb3c3e6eeabe55acd05a58dc0b75478 Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Tue, 8 Nov 2016 09:10:01 -0700 Subject: [PATCH 3/3] build from root. routes in coral-admin menu work --- client/coral-admin/index.ejs | 2 +- client/coral-admin/postcss.config.js | 7 ++ client/coral-admin/public/index.html | 2 +- client/coral-admin/src/components/App.js | 20 ++-- .../coral-admin/src/components/CommentList.js | 2 +- client/coral-admin/src/components/Header.js | 8 +- .../src/components/ModerationKeysModal.js | 6 +- client/coral-admin/src/components/Page.js | 12 +++ .../src/containers/CommentStream.js | 25 ++--- .../coral-admin/src/containers/Configure.js | 55 +++++------ .../src/containers/ModerationQueue.js | 92 ++++++++++--------- client/coral-admin/src/index.js | 2 +- client/coral-admin/webpack.config.dev.js | 5 +- package.json | 2 +- 14 files changed, 129 insertions(+), 111 deletions(-) create mode 100644 client/coral-admin/postcss.config.js create mode 100644 client/coral-admin/src/components/Page.js diff --git a/client/coral-admin/index.ejs b/client/coral-admin/index.ejs index 45c971ffe..9b5fe84bf 100644 --- a/client/coral-admin/index.ejs +++ b/client/coral-admin/index.ejs @@ -17,6 +17,6 @@
- + diff --git a/client/coral-admin/postcss.config.js b/client/coral-admin/postcss.config.js new file mode 100644 index 000000000..d5267160a --- /dev/null +++ b/client/coral-admin/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: [ + require('postcss-smart-import')({ /* ...options */ }), + require('precss')({ /* ...options */ }), + require('autoprefixer')({ /* ...options */ }) + ] +} diff --git a/client/coral-admin/public/index.html b/client/coral-admin/public/index.html index e792fcd2c..ef1adffec 100644 --- a/client/coral-admin/public/index.html +++ b/client/coral-admin/public/index.html @@ -17,6 +17,6 @@
- + diff --git a/client/coral-admin/src/components/App.js b/client/coral-admin/src/components/App.js index 2c77fe900..4b7c01e84 100644 --- a/client/coral-admin/src/components/App.js +++ b/client/coral-admin/src/components/App.js @@ -1,11 +1,9 @@ import React from 'react' import { Provider } from 'react-redux' -import { Layout } from 'react-mdl' import 'material-design-lite' import { Router, Route, browserHistory } from 'react-router' import ModerationQueue from 'containers/ModerationQueue' -import Header from 'components/Header' import store from 'services/store' import CommentStream from 'containers/CommentStream' import EmbedLink from 'components/EmbedLink' @@ -16,18 +14,12 @@ export default class App extends React.Component { render (props) { return ( - -
-
- - - - - - -
-
- + + + + + + ) } diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/CommentList.js index f56a1349f..02367911f 100644 --- a/client/coral-admin/src/components/CommentList.js +++ b/client/coral-admin/src/components/CommentList.js @@ -120,7 +120,7 @@ export default class CommentList extends React.Component { {commentIds.map((commentId, index) => ( { if (el && commentId === active) { this._active = el } }} - key={index} + key={index + 'comment'} index={index} onClickAction={this.onClickAction} actions={this.props.actions} diff --git a/client/coral-admin/src/components/Header.js b/client/coral-admin/src/components/Header.js index ed8bfc9bd..0e52686d8 100644 --- a/client/coral-admin/src/components/Header.js +++ b/client/coral-admin/src/components/Header.js @@ -9,14 +9,14 @@ export default (props) => (
- Moderate - Configure + Moderate + Configure
- Moderate - Configure + Moderate + Configure {props.children} diff --git a/client/coral-admin/src/components/ModerationKeysModal.js b/client/coral-admin/src/components/ModerationKeysModal.js index c28534417..efe235df7 100644 --- a/client/coral-admin/src/components/ModerationKeysModal.js +++ b/client/coral-admin/src/components/ModerationKeysModal.js @@ -28,8 +28,8 @@ export default ({ open, onClose }) => (

{lang.t('modqueue.shortcuts')}

- {shortcuts.map(shortcut => ( - + {shortcuts.map((shortcut, i) => ( +
@@ -37,7 +37,7 @@ export default ({ open, onClose }) => ( {Object.keys(shortcut.shortcuts).map(key => ( - + diff --git a/client/coral-admin/src/components/Page.js b/client/coral-admin/src/components/Page.js new file mode 100644 index 000000000..733cec677 --- /dev/null +++ b/client/coral-admin/src/components/Page.js @@ -0,0 +1,12 @@ +import React from 'react' +import {Layout} from 'react-mdl' +import 'material-design-lite' +import Header from 'components/Header' + +export default (props) => ( + +
+ {props.children} +
+ +) diff --git a/client/coral-admin/src/containers/CommentStream.js b/client/coral-admin/src/containers/CommentStream.js index 33963f422..4f0a03698 100644 --- a/client/coral-admin/src/containers/CommentStream.js +++ b/client/coral-admin/src/containers/CommentStream.js @@ -6,6 +6,7 @@ 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 @@ -43,17 +44,19 @@ 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/Configure.js b/client/coral-admin/src/containers/Configure.js index 02862cb8b..4a36e56e7 100644 --- a/client/coral-admin/src/containers/Configure.js +++ b/client/coral-admin/src/containers/Configure.js @@ -10,6 +10,7 @@ import { Button, Icon } from 'react-mdl' +import Page from 'components/Page' import styles from './Configure.css' class Configure extends React.Component { @@ -59,33 +60,35 @@ class Configure extends React.Component { : 'Embed Comment Stream' return ( -
-
- - - Comment Settings - - - Embed Comment Stream - - - + +
+
+ + + Comment Settings + + + Embed Comment Stream + + + +
+
+

{pageTitle}

+ { + this.state.activeSection === 'comments' + ? this.getCommentSettings() + : this.getEmbed() + } +
-
-

{pageTitle}

- { - this.state.activeSection === 'comments' - ? this.getCommentSettings() - : this.getEmbed() - } -
-
+ ) } } diff --git a/client/coral-admin/src/containers/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue.js index f80aac2e2..061786543 100644 --- a/client/coral-admin/src/containers/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue.js @@ -2,6 +2,7 @@ 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' @@ -59,53 +60,56 @@ class ModerationQueue extends React.Component { render () { const { comments } = this.props const { activeTab, singleView, modalOpen } = this.state + console.log('moderation queue', styles) return ( -
-
- this.onTabClick('pending')} - className={`mdl-tabs__tab is-active ${styles.tab}`}>{lang.t('modqueue.pending')} - this.onTabClick('rejected')} - className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.rejected')} - this.onTabClick('flagged')} - className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.flagged')} + +
+ +
+ !comments.get('byId').get(id).get('status'))} + comments={comments.get('byId')} + onClickAction={(action, id) => this.onCommentAction(action, id)} + actions={['reject', 'approve']} + loading={comments.loading} /> +
+
+ comments.get('byId').get(id).get('status') === 'rejected')} + comments={comments.get('byId')} + onClickAction={(action, id) => this.onCommentAction(action, id)} + actions={['approve']} + loading={comments.loading} /> +
+
+ { + const data = comments.get('byId').get(id) + return !data.get('status') && data.get('flagged') === true + })} + comments={comments.get('byId')} + onClickAction={(action, id) => this.onCommentAction(action, id)} + actions={['reject', 'approve']} + loading={comments.loading} /> +
+ this.setState({ modalOpen: false })} />
-
- !comments.get('byId').get(id).get('status'))} - comments={comments.get('byId')} - onClickAction={(action, id) => this.onCommentAction(action, id)} - actions={['reject', 'approve']} - loading={comments.loading} /> -
-
- comments.get('byId').get(id).get('status') === 'rejected')} - comments={comments.get('byId')} - onClickAction={(action, id) => this.onCommentAction(action, id)} - actions={['approve']} - loading={comments.loading} /> -
-
- { - const data = comments.get('byId').get(id) - return !data.get('status') && data.get('flagged') === true - })} - comments={comments.get('byId')} - onClickAction={(action, id) => this.onCommentAction(action, id)} - actions={['reject', 'approve']} - loading={comments.loading} /> -
- this.setState({ modalOpen: false })} /> -
+ ) } } diff --git a/client/coral-admin/src/index.js b/client/coral-admin/src/index.js index 509473891..d15367dd0 100644 --- a/client/coral-admin/src/index.js +++ b/client/coral-admin/src/index.js @@ -1,7 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom' -import App from 'components/App' +import App from './components/App' // Render the application into the DOM ReactDOM.render(, document.querySelector('#root')) diff --git a/client/coral-admin/webpack.config.dev.js b/client/coral-admin/webpack.config.dev.js index e8b0c86f0..bd5913b5a 100644 --- a/client/coral-admin/webpack.config.dev.js +++ b/client/coral-admin/webpack.config.dev.js @@ -1,7 +1,6 @@ const path = require('path') const fs = require('fs') -const webpack = require('webpack') const autoprefixer = require('autoprefixer') const precss = require('precss') const config = require('./config.json') @@ -13,8 +12,6 @@ let templateString = fs.readFileSync(path.join(__dirname, 'index.ejs')).toString templateString = templateString.replace('<%= basePath %>', config.basePath) fs.writeFileSync(path.join(__dirname, 'public/index.html'), templateString) -console.log(templateString) - module.exports = { entry: { 'bundle': path.join(__dirname, 'src', 'index') @@ -27,7 +24,7 @@ module.exports = { loaders: [ { test: /.js$/, loader: 'babel', include: path.join(__dirname, 'src'), exclude: /node_modules/ }, { test: /\.json$/, loaders: 'json', include: __dirname, exclude: /node_modules/ }, - { test: /\.css$/, loaders: ['style-loader', 'css-loader?importLoaders=1', 'postcss-loader'] } + { test: /.css$/, loaders: ['style-loader', 'css-loader?importLoaders=1', 'postcss-loader'] } ] }, plugins: [ autoprefixer, precss ], diff --git a/package.json b/package.json index 2b6abf556..0c7aab592 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "app.js", "scripts": { "start": "./bin/www", - "build": "./node_modules/webpack/bin/webpack.js --config ./client/coral-embed-stream/webpack.config.js && ./node_modules/webpack/bin/webpack.js --config ./client/coral-admin/webpack.config.js", + "build": "./node_modules/webpack/bin/webpack.js --config ./client/coral-embed-stream/webpack.config.js && cd client/coral-admin && npm run build", "lint": "eslint .", "pretest": "npm install", "test": "mocha tests --recursive",
{lang.t(shortcut.title)}
{key} {lang.t(shortcut.shortcuts[key])}