Merge master

plugins/talk-plugin-author-menu/README.md

@@ -0,0 +1,20 @@
+---
+title: talk-plugin-author-menu
+permalink: /plugin/talk-plugin-author-menu/
+layout: plugin
+plugin:
+    name: talk-plugin-author-menu
+    default: true
+    provides:
+        - Client
+---
+
+Enables plugins to integrate into the embed stream at the author name location.
+We have recipes for showing the commenter's "member since" date, and to show a
+subscriber badge. These will require some integration on your side to connect
+them to the data source that houses this information.
+
+- [talk-plugin-member-since](/talk/plugin/talk-plugin-member-since)
+- [talk-plugin-subscriber](/talk/plugin/talk-plugin-subscriber)
+
+To get started, check out our [Talk Recipes](https://github.com/coralproject/talk-recipes).

plugins/talk-plugin-author-menu/client/components/AuthorName.js

@@ -1,14 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Menu from './Menu';
 import styles from './AuthorName.css';
 import { ClickOutside } from 'plugin-api/beta/client/components';
 import cn from 'classnames';
 
-export default ({
-  data,
-  root,
-  asset,
-  comment,
+const AuthorName = ({
+  slotPassthrough,
+  username,
   contentSlot,
   menuVisible,
   toggleMenu,
@@ -21,18 +20,23 @@ export default ({
           className={cn(styles.button, 'talk-plugin-author-menu-button')}
           onClick={toggleMenu}
         >
-          <span className={styles.name}>{comment.user.username}</span>
+          <span className={styles.name}>{username}</span>
         </button>
         {menuVisible && (
-          <Menu
-            data={data}
-            root={root}
-            asset={asset}
-            comment={comment}
-            contentSlot={contentSlot}
-          />
+          <Menu slotPassthrough={slotPassthrough} contentSlot={contentSlot} />
         )}
       </div>
     </ClickOutside>
   );
 };
+
+AuthorName.propTypes = {
+  slotPassthrough: PropTypes.object.isRequired,
+  username: PropTypes.string.isRequired,
+  menuVisible: PropTypes.bool.isRequired,
+  toggleMenu: PropTypes.func.isRequired,
+  hideMenu: PropTypes.func.isRequired,
+  contentSlot: PropTypes.string,
+};
+
+export default AuthorName;

plugins/talk-plugin-author-menu/client/components/Menu.js

@@ -1,17 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Menu.css';
 import { Slot } from 'plugin-api/beta/client/components';
 import cn from 'classnames';
 
-export default ({ data, root, asset, comment, contentSlot }) => {
+const Menu = ({ slotPassthrough, contentSlot }) => {
   if (contentSlot) {
     return (
       <div className={cn(styles.menu, 'talk-plugin-author-menu-popup')}>
-        <Slot
-          fill={contentSlot}
-          data={data}
-          queryData={{ asset, root, comment }}
-        />
+        <Slot fill={contentSlot} passthrough={slotPassthrough} />
       </div>
     );
   }
@@ -21,15 +18,20 @@ export default ({ data, root, asset, comment, contentSlot }) => {
       <Slot
         className={cn('talk-plugin-author-menu-infos')}
         fill={'authorMenuInfos'}
-        data={data}
-        queryData={{ asset, root, comment }}
+        passthrough={slotPassthrough}
       />
       <Slot
         className={cn(styles.actions, 'talk-plugin-author-menu-actions')}
         fill={'authorMenuActions'}
-        data={data}
-        queryData={{ asset, root, comment }}
+        passthrough={slotPassthrough}
       />
     </div>
   );
 };
+
+Menu.propTypes = {
+  slotPassthrough: PropTypes.object.isRequired,
+  contentSlot: PropTypes.string,
+};
+
+export default Menu;

plugins/talk-plugin-author-menu/client/containers/AuthorName.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { connect, withFragments } from 'plugin-api/beta/client/hocs';
 import { bindActionCreators } from 'redux';
 import AuthorName from '../components/AuthorName';
@@ -47,21 +48,39 @@ class AuthorNameContainer extends React.Component {
   };
 
   render() {
+    const {
+      root,
+      asset,
+      comment,
+      contentSlot,
+      showMenuForComment,
+    } = this.props;
+
+    const slotPassthrough = { root, asset, comment };
+
     return (
       <AuthorName
-        data={this.props.data}
-        root={this.props.root}
-        asset={this.props.asset}
-        comment={this.props.comment}
-        contentSlot={this.props.contentSlot}
-        menuVisible={this.props.showMenuForComment === this.props.comment.id}
+        username={comment.user.username}
+        contentSlot={contentSlot}
+        menuVisible={showMenuForComment === comment.id}
         toggleMenu={this.toggleMenu}
         hideMenu={this.hideMenu}
+        slotPassthrough={slotPassthrough}
       />
     );
   }
 }
 
+AuthorNameContainer.propTypes = {
+  root: PropTypes.object.isRequired,
+  asset: PropTypes.object.isRequired,
+  comment: PropTypes.object.isRequired,
+  contentSlot: PropTypes.string,
+  showMenuForComment: PropTypes.string,
+  openMenu: PropTypes.func.isRequired,
+  closeMenu: PropTypes.func.isRequired,
+};
+
 const slots = ['authorMenuInfos', 'authorMenuActions'];
 
 const mapStateToProps = ({ talkPluginAuthorMenu: state }) => ({

plugins/talk-plugin-author-menu/client/translations.yml

@@ -1,3 +1,5 @@
+ar:
+  talk-plugin-author-menu:
 da:
   talk-plugin-author-menu:
 en: