build from root. routes in coral-admin menu work

2026-07-11 20:25:48 +08:00 · 2016-11-08 09:10:01 -07:00
parent 686d39c47b
commit ed509ad36b
14 changed files with 129 additions and 111 deletions
@@ -17,6 +17,6 @@
  </head>
  <body>
    <div id="root"></div>
-    <script src="<%= basePath %>/bundlezzzzzz.js" charset="utf-8"></script>
+    <script src="<%= basePath %>/bundle.js" charset="utf-8"></script>
  </body>
 </html>
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require('postcss-smart-import')({ /* ...options */ }),
+    require('precss')({ /* ...options */ }),
+    require('autoprefixer')({ /* ...options */ })
+  ]
+}
@@ -17,6 +17,6 @@
  </head>
  <body>
    <div id="root"></div>
-    <script src="client/coral-admin/bundlezzzzzz.js" charset="utf-8"></script>
+    <script src="client/coral-admin/bundle.js" charset="utf-8"></script>
  </body>
 </html>
@@ -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 (
      <Provider store={store}>
-        <Layout>
-          <Header>
-            <div>
-              <Router history={browserHistory}>
-                <Route path={config.basePath} component={ModerationQueue} />
-                <Route path={`${config.basePath}/embed`} component={CommentStream} />
-                <Route path={`${config.basePath}/embedlink`} component={EmbedLink} />
-                <Route path={`${config.basePath}/configure`} component={Configure} />
-              </Router>
-            </div>
-          </Header>
-        </Layout>
+        <Router history={browserHistory}>
+          <Route path={config.basePath} component={ModerationQueue} />
+          <Route path={`${config.basePath}/embed`} component={CommentStream} />
+          <Route path={`${config.basePath}/embedlink`} component={EmbedLink} />
+          <Route path={`${config.basePath}/configure`} component={Configure} />
+        </Router>
      </Provider>
    )
  }
@@ -120,7 +120,7 @@ export default class CommentList extends React.Component {
        {commentIds.map((commentId, index) => (
          <Comment comment={comments.get(commentId)}
            ref={el => { if (el && commentId === active) { this._active = el } }}
-            key={index}
+            key={index + 'comment'}
            index={index}
            onClickAction={this.onClickAction}
            actions={this.props.actions}
@@ -9,14 +9,14 @@ export default (props) => (
  <Layout fixedDrawer>
    <Header title='Talk'>
      <Navigation>
-        <Link className={styles.navLink} href={`/${config.basePath}/`}>Moderate</Link>
-        <Link className={styles.navLink} href={`/${config.basePath}/configure`}>Configure</Link>
+        <Link className={styles.navLink} to={`/${config.basePath}/`}>Moderate</Link>
+        <Link className={styles.navLink} to={`/${config.basePath}/configure`}>Configure</Link>
      </Navigation>
    </Header>
    <Drawer>
      <Navigation>
-        <Link className={styles.navLink} href={`/${config.basePath}/`}>Moderate</Link>
-        <Link className={styles.navLink} href={`/${config.basePath}/configure`}>Configure</Link>
+        <Link className={styles.navLink} to={`/${config.basePath}/`}>Moderate</Link>
+        <Link className={styles.navLink} to={`/${config.basePath}/configure`}>Configure</Link>
      </Navigation>
    </Drawer>
    {props.children}
@@ -28,8 +28,8 @@ export default ({ open, onClose }) => (
  <Modal open={open} onClose={onClose}>
    <h3>{lang.t('modqueue.shortcuts')}</h3>
    <div className={styles.container}>
-      {shortcuts.map(shortcut => (
-        <table className={styles.table}>
+      {shortcuts.map((shortcut, i) => (
+        <table className={styles.table} key={i}>
          <thead>
            <tr>
              <th>{lang.t(shortcut.title)}</th>
@@ -37,7 +37,7 @@ export default ({ open, onClose }) => (
          </thead>
          <tbody>
            {Object.keys(shortcut.shortcuts).map(key => (
-              <tr>
+              <tr key={key + 'tr'}>
                <td className={styles.shortcut}><span className={styles.key}>{key}</span></td>
                <td>{lang.t(shortcut.shortcuts[key])}</td>
              </tr>
@@ -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) => (
+  <Layout>
+    <Header>
+      {props.children}
+    </Header>
+  </Layout>
+)
@@ -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 (
-      <div className={styles.container}>
-        <CommentBox onSubmit={this.onSubmit} />
-        <CommentList isActive hideActive
-          singleView={false}
-          commentIds={comments.get('ids')}
-          comments={comments.get('byId')}
-          onClickAction={this.onClickAction}
-          actions={['flag']}
-          loading={comments.loading} />
-        <Snackbar active={snackbar}>{snackbarMsg}</Snackbar>
-      </div>
+      <Page>
+        <div className={styles.container}>
+          <CommentBox onSubmit={this.onSubmit} />
+          <CommentList isActive hideActive
+            singleView={false}
+            commentIds={comments.get('ids')}
+            comments={comments.get('byId')}
+            onClickAction={this.onClickAction}
+            actions={['flag']}
+            loading={comments.loading} />
+          <Snackbar active={snackbar}>{snackbarMsg}</Snackbar>
+        </div>
+      </Page>
    )
  }
 }
@@ -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 (
-      <div className={styles.container}>
-        <div className={styles.leftColumn}>
-          <List>
-            <ListItem className={styles.settingOption}>
-              <ListItemContent
-                onClick={this.changeSection.bind(this, 'comments')}
-                icon='settings'>Comment Settings</ListItemContent>
-            </ListItem>
-            <ListItem className={styles.settingOption}>
-              <ListItemContent
-                onClick={this.changeSection.bind(this, 'embed')}
-                icon='code'>Embed Comment Stream</ListItemContent>
-            </ListItem>
-          </List>
-          <Button raised colored>
-            <Icon name='save' /> Save Changes
-          </Button>
+      <Page>
+        <div className={styles.container}>
+          <div className={styles.leftColumn}>
+            <List>
+              <ListItem className={styles.settingOption}>
+                <ListItemContent
+                  onClick={this.changeSection.bind(this, 'comments')}
+                  icon='settings'>Comment Settings</ListItemContent>
+              </ListItem>
+              <ListItem className={styles.settingOption}>
+                <ListItemContent
+                  onClick={this.changeSection.bind(this, 'embed')}
+                  icon='code'>Embed Comment Stream</ListItemContent>
+              </ListItem>
+            </List>
+            <Button raised colored>
+              <Icon name='save' /> Save Changes
+            </Button>
+          </div>
+          <div className={styles.mainContent}>
+            <h1>{pageTitle}</h1>
+            {
+              this.state.activeSection === 'comments'
+              ? this.getCommentSettings()
+              : this.getEmbed()
+            }
+          </div>
        </div>
-        <div className={styles.mainContent}>
-          <h1>{pageTitle}</h1>
-          {
-            this.state.activeSection === 'comments'
-            ? this.getCommentSettings()
-            : this.getEmbed()
-          }
-        </div>
-      </div>
+      </Page>
    )
  }
 }
@@ -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 (
-      <div className='mdl-tabs mdl-js-tabs mdl-js-ripple-effect'>
-        <div className='mdl-tabs__tab-bar'>
-          <a href='#pending' onClick={() => this.onTabClick('pending')}
-            className={`mdl-tabs__tab is-active ${styles.tab}`}>{lang.t('modqueue.pending')}</a>
-          <a href='#rejected' onClick={() => this.onTabClick('rejected')}
-            className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.rejected')}</a>
-          <a href='#flagged' onClick={() => this.onTabClick('flagged')}
-            className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.flagged')}</a>
+      <Page>
+        <div className='mdl-tabs mdl-js-tabs mdl-js-ripple-effect'>
+          <div className='mdl-tabs__tab-bar'>
+            <a href='#pending' onClick={() => this.onTabClick('pending')}
+              className={`mdl-tabs__tab is-active ${styles.tab}`}>{lang.t('modqueue.pending')}</a>
+            <a href='#rejected' onClick={() => this.onTabClick('rejected')}
+              className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.rejected')}</a>
+            <a href='#flagged' onClick={() => this.onTabClick('flagged')}
+              className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.flagged')}</a>
+          </div>
+          <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='pending'>
+            <CommentList
+              isActive={activeTab === 'pending'}
+              singleView={singleView}
+              commentIds={comments.get('ids').filter(id => !comments.get('byId').get(id).get('status'))}
+              comments={comments.get('byId')}
+              onClickAction={(action, id) => this.onCommentAction(action, id)}
+              actions={['reject', 'approve']}
+              loading={comments.loading} />
+          </div>
+          <div className={`mdl-tabs__panel ${styles.listContainer}`} id='rejected'>
+            <CommentList
+              isActive={activeTab === 'rejected'}
+              singleView={singleView}
+              commentIds={comments.get('ids').filter(id => comments.get('byId').get(id).get('status') === 'rejected')}
+              comments={comments.get('byId')}
+              onClickAction={(action, id) => this.onCommentAction(action, id)}
+              actions={['approve']}
+              loading={comments.loading} />
+          </div>
+          <div className={`mdl-tabs__panel ${styles.listContainer}`} id='flagged'>
+            <CommentList
+              isActive={activeTab === 'rejected'}
+              singleView={singleView}
+              commentIds={comments.get('ids').filter(id => {
+                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} />
+          </div>
+          <ModerationKeysModal open={modalOpen}
+            onClose={() => this.setState({ modalOpen: false })} />
        </div>
-        <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='pending'>
-          <CommentList
-            isActive={activeTab === 'pending'}
-            singleView={singleView}
-            commentIds={comments.get('ids').filter(id => !comments.get('byId').get(id).get('status'))}
-            comments={comments.get('byId')}
-            onClickAction={(action, id) => this.onCommentAction(action, id)}
-            actions={['reject', 'approve']}
-            loading={comments.loading} />
-        </div>
-        <div className={`mdl-tabs__panel ${styles.listContainer}`} id='rejected'>
-          <CommentList
-            isActive={activeTab === 'rejected'}
-            singleView={singleView}
-            commentIds={comments.get('ids').filter(id => comments.get('byId').get(id).get('status') === 'rejected')}
-            comments={comments.get('byId')}
-            onClickAction={(action, id) => this.onCommentAction(action, id)}
-            actions={['approve']}
-            loading={comments.loading} />
-        </div>
-        <div className={`mdl-tabs__panel ${styles.listContainer}`} id='flagged'>
-          <CommentList
-            isActive={activeTab === 'rejected'}
-            singleView={singleView}
-            commentIds={comments.get('ids').filter(id => {
-              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} />
-        </div>
-        <ModerationKeysModal open={modalOpen}
-          onClose={() => this.setState({ modalOpen: false })} />
-      </div>
+      </Page>
    )
  }
 }
@@ -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(<App />, document.querySelector('#root'))
@@ -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 ],
@@ -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",