Merge branch 'master' into query-mutation-api

Conflicts:
	client/coral-embed-stream/src/components/Comment.js
	client/coral-embed-stream/src/containers/Stream.js

plugins/coral-plugin-like/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/coral-plugin-like/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/coral-plugin-like/client/components/Icon.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import cn from 'classnames';
+
+export default ({className}) => (
+  <i className={cn('fa', 'fa-handshake-o', className)} aria-hidden="true"/>
+);

plugins/coral-plugin-like/client/components/LikeButton.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import styles from './style.css';
+import Icon from './Icon';
+
+import { I18n } from 'coral-framework';
+import cn from 'classnames';
+import translations from '../translations.json';
+import { getMyActionSummary, getTotalActionCount } from 'coral-framework/utils';
+
+const lang = new I18n(translations);
+const name = 'coral-plugin-like';
+
+class LikeButton extends Component {
+  handleClick = () => {
+    const { postLike, showSignInDialog, deleteAction } = this.props;
+    const { root: { me }, comment } = this.props;
+
+    const myLikeActionSummary = getMyActionSummary(
+      'LikeActionSummary',
+      comment
+    );
+
+    // If the current user does not exist, trigger sign in dialog.
+    if (!me) {
+      showSignInDialog();
+      return;
+    }
+
+    // If the current user is banned, do nothing.
+    if (me.status === 'BANNED') {
+      return;
+    }
+
+    if (myLikeActionSummary) {
+      deleteAction(myLikeActionSummary.current_user.id, comment.id);
+    } else {
+      postLike({
+        item_id: comment.id,
+        item_type: 'COMMENTS'
+      });
+    }
+  };
+
+  render() {
+    const { comment } = this.props;
+
+    if (!comment) {
+      return null;
+    }
+
+    const myLike = getMyActionSummary('LikeActionSummary', comment);
+    let count = getTotalActionCount('LikeActionSummary', comment);
+
+    return (
+      <div className={cn(styles.like, `${name}-container`)}>
+        <button
+          className={cn(
+            styles.button,
+            { [styles.liked]: myLike },
+            `${name}-button`
+          )}
+          onClick={this.handleClick}
+        >
+          <span className={`${name}-button-text`}>
+            {lang.t(myLike ? 'liked' : 'like')}
+          </span>
+          <i
+            className={cn(
+              styles.icon,
+              'material-icons',
+              { [styles.liked]: myLike },
+              `${name}-icon`
+            )}
+            aria-hidden={true}
+          >
+            thumb_up
+          </i>
+          <span className={`${name}-count`}>{count > 0 && count}</span>
+        </button>
+      </div>
+    );
+  }
+}
+
+LikeButton.propTypes = {
+  data: React.PropTypes.object.isRequired
+};
+
+export default LikeButton;

plugins/coral-plugin-like/client/components/style.css

@@ -0,0 +1,30 @@
+.like {
+  display: inline-block;
+ }
+
+.button {
+  color: #2a2a2a;
+  margin: 5px 10px 5px 0px;
+  background: none;
+  padding: 0px;
+  border: none;
+  font-size: inherit;
+
+  &:hover {
+    color: #767676;
+    cursor: pointer;
+  }
+
+  &.liked {
+    color: rgb(0,134,227);
+
+    &:hover {
+      color: rgb(0,134,227);
+      cursor: pointer;
+    }
+  }
+}
+
+.icon {
+  padding: 0 5px;
+}

plugins/coral-plugin-like/client/containers/LikeButton.js

