Plugin api, state, actions, context

plugins/coral-plugin-respect/client/actions.js

@@ -4,3 +4,4 @@ export const clickButton = () => dispatch => {
   console.log('here');
   dispatch(buttonClicked());
 };
+

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

@@ -1,10 +1,27 @@
 import React from 'react';
 import styles from './style.css';
+import {Icon} from 'coral-ui';
 
-export default (props) => (
-  <div className={styles.Respect} key={props.key}>
-    {console.log(props)}
-    <button onClick={props.actions.clickButton}>Respect</button>
-  </div>
-);
+export default (props) => {
+  const handleClick = () => {
+    props.actions.clickButton();
+    // props.postRespect({
+    //   item_id: props.comment.id,
+    //   item_type: 'COMMENTS'
+    // });
+  };
+  const {clicked} = props.state.respect;
+
+  return (
+    <div className={styles.Respect} key={props.key}>
+      <button
+        className={clicked ? styles.clicked : ''}
+        onClick={handleClick}>
+        Respect
+        <Icon name="done"/>
+        <span>9</span>
+      </button>
+    </div>
+  );
+};
 

plugins/coral-plugin-respect/client/style.css

@@ -8,4 +8,8 @@
         border: none;
         font-size: inherit;
     }
+
+    .clicked {
+        color: #ffcc00;
+    }
 }