Merge branch 'master' of github.com:coralproject/talk into flagging-adapt-api

client/coral-admin/src/AppRouter.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Router, Route, Redirect, 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 = (
+  <Route path='admin' component={LayoutContainer}>
+    <IndexRoute component={ModerationQueue} />
+    <Route path='embed' component={CommentStream} />
+    <Route path='embedlink' component={EmbedLink} />
+    <Route path='community' component={CommunityContainer} />
+    <Route path='configure' component={Configure} />
+  </Route>
+)
+
+const AppRouter = () => <Router history={browserHistory} routes={routes} />
+
+export default AppRouter

client/coral-admin/src/components/App.js

@@ -1,24 +1,16 @@
-
 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 { Layout } from 'react-mdl'
 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 (props) {
     return (
       <Provider store={store}>
-        <Router history={browserHistory}>
-          <Route path='admin' component={ModerationQueue} />
-          <Route path='admin/embed' component={CommentStream} />
-          <Route path='admin/embedlink' component={EmbedLink} />
-          <Route path='admin/configure' component={Configure} />
-        </Router>
+        <AppRouter store={store} />
       </Provider>
     )
   }

client/coral-admin/src/components/Header.js

@@ -1,24 +0,0 @@
-import React from 'react'
-import { Layout, Navigation, Drawer, Header } from 'react-mdl'
-import { Link } from 'react-router'
-import styles from './Header.css'
-import config from 'services/config'
-
-// App header. If we add a navbar it should be here
-export default (props) => (
-  <Layout fixedDrawer>
-    <Header title='Talk'>
-      <Navigation>
-        <Link className={styles.navLink} to={`/admin/`}>Moderate</Link>
-        <Link className={styles.navLink} to={`/admin/configure`}>Configure</Link>
-      </Navigation>
-    </Header>
-    <Drawer>
-      <Navigation>
-        <Link className={styles.navLink} to={`/admin/`}>Moderate</Link>
-        <Link className={styles.navLink} to={`/admin/configure`}>Configure</Link>
-      </Navigation>
-    </Drawer>
-    {props.children}
-  </Layout>
-)

client/coral-admin/src/components/Page.js

@@ -1,12 +0,0 @@
-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>
-)

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 () => (
+  <Drawer>
+    <Navigation>
+      <Link className={styles.navLink} to="/admin">Moderate</Link>
+      <Link className={styles.navLink} to="/admin/community">Community</Link>
+      <Link className={styles.navLink} to="/admin/configure">Configure</Link>
+    </Navigation>
+  </Drawer>
+)

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 () => (
+  <Header title='Talk'>
+    <Navigation>
+      <Link className={styles.navLink} to="/admin">Moderate</Link>
+      <Link className={styles.navLink} to="/admin/community">Community</Link>
+      <Link className={styles.navLink} to="/admin/configure">Configure</Link>
+    </Navigation>
+  </Header>
+)

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 }) => (
+  <LayoutMDL fixedDrawer>
+    <Header />
+    <Drawer />
+    {children}
+  </LayoutMDL>
+)

client/coral-admin/src/containers/CommentStream.js

@@ -6,7 +6,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 +43,17 @@ class CommentStream extends React.Component {
   // Render the comment box along with the CommentList
   render ({ comments }, { snackbar, snackbarMsg }) {
     return (
-      <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>
+      <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>
     )
   }
 }

client/coral-admin/src/containers/CommunityContainer.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import I18n from 'coral-framework/i18n/i18n'
+import translations from '../translations'
+
+export default class CommunityContainer extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Community</h1>
+      </div>
+    )
+  }
+}

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 (
-      <Page>
         <div className={styles.container}>
           <div className={styles.leftColumn}>
             <List>
@@ -106,7 +104,6 @@ class Configure extends React.Component {
             }
           </div>
         </div>
-      </Page>
     )
   }
 }

client/coral-admin/src/containers/LayoutContainer.js

@@ -0,0 +1,19 @@
+import React, { Component }from 'react'
+import { connect } from 'react-redux'
+
+import { Layout } from '../components/ui/Layout'
+
+class LayoutContainer extends Component {
+  render () {
+    return <Layout { ...this.props } />
+  }
+}
+
+LayoutContainer.propTypes = {}
+
+const mapStateToProps = state => ({ data: {} })
+
+const mapDispatchToProps = (dispatch, ownProps) => ({ dispatch })
+
+export default connect(mapStateToProps, mapDispatchToProps)(LayoutContainer)
+

client/coral-admin/src/containers/ModerationQueue.js

@@ -2,7 +2,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 +19,6 @@ class ModerationQueue extends React.Component {
   constructor (props) {
     super(props)
 
-    console.log('ModerationQueue', props)
-
     this.state = { activeTab: 'pending', singleView: false, modalOpen: false }
   }
 
@@ -60,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 (
-      <Page>
+      <div>
         <div className='mdl-tabs mdl-js-tabs mdl-js-ripple-effect'>
           <div className='mdl-tabs__tab-bar'>
             <a href='#pending' onClick={() => this.onTabClick('pending')}
@@ -109,7 +105,7 @@ class ModerationQueue extends React.Component {
           <ModerationKeysModal open={modalOpen}
             onClose={() => this.setState({ modalOpen: false })} />
         </div>
-      </Page>
+      </div>
     )
   }
 }

views/admin.ejs

@@ -10,8 +10,8 @@
       body, #root {
         width: 100%;
         height: 100%;
-				margin: 0;
-				background: #fff;
+        margin: 0;
+        background: #fff;
       }
     </style>
   </head>

views/admin.ejs~HEAD

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
+    <title>Talk - Coral Admin</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
+    <style media="screen">
+      body, #root {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        background: #fff;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="<%= basePath %>/bundle.js" charset="utf-8"></script>
+  </body>
+</html>

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({