@@ -0,0 +1,185 @@
+import get from 'lodash/get';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql, graphql } from 'react-apollo';
+import LikeButton from '../components/LikeButton';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { showSignInDialog } from 'coral-framework/actions/auth';
+
+const isLikeAction = a => a.__typename === 'LikeActionSummary';
+
+const COMMENT_FRAGMENT = gql`
+  fragment LikeButton_updateFragment on Comment {
+    action_summaries {
+      ... on LikeActionSummary {
+        count
+        current_user {
+          id
+        }
+      }
+    }
+  }
+`;
+
+const withDeleteAction = graphql(
+  gql`
+  mutation deleteAction($id: ID!) {
+      deleteAction(id:$id) {
+        errors {
+          translation_key
+        }
+      }
+  }
+`,
+  {
+    props: ({ mutate }) => ({
+      deleteAction: (id, commentId) => {
+        return mutate({
+          variables: { id },
+          optimisticResponse: {
+            deleteAction: {
+              __typename: 'DeleteActionResponse',
+              errors: null
+            }
+          },
+          update: proxy => {
+            const fragmentId = `Comment_${commentId}`;
+
+            // Read the data from our cache for this query.
+            const data = proxy.readFragment({
+              fragment: COMMENT_FRAGMENT,
+              id: fragmentId
+            });
+
+            // Check whether we liked this comment.
+            const idx = data.action_summaries.findIndex(isLikeAction);
+            if (
+              idx < 0 ||
+              get(data.action_summaries[idx], 'current_user.id') !== id
+            ) {
+              return;
+            }
+
+            data.action_summaries[idx] = {
+              ...data.action_summaries[idx],
+              count: data.action_summaries[idx].count - 1,
+              current_user: null
+            };
+
+            // Write our data back to the cache.
+            proxy.writeFragment({
+              fragment: COMMENT_FRAGMENT,
+              id: fragmentId,
+              data
+            });
+          }
+        });
+      }
+    })
+  }
+);
+
+const withPostLike = graphql(
+  gql`
+  mutation createLike($like: CreateLikeInput!) {
+    createLike(like: $like) {
+      like {
+        id
+      }
+      errors {
+        translation_key
+      }
+    }
+  }
+`,
+  {
+    props: ({ mutate }) => ({
+      postLike: like => {
+        return mutate({
+          variables: { like },
+          optimisticResponse: {
+            createLike: {
+              __typename: 'CreateLikeResponse',
+              errors: null,
+              like: {
+                __typename: 'LikeAction',
+                id: 'pending'
+              }
+            }
+          },
+          update: (proxy, mutationResult) => {
+            const fragmentId = `Comment_${like.item_id}`;
+
+            // Read the data from our cache for this query.
+            const data = proxy.readFragment({
+              fragment: COMMENT_FRAGMENT,
+              id: fragmentId
+            });
+
+            // Add our comment from the mutation to the end.
+            let idx = data.action_summaries.findIndex(isLikeAction);
+
+            // Check whether we already liked this comment.
+            if (idx >= 0 && data.action_summaries[idx].current_user) {
+              return;
+            }
+
+            if (idx < 0) {
+              // Add initial action when it doesn't exist.
+              data.action_summaries.push({
+                __typename: 'LikeActionSummary',
+                count: 0,
+                current_user: null
+              });
+              idx = data.action_summaries.length - 1;
+            }
+
+            data.action_summaries[idx] = {
+              ...data.action_summaries[idx],
+              count: data.action_summaries[idx].count + 1,
+              current_user: mutationResult.data.createLike.like
+            };
+
+            // Write our data back to the cache.
+            proxy.writeFragment({
+              fragment: COMMENT_FRAGMENT,
+              id: fragmentId,
+              data
+            });
+          }
+        });
+      }
+    })
+  }
+);
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ showSignInDialog }, dispatch);
+
+const enhance = compose(
+  withFragments({
+    root: gql`
+      fragment LikeButton_root on RootQuery {
+        me {
+          status
+        }
+      }
+    `,
+    comment: gql`
+      fragment LikeButton_comment on Comment {
+        action_summaries {
+          ... on LikeActionSummary {
+            count
+            current_user {
+              id
+            }
+          }
+        }
+      }`
+  }),
+  connect(null, mapDispatchToProps),
+  withDeleteAction,
+  withPostLike
+);
+
+export default enhance(LikeButton);

plugins/coral-plugin-like/client/index.js

