First implementation of ignore user plugin

plugins/talk-plugin-author-menu/client/components/Menu.css

@@ -35,3 +35,7 @@
   transform: rotate(180deg);
 }
 
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}

plugins/talk-plugin-author-menu/client/components/Menu.js

@@ -5,11 +5,13 @@ import {Slot} from 'plugin-api/beta/client/components';
 export default ({data, root, asset, comment, contentSlot}) => {
   if (contentSlot) {
     return (
-      <Slot
-        fill={contentSlot}
-        data={data}
-        queryData={{asset, root, comment}}
-      />
+      <div className={styles.menu}>
+        <Slot
+          fill={contentSlot}
+          data={data}
+          queryData={{asset, root, comment}}
+        />
+      </div>
     );
   }
 
@@ -21,6 +23,7 @@ export default ({data, root, asset, comment, contentSlot}) => {
         queryData={{asset, root, comment}}
       />
       <Slot
+        className={styles.actions}
         fill={'authorMenuActions'}
         data={data}
         queryData={{asset, root, comment}}

plugins/talk-plugin-author-menu/client/containers/AuthorName.js

@@ -22,6 +22,9 @@ class AuthorNameContainer extends React.Component {
       this.setState({
         menuVisible: false
       });
+      if (this.props.contentSlot) {
+        this.props.resetContentSlot();
+      }
     }
   }
 
@@ -31,6 +34,7 @@ class AuthorNameContainer extends React.Component {
       root={this.props.root}
       asset={this.props.asset}
       comment={this.props.comment}
+      contentSlot={this.props.contentSlot}
       menuVisible={this.state.menuVisible}
       toggleMenu={this.toggleMenu}
       hideMenu={this.hideMenu}

plugins/talk-plugin-ignore-user/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-ignore-user/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.css

@@ -0,0 +1,16 @@
+.root {
+  white-space: nowrap;
+}
+
+.memberSince {
+  color: #484747;
+  margin-left: 4px;
+  letter-spacing: 0.2px;
+  font-size: 0.9em;
+  vertical-align: middle;
+}
+
+.icon {
+  font-size: 1.4em;
+  vertical-align: middle;
+}

plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './IgnoreUserAction.css';
+import {t} from 'plugin-api/beta/client/services';
+
+export default ({ignoreUser}) => (
+  <button className={styles.button} onClick={ignoreUser}>
+    {t('talk-plugin-ignore-user.ignore')}
+  </button>
+);

plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css

@@ -0,0 +1,9 @@
+.root {
+  width: 250px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}
+

plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './IgnoreUserConfirmation.css';
+import {t} from 'plugin-api/beta/client/services';
+
+export default ({ignoreUser}) => (
+  <div className={styles.root}>
+    Do you really want to ignore this user?
+    <div className={styles.actions}>
+      <button className={styles.button} onClick={ignoreUser}>
+        {t('talk-plugin-ignore-user.ignore')}
+      </button>
+    </div>
+  </div>
+);

plugins/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import IgnoreUserAction from '../components/IgnoreUserAction';
+import {compose} from 'react-apollo';
+import {connect, withFragments} from 'plugin-api/beta/client/hocs';
+import {bindActionCreators} from 'redux';
+import {setContentSlot} from 'plugins/talk-plugin-author-menu/client/actions';
+import IgnoreUserConfirmation from './IgnoreUserConfirmation';
+
+class IgnoreUserActionContainer extends React.Component {
+
+  ignoreUser = () => {
+    this.props.setContentSlot('ignoreUserConfirmation');
+  };
+
+  render() {
+    return <IgnoreUserAction
+      ignoreUser={this.ignoreUser}
+    />;
+  }
+}
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    setContentSlot,
+  }, dispatch);
+
+const withIgnoreUserActionFragments = withFragments(IgnoreUserConfirmation.fragments);
+
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  withIgnoreUserActionFragments,
+);
+
+export default enhance(IgnoreUserActionContainer);

plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import IgnoreUserConfirmation from '../components/IgnoreUserConfirmation';
+import {compose, gql} from 'react-apollo';
+import {connect, withFragments, withIgnoreUser} from 'plugin-api/beta/client/hocs';
+import {bindActionCreators} from 'redux';
+import {setContentSlot} from 'plugins/talk-plugin-author-menu/client/actions';
+
+class IgnoreUserConfirmationContainer extends React.Component {
+
+  ignoreUser = () => {
+    this.props.ignoreUser(this.props.comment.user.id);
+    this.props.setContentSlot(null);
+  };
+
+  render() {
+    return <IgnoreUserConfirmation
+      username={this.props.comment.username}
+      ignoreUser={this.ignoreUser}
+    />;
+  }
+}
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    setContentSlot,
+  }, dispatch);
+
+const withIgnoreUserConfirmationFragments = withFragments({
+  comment: gql`
+    fragment TalkIgnoreUser_IgnoreUserConfirmation_comment on Comment {
+      user {
+        id
+        username
+      }
+    }`,
+});
+
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  withIgnoreUserConfirmationFragments,
+  withIgnoreUser,
+);
+
+export default enhance(IgnoreUserConfirmationContainer);

plugins/talk-plugin-ignore-user/client/index.js

@@ -0,0 +1,26 @@
+import IgnoreUserAction from './containers/IgnoreUserAction';
+import IgnoreUserConfirmation from './containers/IgnoreUserConfirmation';
+import translations from './translations.yml';
+import update from 'immutability-helper';
+
+export default {
+  mutations: {
+    IgnoreUser: ({variables}) => ({
+      updateQueries: {
+        CoralEmbedStream_Embed: (previousData) => {
+          const ignoredUserId = variables.id;
+          const updated = update(previousData, {me: {ignoredUsers: {$push: [{
+            id: ignoredUserId,
+            __typename: 'User',
+          }]}}});
+          return updated;
+        }
+      }
+    }),
+  },
+  slots: {
+    authorMenuActions: [IgnoreUserAction],
+    ignoreUserConfirmation: [IgnoreUserConfirmation]
+  },
+  translations
+};

plugins/talk-plugin-ignore-user/client/translations.yml

@@ -0,0 +1,5 @@
+en:
+  talk-plugin-ignore-user:
+    ignore: "ignore"
+es:
+  talk-plugin-ignore-user:

plugins/talk-plugin-ignore-user/index.js

@@ -0,0 +1 @@
+module.exports = {};