Plugins renaming

plugins/talk-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/talk-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/talk-plugin-like/client/LikeButton.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import styles from './styles.css';
+import {withReaction} from 'plugin-api/beta/client/hocs';
+import {t, can} from 'plugin-api/beta/client/services';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+import cn from 'classnames';
+
+const plugin = 'talk-plugin-like';
+
+class LikeButton extends React.Component {
+  handleClick = () => {
+    const {
+      postReaction,
+      deleteReaction,
+      showSignInDialog,
+      addNotification,
+      alreadyReacted,
+      user,
+    } = this.props;
+
+    // If the current user does not exist, trigger sign in dialog.
+    if (!user) {
+      showSignInDialog();
+      return;
+    }
+
+    // If the current user is suspended, do nothing.
+    if (!can(user, 'INTERACT_WITH_COMMUNITY')) {
+      addNotification('error', t('error.NOT_AUTHORIZED'));
+      return;
+    }
+
+    if (alreadyReacted) {
+      deleteReaction();
+    } else {
+      postReaction();
+    }
+  };
+
+  render() {
+    const {count, alreadyReacted} = this.props;
+    return (
+      <div className={cn(styles.container, `${plugin}-container`)}>
+        <button
+          className={cn(styles.button, {[styles.liked]: alreadyReacted}, `${plugin}-button`)}
+          onClick={this.handleClick}
+        >
+          <span className={cn(`${plugin}-label`, styles.label)}>
+            {t(alreadyReacted ? 'talk-plugin-like.liked' : 'talk-plugin-like.like')}
+          </span>
+          <Icon name="thumb_up" className={cn(`${plugin}-icon`, styles.icon)} />
+          <span className={`${plugin}-count`}>{count > 0 && count}</span>
+        </button>
+      </div>
+    );
+  }
+}
+
+export default withReaction('like')(LikeButton);

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

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

plugins/talk-plugin-like/client/styles.css

@@ -0,0 +1,38 @@
+.container {
+  display: inline-block;
+}
+
+.button {
+  color: #2a2a2a;
+  margin: 5px 10px 5px 0px;
+  background: none;
+  padding: 0px;
+  border: none;
+  font-size: inherit;
+  vertical-align: middle;
+
+  &:hover {
+    color: #767676;
+    cursor: pointer;
+  }
+
+  &.liked {
+    color: rgb(0,134,227);
+    &:hover {
+      color: rgb(0,134,227);
+      cursor: pointer;
+    }
+  }
+}
+
+.icon {
+  font-size: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
+}
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}

plugins/talk-plugin-like/client/translations.yml

@@ -0,0 +1,9 @@
+en:
+  talk-plugin-like:
+    like: Like
+    liked: Liked
+es:
+  talk-plugin-like:
+    like: Me Gusta
+    liked: Me Gustó
+

plugins/talk-plugin-like/index.js

@@ -0,0 +1,2 @@
+const {getReactionConfig} = require('../../plugin-api/beta/server');
+module.exports = getReactionConfig('like');