From e1c4b69038ec3fc8020bd29510545be5f03ffe3e Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 30 Mar 2017 22:10:24 -0300
Subject: [PATCH] Plugin now support statefull components

---
 .eslintrc.json                               |  1 +
 client/coral-framework/helpers/plugins.js    | 13 +++---
 client/coral-framework/utils/index.js        |  2 +-
 plugins.json                                 |  3 +-
 plugins/coral-plugin-love/client/.babelrc    | 14 +++++++
 plugins/coral-plugin-love/client/config.json |  4 ++
 plugins/coral-plugin-love/client/index.js    |  7 ++++
 plugins/coral-plugin-love/index.js           |  0
 plugins/coral-plugin-respect/client/.babelrc |  2 +-
 plugins/coral-plugin-respect/client/index.js | 43 ++++++++++++--------
 10 files changed, 64 insertions(+), 25 deletions(-)
 create mode 100644 plugins/coral-plugin-love/client/.babelrc
 create mode 100644 plugins/coral-plugin-love/client/config.json
 create mode 100644 plugins/coral-plugin-love/client/index.js
 create mode 100644 plugins/coral-plugin-love/index.js

diff --git a/.eslintrc.json b/.eslintrc.json
index 5cdd4dfa9..285f5f7dc 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -4,6 +4,7 @@
         "node": true
     },
     "extends": "eslint:recommended",
+    "parser": "babel-eslint",
     "parserOptions": {
         "ecmaVersion": 2017,
         "sourceType": "module",
diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js
index af9079e6d..e5ab297c8 100644
--- a/client/coral-framework/helpers/plugins.js
+++ b/client/coral-framework/helpers/plugins.js
@@ -1,4 +1,5 @@
 import {client as clientPlugins} from 'pluginsConfig';
+import React from 'react';
 
 function injectPlugins ({fill, ...props}) {
   let context,
@@ -67,11 +68,13 @@ function injectPlugins ({fill, ...props}) {
       .map(addProps)
       .filter(filterBySlot)
       .reduce((entry, plugin, i) => {
-        // const element = React.cloneElement(
-        //   context(plugin.key),
-        //   {...plugin.props, key: i}
-        // );
-        entry = [...entry, context(plugin.key)({...plugin.props, key: i})];
+        const component = context(plugin.key);
+        const element = React.createElement(component, {
+          key: i,
+          ...plugin.props
+        }, null);
+
+        entry = [...entry, element];
         return entry;
       }, []);
   }
diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js
index 5a78b09d2..7c0767fe2 100644
--- a/client/coral-framework/utils/index.js
+++ b/client/coral-framework/utils/index.js
@@ -1,2 +1,2 @@
 export const getActionSummary = (type, comment) => comment.action_summaries
-  .filter((a) => a.__typename === type)[0];
\ No newline at end of file
+  .filter((a) => a.__typename === type)[0];
diff --git a/plugins.json b/plugins.json
index 6ac303c35..cbe97c6bf 100644
--- a/plugins.json
+++ b/plugins.json
@@ -3,6 +3,7 @@
     "coral-plugin-respect"
   ],
   "client": [
-    "coral-plugin-respect"
+    "coral-plugin-respect",
+    "coral-plugin-love"
   ]
 }
\ No newline at end of file
diff --git a/plugins/coral-plugin-love/client/.babelrc b/plugins/coral-plugin-love/client/.babelrc
new file mode 100644
index 000000000..63b1c53de
--- /dev/null
+++ b/plugins/coral-plugin-love/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"
+  ]
+}
diff --git a/plugins/coral-plugin-love/client/config.json b/plugins/coral-plugin-love/client/config.json
new file mode 100644
index 000000000..7f2faa52c
--- /dev/null
+++ b/plugins/coral-plugin-love/client/config.json
@@ -0,0 +1,4 @@
+{
+  "name": "Coral Plugin Love",
+  "slot": "Comment.Detail"
+}
\ No newline at end of file
diff --git a/plugins/coral-plugin-love/client/index.js b/plugins/coral-plugin-love/client/index.js
new file mode 100644
index 000000000..d65d1522f
--- /dev/null
+++ b/plugins/coral-plugin-love/client/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => {
+  return (
+    <div>Love</div>
+  );
+};
diff --git a/plugins/coral-plugin-love/index.js b/plugins/coral-plugin-love/index.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/plugins/coral-plugin-respect/client/.babelrc b/plugins/coral-plugin-respect/client/.babelrc
index 63b1c53de..60be246eb 100644
--- a/plugins/coral-plugin-respect/client/.babelrc
+++ b/plugins/coral-plugin-respect/client/.babelrc
@@ -11,4 +11,4 @@
     "transform-async-to-generator",
     "transform-react-jsx"
   ]
-}
+}
\ No newline at end of file
diff --git a/plugins/coral-plugin-respect/client/index.js b/plugins/coral-plugin-respect/client/index.js
index 91424e315..fefdc1f72 100644
--- a/plugins/coral-plugin-respect/client/index.js
+++ b/plugins/coral-plugin-respect/client/index.js
@@ -4,27 +4,36 @@ import Icon from './components/Icon';
 
 import {getActionSummary} from 'coral-framework/utils';
 
-export default (props) => {
-  const {comment} = props.context;
+class RespectButton extends React.Component {
+  constructor(props) {
+    super(props);
+  }
 
-  const handleClick = () => {
-    props.context.postRespect({
+  handleClick = () => {
+    const {comment} = this.props.context;
+
+    this.props.context.postRespect({
       item_id: comment.id,
       item_type: 'COMMENTS'
     });
-  };
+  }
+  
+  render() {
+    const {comment} = this.props.context;
+    const respectActionSummary = getActionSummary('RespectActionSummary', comment);
 
-  const respectActionSummary = getActionSummary('RespectActionSummary', comment);
+    return (
+      <div className={styles.Respect}>
+        <button
+          onClick={this.handleClick}>
+          Respect
+          <Icon />
+          {respectActionSummary ? <span>{respectActionSummary.count}</span> : null}
+        </button>
+      </div>
+    );
+  }
+}
 
-  return (
-    <div className={styles.Respect} key={props.key}>
-      <button
-        onClick={handleClick}>
-        Respect
-        <Icon />
-        {respectActionSummary ? <span>{respectActionSummary.count}</span> : null}
-      </button>
-    </div>
-  );
-};
+export default RespectButton;