Merge branch 'master' of github.com:coralproject/talk into reject-instream

client/coral-admin/src/AppRouter.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
 import PropTypes from 'prop-types';
+import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
 
 import Configure from 'routes/Configure';
 import Dashboard from 'routes/Dashboard';

client/coral-admin/src/actions/install.js

@@ -128,18 +128,18 @@ const checkInstallRequest = () => ({type: actions.CHECK_INSTALL_REQUEST});
 const checkInstallSuccess = (installed) => ({type: actions.CHECK_INSTALL_SUCCESS, installed});
 const checkInstallFailure = (error) => ({type: actions.CHECK_INSTALL_FAILURE, error});
 
-export const checkInstall = (next) => (dispatch, _, {rest}) => {
+export const checkInstall = (next) => async (dispatch, _, {rest}) => {
   dispatch(checkInstallRequest());
-  rest('/setup')
-    .then(({installed}) => {
-      dispatch(checkInstallSuccess(installed));
-      if (installed) {
-        next();
-      }
-    })
-    .catch((error) => {
-      console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch(checkInstallFailure(errorMessage));
-    });
+
+  try {
+    const {installed} = await rest('/setup');
+    dispatch(checkInstallSuccess(installed));
+    if (installed) {
+      next();
+    }
+  } catch (error) {
+    console.error(error);
+    const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+    dispatch(checkInstallFailure(errorMessage));
+  }
 };

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

@@ -1,4 +1,6 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+
 import styles from './ModerationList.css';
 import {Button} from 'coral-ui';
 import {menuActionsMap} from '../utils/moderationQueueActionsMap';

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Button, Icon} from 'coral-ui';
 import {Menu} from 'react-mdl';
 import cn from 'classnames';

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Layout from 'coral-admin/src/components/ui/Layout';
 import styles from './NotFound.css';
 import {Button, TextField, Alert, Success} from 'coral-ui';

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Dialog} from 'coral-ui';
 import styles from './BanUserDialog.css';
 

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './CommentType.css';
 import {Icon} from 'coral-ui';
 import cn from 'classnames';

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Card} from 'coral-ui';
 
 const EmptyCard = (props) => (

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

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {Icon} from 'coral-ui';
 import styles from './FlagBox.css';
 import t from 'coral-framework/services/i18n';

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Button} from 'coral-ui';
 import styles from './LoadMore.css';
 import cn from 'classnames';

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Modal from 'components/Modal';
 import styles from './ModerationKeysModal.css';
 import t from 'coral-framework/services/i18n';

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './ModerationList.css';
 import key from 'keymaster';
 import Hammer from 'hammerjs';

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Dialog} from 'coral-ui';
 import {RadioGroup, Radio} from 'react-mdl';
 import styles from './SuspendUserDialog.css';

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

@@ -28,16 +28,26 @@ export default class UserDetail extends React.Component {
     bulkReject: PropTypes.func.isRequired,
   }
 
