Plugins renaming

plugins/talk-plugin-respect/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-respect/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-respect/client/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/talk-plugin-respect/client/RespectButton.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import Icon from './Icon';
+import styles from './styles.css';
+import {withReaction} from 'plugin-api/beta/client/hocs';
+import {t, can} from 'plugin-api/beta/client/services';
+import cn from 'classnames';
+
+const plugin = 'talk-plugin-respect';
+
+class RespectButton extends React.Component {
+  handleClick = () => {
+    const {
+      postReaction,
+      deleteReaction,
+      showSignInDialog,
+      alreadyReacted,
+      addNotification,
+      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.respected]: alreadyReacted}, `${plugin}-button`)}
+          onClick={this.handleClick}
+        >
+          <span className={cn(`${plugin}-label`, styles.label)}>
+            {t(alreadyReacted ? 'talk-plugin-respect.respected' : 'talk-plugin-respect.respect')}
+          </span>
+          <Icon className={cn(styles.icon, `${plugin}-icon`)} />
+          <span className={cn(`${plugin}-count`)}>{count > 0 && count}</span>
+        </button>
+      </div>
+    );
+  }
+}
+
+export default withReaction('respect')(RespectButton);

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

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

plugins/talk-plugin-respect/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;
+  }
+
+  &.respected {
+    color: #c98211;
+
+    &:hover {
+      color: #e59614;
+      cursor: pointer;
+    }
+  }
+}
+
+.icon {
+  font-size: 12px;
+  padding: 0 3px;
+}
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}

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

@@ -0,0 +1,9 @@
+en:
+  talk-plugin-respect:
+    respect: Respect
+    respected: Respected
+es:
+  talk-plugin-respect:
+    respect: Respetar
+    respected: Respetado
+