@@ -0,0 +1,7 @@
+import LikeButton from './containers/LikeButton';
+
+export default {
+  slots: {
+    commentReactions: [LikeButton]
+  }
+};

plugins/coral-plugin-like/client/translations.json

@@ -0,0 +1,10 @@
+{
+  "en": {
+    "like": "Like",
+    "liked": "Liked"
+  },
+  "es": {
+    "like": "Me Gusta",
+    "liked": "Me Gustó"
+  }
+}

plugins/coral-plugin-like/index.js

@@ -0,0 +1,36 @@
+const {readFileSync} = require('fs');
+const path = require('path');
+const wrapResponse = require('../../graph/helpers/response');
+
+module.exports = {
+  typeDefs: readFileSync(path.join(__dirname, 'server/typeDefs.graphql'), 'utf8'),
+  resolvers: {
+    RootMutation: {
+      createLike(_, {like: {item_id, item_type}}, {mutators: {Action}}) {
+        return wrapResponse('like')(Action.create({item_id, item_type, action_type: 'LIKE'}));
+      }
+    }
+  },
+  hooks: {
+    Action: {
+      __resolveType: {
+        post({action_type}) {
+          switch (action_type) {
+          case 'LIKE':
+            return 'LikeAction';
+          }
+        }
+      }
+    },
+    ActionSummary: {
+      __resolveType: {
+        post({action_type}) {
+          switch (action_type) {
+          case 'LIKE':
+            return 'LikeActionSummary';
+          }
+        }
+      }
+    }
+  }
+};

plugins/coral-plugin-like/server/typeDefs.graphql

@@ -0,0 +1,70 @@
+enum ACTION_TYPE {
+
+  # Represents a Like.
+  LIKE
+}
+
+enum ASSET_METRICS_SORT {
+
+  # Represents a LikeAction.
+  LIKE
+}
+
+input CreateLikeInput {
+
+  # The item's id for which we are to create a like.
+  item_id: ID!
+
+  # The type of the item for which we are to create the like.
+  item_type: ACTION_ITEM_TYPE!
+}
+
+# LikeAction is used by users who "like" a specific entity.
+type LikeAction implements Action {
+
+  # The ID of the action.
+  id: ID!
+
+  # The author of the action.
+  user: User
+
+  # The time when the Action was updated.
+  updated_at: Date
+
+  # The time when the Action was created.
+  created_at: Date
+}
+
+type LikeActionSummary implements ActionSummary {
+
+  # The count of actions with this group.
+  count: Int
+
+  # The current user's action.
+  current_user: LikeAction
+}
+
+# A summary of counts related to all the Likes on an Asset.
+type LikeAssetActionSummary implements AssetActionSummary {
+
+  # Number of likes associated with actionable types on this this Asset.
+  actionCount: Int
+
+  # Number of unique actionable types that are referenced by the likes.
+  actionableItemCount: Int
+}
+
+type CreateLikeResponse implements Response {
+
+  # The like that was created.
+  like: LikeAction
+
+  # An array of errors relating to the mutation that occurred.
+  errors: [UserError]
+}
+
+type RootMutation {
+
+  # Creates a like on an entity.
+  createLike(like: CreateLikeInput!): CreateLikeResponse
+}

plugins/coral-plugin-respect/index.js

@@ -3,11 +3,16 @@ const path = require('path');
 const wrapResponse = require('../../graph/helpers/response');
 
 module.exports = {
-  typeDefs: readFileSync(path.join(__dirname, 'server/typeDefs.graphql'), 'utf8'),
+  typeDefs: readFileSync(
+    path.join(__dirname, 'server/typeDefs.graphql'),
+    'utf8'
+  ),
   resolvers: {
     RootMutation: {
       createRespect(_, {respect: {item_id, item_type}}, {mutators: {Action}}) {
-        return wrapResponse('respect')(Action.create({item_id, item_type, action_type: 'RESPECT'}));
+        return wrapResponse('respect')(
+          Action.create({item_id, item_type, action_type: 'RESPECT'})
+        );
       }
     }
   },