-  rejectThenReload = (info) => {
-    this.props.rejectComment(info).then(() => {
+  rejectThenReload = async (info) => {
+    try {
+      await this.props.rejectComment(info);
       this.props.data.refetch();
-    });
+    } catch (err) {
+
+      // TODO: handle error.
+      console.error(err);
+    }
   }
 
-  acceptThenReload = (info) => {
-    this.props.acceptComment(info).then(() => {
+  acceptThenReload = async (info) => {
+    try {
+      await this.props.acceptComment(info);
       this.props.data.refetch();
-    });
+    } catch (err) {
+
+      // TODO: handle error.
+      console.error(err);
+    }
   }
 
   showAll = () => {
@@ -133,7 +143,7 @@ export default class UserDetail extends React.Component {
           <Slot
             fill="userProfile"
             data={this.props.data}
-            queryData={root, user}
+            queryData={{root, user}}
           />
 
           <hr/>

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 
 import {Icon} from 'coral-ui';

client/coral-admin/src/components/ui/Drawer.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Navigation, Drawer} from 'react-mdl';
 import {IndexLink, Link} from 'react-router';
 import styles from './Drawer.css';

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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
 import styles from './Header.css';
@@ -87,8 +88,8 @@ const CoralHeader = ({
               </Menu>
             </div>
           </li>
-          <li>        
-            {`v${process.env.VERSION}`}        
+          <li>
+            {`v${process.env.VERSION}`}
           </li>
         </ul>
       </div>

client/coral-admin/src/components/ui/Layout.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Layout as LayoutMDL} from 'react-mdl';
 import Header from './Header';
 import Drawer from './Drawer';

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

@@ -36,14 +36,19 @@ class UserDetailContainer extends React.Component {
   isLoadingMore = false;
 
   // status can be 'ACCEPTED' or 'REJECTED'
-  bulkSetCommentStatus = (status) => {
+  bulkSetCommentStatus = async (status) => {
     const changes = this.props.selectedCommentIds.map((commentId) => {
       return this.props.setCommentStatus({commentId, status});
     });
 
-    Promise.all(changes).then(() => {
+    try {
+      await Promise.all(changes);
       this.props.clearUserDetailSelections(); // un-select everything
-    });
+    } catch (err) {
+
+      // TODO: handle error.
+      console.error(err);
+    }
   }
 
   bulkReject = () => {

client/coral-admin/src/routes/Community/components/FlaggedUser.js

@@ -85,7 +85,7 @@ class User extends React.Component {
                 <span className={styles.flaggedByLabel}>
                   {t('community.flags')}({ user.actions.length })
                 </span>:
-                  { user.action_summaries.map(
+                { user.action_summaries.map(
                   (action, i) => {
                     return <span className={styles.flaggedBy} key={i}>
                       {shortReasons[action.reason]} ({action.count})

client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 
 import {Dialog, Button} from 'coral-ui';
 import styles from './RejectUsernameDialog.css';
@@ -48,11 +49,15 @@ class RejectUsernameDialog extends Component  {
 
     const cancel = this.props.handleClose;
     const next = () => this.setState({stage: stage + 1});
-    const suspend = () => {
-      rejectUsername({id: user.user.id, message: this.state.email})
-        .then(() => {
-          this.props.handleClose();
-        });
+    const suspend = async () => {
+      try {
+        await rejectUsername({id: user.user.id, message: this.state.email});
+        this.props.handleClose();
+      } catch (err) {
+
+        // TODO: handle error.
+        console.error(err);
+      }
     };
 
     const suspendModalActions = [

client/coral-admin/src/routes/Configure/components/ModerationSettings.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Configure.css';
 import {Card} from 'coral-ui';
 import {Checkbox} from 'react-mdl';

client/coral-admin/src/routes/Configure/components/TechSettings.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Card} from 'coral-ui';
 import Domainlist from './Domainlist';
 import EmbedLink from './EmbedLink';

client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 import t from 'coral-framework/services/i18n';

client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Dashboard.css';
 import {Icon} from 'coral-ui';
 

client/coral-admin/src/routes/Dashboard/components/FlagWidget.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 

client/coral-admin/src/routes/Dashboard/components/LikeWidget.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 import t from 'coral-framework/services/i18n';

client/coral-admin/src/routes/Install/containers/Install.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {compose} from 'react-apollo';
@@ -31,7 +32,7 @@ class InstallContainer extends Component {
 }
 
 InstallContainer.contextTypes = {
-  router: React.PropTypes.object
+  router: PropTypes.object
 };
 
 const mapStateToProps = (state) => ({

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 
 import {Icon} from 'coral-ui';

client/coral-admin/src/routes/Moderation/components/CommentCount.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './CommentCount.css';
 
 import t from 'coral-framework/services/i18n';

client/coral-admin/src/routes/Moderation/components/ModerationHeader.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Icon} from 'coral-ui';
 import styles from './styles.css';
 import t from 'coral-framework/services/i18n';

client/coral-admin/src/routes/Moderation/components/ModerationMenu.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import CommentCount from './CommentCount';
 import styles from './styles.css';
 import {SelectField, Option} from 'react-mdl-selectfield';

client/coral-admin/src/routes/Moderation/components/ModerationQueue.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import Comment from '../containers/Comment';
 import styles from './styles.css';

client/coral-admin/src/routes/Moderation/components/Story.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './StorySearch.css';
 
 const formatDate = (date) => {

client/coral-admin/src/routes/Moderation/components/StorySearch.js

@@ -8,7 +8,7 @@ const StorySearch = (props) => {
 
   const {
     root: {
-      assets = []
+      assets,
     },
     data: {loading}
   } = props;
@@ -62,7 +62,7 @@ const StorySearch = (props) => {
               {
                 loading
                   ? <Spinner />
-                  : assets.map((story, i) => {
+                  : assets.nodes.map((story, i) => {
                     const storyOpen = story.closedAt === null || new Date(story.closedAt) > new Date();
 
                     return <Story
@@ -77,7 +77,7 @@ const StorySearch = (props) => {
                   })
               }
 
-              {assets.length === 0 && <div className={styles.noResults}>No results</div>}
+              {assets.nodes.length === 0 && <div className={styles.noResults}>No results</div>}
             </div>
           </div>
         </div>

client/coral-admin/src/routes/Moderation/containers/StorySearch.js

@@ -89,12 +89,14 @@ class StorySearchContainer extends React.Component {
 export const withAssetSearchQuery = withQuery(gql`
   query SearchStories($value: String = "") {
     assets(query: {value: $value, limit: 10}) {
-      id
-      title
-      url
-      created_at
-      closedAt
-      author
+      nodes {
+        id
+        title
+        url
+        created_at
+        closedAt
+        author
+      }
     }
   }
 `, {

client/coral-admin/src/routes/Stories/components/Stories.js

@@ -50,17 +50,22 @@ export default class Stories extends Component {
     return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
   }
 
-  onStatusClick = (closeStream, id, statusMenuOpen) => () => {
+  onStatusClick = (closeStream, id, statusMenuOpen) => async () => {
     if (statusMenuOpen) {
       this.setState((prev) => {
         prev.statusMenus[id] = false;
         return prev;
       });
-      this.props.updateAssetState(id, closeStream ? Date.now() : null)
-        .then(() => {
-          const {search, sort, filter, page} = this.state;
-          this.props.fetchAssets(page, limit, search, sort, filter);
-        });
+
+      try {
+        await this.props.updateAssetState(id, closeStream ? Date.now() : null);
+        const {search, sort, filter, page} = this.state;
+        this.props.fetchAssets(page, limit, search, sort, filter);
+      } catch (err) {
+
+        // TODO: handle error.
+        console.error(err);
+      }
     } else {
       this.setState((prev) => {
         prev.statusMenus[id] = true;

client/coral-configure/components/Markdown.js

@@ -1,4 +1,5 @@
-import React, {PureComponent, PropTypes} from 'react';
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
 import marked from 'marked';
 
 const renderer = new marked.Renderer();

client/coral-embed-stream/src/components/CountdownSeconds.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 
 /**

client/coral-embed-stream/src/components/EditableCommentContent.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {notifyForNewCommentStatus} from 'talk-plugin-commentbox/CommentBox';
 import {CommentForm} from 'talk-plugin-commentbox/CommentForm';
 import styles from './Comment.css';
@@ -38,10 +39,10 @@ export class EditableCommentContent extends React.Component {
     maxCharCount: PropTypes.number,
 
     // edit a comment, passed {{ body }}
-    editComment: React.PropTypes.func,
+    editComment: PropTypes.func,
 
     // called when editing should be stopped
-    stopEditing: React.PropTypes.func,
+    stopEditing: PropTypes.func,
   }
 
   constructor(props) {

client/coral-embed-stream/src/components/Embed.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Stream from '../containers/Stream';
 import Slot from 'coral-framework/components/Slot';
 import {can} from 'coral-framework/services/perms';
@@ -90,8 +91,8 @@ export default class Embed extends React.Component {
 }
 
 Embed.propTypes = {
-  data: React.PropTypes.shape({
-    loading: React.PropTypes.bool,
-    error: React.PropTypes.object
+  data: PropTypes.shape({
+    loading: PropTypes.bool,
+    error: PropTypes.object
   }).isRequired
 };

client/coral-embed-stream/src/components/IgnoreUserWizard.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Comment.css';
 import {Button} from 'coral-ui';
 

client/coral-embed-stream/src/components/InactiveCommentLabel.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import styles from './InactiveCommentLabel.css';
 import {Icon} from 'coral-ui';

client/coral-embed-stream/src/components/NewCount.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Button} from 'coral-ui';
 
 import t from 'coral-framework/services/i18n';

client/coral-embed-stream/src/components/Stream.js

@@ -308,7 +308,7 @@ Stream.propTypes = {
   postComment: PropTypes.func.isRequired,
 
   // edit a comment, passed (id, asset_id, { body })
-  editComment: React.PropTypes.func
+  editComment: PropTypes.func
 };
 
 export default Stream;

client/coral-embed-stream/src/components/StreamTabPanel.js

@@ -15,8 +15,8 @@ class StreamTabPanel extends React.Component {
         {loading
           ? <div className={styles.spinnerContainer}><Spinner /></div>
           : <TabContent activeTab={activeTab} sub={sub}>
-              {tabPanes}
-            </TabContent>
+            {tabPanes}
+          </TabContent>
         }
       </div>
     );

client/coral-embed-stream/src/components/SuspendedAccount.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import styles from './SuspendAccount.css';
 import {Button} from 'coral-ui';

client/coral-embed-stream/src/components/TopRightMenu.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {IgnoreUserWizard} from './IgnoreUserWizard';
+import Toggleable from './Toggleable';
+
+// TopRightMenu appears as a dropdown in the top right of the comment.
+// when you click the down cehvron, it expands and shows IgnoreUserWizard
+// when you click 'cancel' in the wizard, it closes the menu
+export class TopRightMenu extends React.Component {
+  static propTypes = {
+
+    // comment on which this menu appears
+    comment: PropTypes.shape({
+      user: PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        username: PropTypes.string.isRequired
+      }).isRequired
+    }).isRequired,
+    ignoreUser: PropTypes.func,
+
+    // show notification to the user (e.g. for errors)
+    notify: PropTypes.func.isRequired,
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
+      timesReset: 0
+    };
+  }
+  render() {
+    const {comment, ignoreUser, notify} = this.props;
+
+    // timesReset is used as Toggleable key so it re-renders on reset (closing the toggleable)
+    const reset = () => this.setState({timesReset: this.state.timesReset + 1});
+    const ignoreUserAndCloseMenuAndNotifyOnError = async ({id}) => {
+
+      // close menu
+      reset();
+
+      // ignore user
+      try {
+        await ignoreUser({id});
+      } catch (error) {
+        notify('error', 'Failed to ignore user');
+        throw error;
+      }
+    };
+    return (
+      <Toggleable key={this.state.timesReset} className="talk-stream-comment-chevron">
+        <div style={{position: 'absolute', right: 0, zIndex: 1}}>
+          <IgnoreUserWizard
+            user={comment.user}
+            cancel={reset}
+            ignoreUser={ignoreUserAndCloseMenuAndNotifyOnError}
+          />
+        </div>
+      </Toggleable>
+    );
+  }
+}
+

client/coral-embed-stream/src/graphql/index.js

@@ -109,7 +109,7 @@ export default {
   },
   mutations: {
     PostComment: ({
-      variables: {comment: {asset_id, body, parent_id, tags = []}},
+      variables: {input: {asset_id, body, parent_id, tags = []}},
       state: {auth},
     }) => ({
       optimisticResponse: {

client/coral-framework/components/Markdown.js

@@ -1,4 +1,5 @@
-import React, {PureComponent, PropTypes} from 'react';
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
 import marked from 'marked';
 
 const renderer = new marked.Renderer();

client/coral-framework/components/MarkdownEditor.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import SimpleMDE from 'simplemde';
 import cn from 'classnames';
 import noop from 'lodash/noop';

client/coral-framework/graphql/fragments.js

@@ -6,6 +6,7 @@ export default {
     'SetCommentStatusResponse',
     'SuspendUserResponse',
     'RejectUsernameResponse',
+    'CreateCommentResponse',
     'SetUserStatusResponse',
     'CreateFlagResponse',
     'EditCommentResponse',

client/coral-framework/graphql/mutations.js

@@ -192,17 +192,17 @@ export const withSetUserStatus = withMutation(
 
 export const withPostComment = withMutation(
   gql`
-    mutation PostComment($comment: CreateCommentInput!) {
-      createComment(comment: $comment) {
+    mutation PostComment($input: CreateCommentInput!) {
+      createComment(input: $input) {
         ...CreateCommentResponse
       }
     }
   `, {
     props: ({mutate}) => ({
-      postComment: (comment) => {
+      postComment: (input) => {
         return mutate({
           variables: {
-            comment
+            input
           },
         });
       }

client/coral-framework/services/bootstrap.js

@@ -15,6 +15,25 @@ import globalFragments from 'coral-framework/graphql/fragments';
 import {createStorage} from 'coral-framework/services/storage';
 import {createHistory} from 'coral-framework/services/history';
 
+/**
+ * getStaticConfiguration will return a singleton of the static configuration
+ * object provided via a JSON DOM element.
+ */
+const getStaticConfiguration = (() => {
+  let staticConfiguration = null;
+  return () => {
+    if (staticConfiguration != null) {
+      return staticConfiguration;
+    }
+
+    const configElement = document.querySelector('#data');
+
+    staticConfiguration = JSON.parse(configElement ? configElement.textContent : '{}');
+
+    return staticConfiguration;
+  };
+})();
+
 /**
  * getAuthToken returns the active auth token or null
  *   Note: this method does not have access to the cookie based token used by
@@ -49,7 +68,6 @@ const getAuthToken = (store, storage) => {
  * @return {Object}                             context
  */
 export function createContext({reducers = {}, pluginsConfig = [], graphqlExtension = {}, notification} = {}) {
-  const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
   const eventEmitter = new EventEmitter({wildcard: true});
   const storage = createStorage();
   const history = createHistory(BASE_PATH);
@@ -63,13 +81,28 @@ export function createContext({reducers = {}, pluginsConfig = [], graphqlExtensi
     // TOKEN YOU MUST DISCONNECT AND RECONNECT THE WEBSOCKET CLIENT.
     return getAuthToken(store, storage);
   };
+
   const rest = createRestClient({
     uri: `${BASE_PATH}api/v1`,
     token,
   });
+
+  // Try to get an overrided liveUri from the static config, if none is found,
+  // build it.
+  let {LIVE_URI: liveUri} = getStaticConfiguration();
+  if (liveUri == null) {
+
+    // The protocol must match the origin protocol, secure/insecure.
+    const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+
+    // Compose the live url from this protocol, the current host + base path
+    // with the live path appended to it.
+    liveUri = `${protocol}://${location.host}${BASE_PATH}api/v1/live`;
+  }
+
   const client = createClient({
     uri: `${BASE_PATH}api/v1/graph/ql`,
-    liveUri: `${protocol}://${location.host}${BASE_PATH}api/v1/live`,
+    liveUri,
     token,
   });
   const plugins = createPluginsService(pluginsConfig);
@@ -79,6 +112,7 @@ export function createContext({reducers = {}, pluginsConfig = [], graphqlExtensi
     // Use default notification service (pym based)
     notification = createNotificationService(pym);
   }
+
   const context = {
     client,
     pym,

client/coral-framework/utils/index.js

@@ -109,7 +109,7 @@ export function mergeDocuments(documents) {
 export function getResponseErrors(mutationResult) {
   const result = [];
   Object.keys(mutationResult.data).forEach((response) => {
-    const errors = mutationResult.data[response].errors;
+    const errors = mutationResult.data[response] && mutationResult.data[response].errors;
     if (errors && errors.length) {
       result.push(...errors);
     }

client/coral-settings/components/IgnoredUsers.js

@@ -0,0 +1,44 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import t from 'coral-framework/services/i18n';
+import styles from './IgnoredUsers.css';
+
+export class IgnoredUsers extends Component {
+  static propTypes = {
+    users: PropTypes.arrayOf(PropTypes.shape({
+      username: PropTypes.string,
+      id: PropTypes.string,
+    })).isRequired,
+
+    // accepts { id }
+    stopIgnoring: PropTypes.func.isRequired,
+  }
+  render() {
+    const {users, stopIgnoring} = this.props;
+    return (
+      <div>
+        {
+          users.length
+            ? <p>{t('framework.because_you_ignored')}</p>
+            : null
+        }
+        <dl className={styles.ignoredUserList}>
+          {
+            users.map(({username, id}) => (
+              <span className={styles.ignoredUser} key={id}>
+                <dt key={id}>{ username }</dt>
+                <dd className={styles.stopListening}>
+                  <a
+                    onClick={() => stopIgnoring({id})}
+                    className={styles.link}>{t('framework.stop_ignoring')}</a>
+                </dd>
+              </span>
+            ))
+          }
+        </dl>
+      </div>
+    );
+  }
+}
+
+export default IgnoredUsers;

client/coral-ui/components/CoralLogo.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './CoralLogo.css';
 
 const CoralLogo = ({className = ''}) => (

client/coral-ui/components/Dialog.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import dialogPolyfill from 'dialog-polyfill';
 import 'dialog-polyfill/dialog-polyfill.css';
 
@@ -43,7 +44,7 @@ export default class Dialog extends Component {
   componentWillUnmount() {
     const dialog = this.dialog;
     if (dialog) {
-      dialog.removeEventListener('cancel', this.props.onCancel);      
+      dialog.removeEventListener('cancel', this.props.onCancel);
     }
   }
 

client/coral-ui/components/Drawer.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Drawer.css';
 
 const Drawer = ({children, onClose}) => {

client/coral-ui/components/Icon.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Icon as IconMDL}  from 'react-mdl';
 import cn from 'classnames';
 import styles from './Icon.css';

client/coral-ui/components/Pager.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Pager.css';
 
 const Rows = (curr, total, onClickHandler) => Array.from(Array(total)).map((e, i) =>

client/coral-ui/components/TextArea.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './TextArea.css';
 
 const TextArea = ({className, value = '', ...props}) => (

client/coral-ui/components/TextField.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './TextField.css';
 
 const TextField = ({className, showErrors = false, errorMsg, label, ...props}) => (

client/coral-ui/components/Wizard.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const Wizard = (props) => {
   const {children, currentStep, ...rest} = props;

client/coral-ui/components/WizardNav.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './WizardNav.css';
 import Icon from './Icon';
 

client/talk-plugin-commentbox/CommentBox.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
@@ -54,7 +55,7 @@ class CommentBox extends React.Component {
       return;
     }
 
-    let comment = {
+    let input = {
       asset_id: assetId,
       parent_id: parentId,
       body: this.state.body,
@@ -62,10 +63,10 @@ class CommentBox extends React.Component {
     };
 
     // Execute preSubmit Hooks
-    this.state.hooks.preSubmit.forEach((hook) => hook());
+    this.state.hooks.preSubmit.forEach((hook) => hook(input));
     this.setState({loadingState: 'loading'});
 
-    postComment(comment, 'comments')
+    postComment(input, 'comments')
       .then(({data}) => {
         this.setState({loadingState: 'success', body: ''});
         const postedComment = data.createComment.comment;

client/talk-plugin-commentbox/CommentForm.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Button} from 'coral-ui';
 import cn from 'classnames';
 import Slot from 'coral-framework/components/Slot';

client/talk-plugin-history/Comment.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Icon} from '../coral-ui';
 import styles from './Comment.css';
 import Slot from 'coral-framework/components/Slot';

client/talk-plugin-history/CommentHistory.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Comment from './Comment';
 import styles from './CommentHistory.css';
 import LoadMore from './LoadMore';

client/talk-plugin-moderation/ModerationLink.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './styles.css';
 
 import t from 'coral-framework/services/i18n';

client/talk-plugin-replies/ReplyBox.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import CommentBox from '../talk-plugin-commentbox/CommentBox';
 
 const name = 'talk-plugin-replies';

client/talk-plugin-replies/ReplyButton.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import t from 'coral-framework/services/i18n';