diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js index 0e251e9a3..c2badd984 100644 --- a/client/coral-embed-stream/src/components/Embed.js +++ b/client/coral-embed-stream/src/components/Embed.js @@ -63,6 +63,7 @@ export default class Embed extends React.Component { } = this.props; const hasHighlightedComment = !!commentId; const popupUrl = `login?parentUrl=${encodeURIComponent(parentUrl)}`; + const slotPassthrough = { data, root }; return (
- +
@@ -77,7 +77,7 @@ class Settings extends React.Component {
)} - +
); @@ -85,8 +85,7 @@ class Settings extends React.Component { } Settings.propTypes = { - queryData: PropTypes.object.isRequired, - slotProps: PropTypes.object.isRequired, + slotPassthrough: PropTypes.object.isRequired, settings: PropTypes.object.isRequired, canSave: PropTypes.bool.isRequired, onToggleModeration: PropTypes.func.isRequired, diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js index 2058ceaa2..652550a5d 100644 --- a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js +++ b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js @@ -63,11 +63,20 @@ class SettingsContainer extends React.Component { errors, updatePending, } = this.props; + + const slotPassthrough = { + root, + asset, + settings: mergedSettings, + data, + updatePending, + errors, + }; + return ( @@ -33,8 +33,7 @@ class Comment extends React.Component { fill="commentContent" defaultComponent={CommentContent} className={cn(styles.commentBody, 'my-comment-body')} - data={data} - queryData={queryData} + passthrough={slotPassthrough} />
diff --git a/client/coral-embed-stream/src/tabs/profile/components/Profile.js b/client/coral-embed-stream/src/tabs/profile/components/Profile.js index 3b707ebe7..bde624063 100644 --- a/client/coral-embed-stream/src/tabs/profile/components/Profile.js +++ b/client/coral-embed-stream/src/tabs/profile/components/Profile.js @@ -14,36 +14,41 @@ const Profile = ({ root, activeTab, setActiveTab, -}) => ( -
-
-

{username}

- {emailAddress ?

{emailAddress}

: null} +}) => { + const slotPassthrough = { + data, + root, + }; + return ( +
+
+

{username}

+ {emailAddress ?

{emailAddress}

: null} +
+ + + {t('framework.my_comments')} + , + ]} + tabPanes={[ + + + , + ]} + sub + />
- - - {t('framework.my_comments')} - , - ]} - tabPanes={[ - - - , - ]} - sub - /> -
-); + ); +}; Profile.propTypes = { username: PropTypes.string, diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js index dd465fed4..cc1809f6e 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js +++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js @@ -535,12 +535,9 @@ export default class Comment extends React.Component { ); // props that are passed down the slots. - const slotProps = { + const slotPassthrough = { data, depth, - }; - - const queryData = { root, asset, comment, @@ -551,8 +548,7 @@ export default class Comment extends React.Component { @@ -573,8 +569,7 @@ export default class Comment extends React.Component { className={cn(styles.username, 'talk-stream-comment-user-name')} fill="commentAuthorName" defaultComponent={CommentAuthorName} - queryData={queryData} - {...slotProps} + passthrough={slotPassthrough} />
@@ -607,9 +601,10 @@ export default class Comment extends React.Component { fill="commentTimestamp" defaultComponent={CommentTimestamp} className={'talk-stream-comment-published-date'} - created_at={comment.created_at} - queryData={queryData} - {...slotProps} + passthrough={{ + created_at: comment.created_at, + ...slotPassthrough, + }} /> {comment.editing && comment.editing.edited ? ( @@ -624,8 +619,7 @@ export default class Comment extends React.Component { {isActive && @@ -665,9 +659,8 @@ export default class Comment extends React.Component { fill="commentContent" className="talk-stream-comment-content" defaultComponent={CommentContent} - {...slotProps} - queryData={queryData} size={1} + passthrough={slotPassthrough} />
)} @@ -678,8 +671,7 @@ export default class Comment extends React.Component {
@@ -696,9 +688,7 @@ export default class Comment extends React.Component {
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js index 202349370..7150a124d 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js +++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js @@ -43,20 +43,13 @@ export default class DraftArea extends React.Component { charCountEnable, maxCharCount, onChange, - queryData, isReply, + registerHook, + unregisterHook, + root, + comment, } = this.props; - const tASettings = { - value, - placeholder, - id, - onChange, - rows, - disabled, - isReply, - }; - return (
@@ -96,7 +98,8 @@ DraftArea.propTypes = { onChange: PropTypes.func, disabled: PropTypes.bool, rows: PropTypes.number, - queryData: PropTypes.object.isRequired, + root: PropTypes.object.isRequired, + comment: PropTypes.object, registerHook: PropTypes.func, unregisterHook: PropTypes.func, isReply: PropTypes.bool, diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js index adcc4aae8..a2d1475ce 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js +++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js @@ -147,15 +147,14 @@ class Stream extends React.Component { loading, } = this.props; - const slotProps = { data }; - const slotQueryData = { root, asset }; + const slotPassthrough = { data, root, asset }; // `key` of `ExtendableTabPanel` depends on sorting so that we always reset // the state when changing sorting. return (
- +
@@ -243,13 +241,13 @@ class Stream extends React.Component { !changedUsername && !highlightedComment) || keepCommentBox); - const slotProps = { data }; - const slotQueryData = { root, asset }; if (highlightedComment === null) { return {t('stream.comment_not_found')}; } + const slotPassthrough = { data, root, asset }; + return (
{open ? ( @@ -263,11 +261,7 @@ class Stream extends React.Component { content={asset.settings.questionBoxContent} icon={asset.settings.questionBoxIcon} > - + )} {!banned && @@ -304,7 +298,7 @@ class Stream extends React.Component {

{asset.settings.closedMessage}

)} - + {currentUser && ( } diff --git a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js index 47338fc8c..f68c41dda 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js +++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js @@ -42,11 +42,10 @@ class DraftAreaContainer extends React.Component { } render() { - const queryData = { comment: this.props.comment, root: this.props.root }; - return ( - {comment.user.username} + {username} {menuVisible && ( - + )}
); }; + +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; diff --git a/plugins/talk-plugin-author-menu/client/components/Menu.js b/plugins/talk-plugin-author-menu/client/components/Menu.js index e041720eb..6c46fb1c3 100644 --- a/plugins/talk-plugin-author-menu/client/components/Menu.js +++ b/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 (
- +
); } @@ -21,15 +18,20 @@ export default ({ data, root, asset, comment, contentSlot }) => {
); }; + +Menu.propTypes = { + slotPassthrough: PropTypes.object.isRequired, + contentSlot: PropTypes.string, +}; + +export default Menu; diff --git a/plugins/talk-plugin-author-menu/client/containers/AuthorName.js b/plugins/talk-plugin-author-menu/client/containers/AuthorName.js index b06dbf1bb..958610093 100644 --- a/plugins/talk-plugin-author-menu/client/containers/AuthorName.js +++ b/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,41 @@ class AuthorNameContainer extends React.Component { }; render() { + const { + data, + root, + asset, + comment, + contentSlot, + showMenuForComment, + } = this.props; + + const slotPassthrough = { data, root, asset, comment }; + return ( ); } } +AuthorNameContainer.propTypes = { + data: PropTypes.object.isRequired, + 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 }) => ({ diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js index ce4aa7a5c..9b1a63d6a 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Comment.js +++ b/plugins/talk-plugin-featured-comments/client/components/Comment.js @@ -19,7 +19,7 @@ class Comment extends React.Component { render() { const { comment, asset, root, data } = this.props; - const queryData = { comment, asset, root }; + const slotPassthrough = { data, comment, asset, root }; return (
@@ -36,8 +35,7 @@ class Comment extends React.Component { className={cn(styles.username, `${pluginName}-comment-username`)} fill="commentAuthorName" defaultComponent={CommentAuthorName} - queryData={queryData} - data={data} + passthrough={slotPassthrough} inline /> @@ -45,9 +43,7 @@ class Comment extends React.Component { fill="commentTimestamp" defaultComponent={CommentTimestamp} className={cn(styles.timestamp, `${pluginName}-comment-timestamp`)} - created_at={comment.created_at} - data={data} - queryData={queryData} + passthrough={{ created_at: comment.created_at, ...slotPassthrough }} inline />
@@ -62,10 +58,7 @@ class Comment extends React.Component { > diff --git a/plugins/talk-plugin-flag-details/client/components/FlagDetails.js b/plugins/talk-plugin-flag-details/client/components/FlagDetails.js index 607ba48a2..7197c0360 100644 --- a/plugins/talk-plugin-flag-details/client/components/FlagDetails.js +++ b/plugins/talk-plugin-flag-details/client/components/FlagDetails.js @@ -26,7 +26,8 @@ class FlagDetails extends Component { }, {}); const reasons = Object.keys(summaries); - const queryData = { + const slotPassthrough = { + data, root, comment, }; @@ -52,12 +53,11 @@ class FlagDetails extends Component { {more && ( )} diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js index 68abce826..6cf2558c1 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js @@ -22,6 +22,12 @@ export default class ModerationActions extends React.Component { hideMenu, } = this.props; + const slotPassthrough = { + comment, + asset, + data, + }; + return (
diff --git a/plugins/talk-plugin-notifications/client/components/Settings.js b/plugins/talk-plugin-notifications/client/components/Settings.js index 010422491..9fd16bc0d 100644 --- a/plugins/talk-plugin-notifications/client/components/Settings.js +++ b/plugins/talk-plugin-notifications/client/components/Settings.js @@ -29,8 +29,15 @@ class Settings extends React.Component { email, } = this.props; + const slotPassthrough = { + root, + setTurnOffInputFragment, + updateNotificationSettings, + disabled: needEmailVerification, + }; + return ( - +

{t('talk-plugin-notifications.settings_title')}

{needEmailVerification && } @@ -45,11 +52,8 @@ class Settings extends React.Component { - +
); } diff --git a/plugins/talk-plugin-viewing-options/client/components/Category.js b/plugins/talk-plugin-viewing-options/client/components/Category.js index 0fc13d16f..78ce4dae3 100644 --- a/plugins/talk-plugin-viewing-options/client/components/Category.js +++ b/plugins/talk-plugin-viewing-options/client/components/Category.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import styles from './Category.css'; import { Slot } from 'plugin-api/beta/client/components'; @@ -8,7 +9,7 @@ const childFactory = child => ( ); -const ViewingOptions = ({ slot, title, data, asset, root }) => { +const Category = ({ slot, title, slotPassthrough }) => { return (
{title}
@@ -17,11 +18,16 @@ const ViewingOptions = ({ slot, title, data, asset, root }) => { childFactory={childFactory} className={styles.list} component={'ul'} - data={data} - queryData={{ asset, root }} + passthrough={slotPassthrough} />
); }; -export default ViewingOptions; +Category.propTypes = { + slot: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + slotPassthrough: PropTypes.object.isRequired, +}; + +export default Category; diff --git a/plugins/talk-plugin-viewing-options/client/components/Menu.js b/plugins/talk-plugin-viewing-options/client/components/Menu.js index 7ff5ac316..bb44ce775 100644 --- a/plugins/talk-plugin-viewing-options/client/components/Menu.js +++ b/plugins/talk-plugin-viewing-options/client/components/Menu.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import cn from 'classnames'; import styles from './Menu.css'; import { capitalize } from 'plugin-api/beta/client/utils'; @@ -13,16 +14,19 @@ class Menu extends React.Component { }; render() { + const { slotPassthrough } = this.props; return (
{Object.keys(this.categories).map(category => ( ))} @@ -31,4 +35,8 @@ class Menu extends React.Component { } } +Menu.propTypes = { + slotPassthrough: PropTypes.object.isRequired, +}; + export default Menu; diff --git a/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js index 8a0c09f61..40aa96d1e 100644 --- a/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js +++ b/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import cn from 'classnames'; import styles from './ViewingOptions.css'; import { t } from 'plugin-api/beta/client/services'; @@ -24,7 +25,7 @@ class ViewingOptions extends React.Component { }; render() { - const { open, data, root, asset } = this.props; + const { open, slotPassthrough } = this.props; return (
@@ -41,11 +42,18 @@ class ViewingOptions extends React.Component { )}
- {open && } + {open && }
); } } +ViewingOptions.propTypes = { + slotPassthrough: PropTypes.object.isRequired, + open: PropTypes.bool.isRequired, + openMenu: PropTypes.func.isRequired, + closeMenu: PropTypes.func.isRequired, +}; + export default ViewingOptions; diff --git a/plugins/talk-plugin-viewing-options/client/containers/ViewingOptions.js b/plugins/talk-plugin-viewing-options/client/containers/ViewingOptions.js index b30721346..3c1d0d2af 100644 --- a/plugins/talk-plugin-viewing-options/client/containers/ViewingOptions.js +++ b/plugins/talk-plugin-viewing-options/client/containers/ViewingOptions.js @@ -4,6 +4,7 @@ import ViewingOptions from '../components/ViewingOptions'; import { openMenu, closeMenu } from '../actions'; import { compose, gql } from 'react-apollo'; import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils'; +import { mapProps } from 'recompose'; const slots = ['viewingOptionsSort', 'viewingOptionsFilter']; @@ -29,7 +30,17 @@ const withViewingOptionsFragments = withFragments({ const enhance = compose( connect(mapStateToProps, mapDispatchToProps), - withViewingOptionsFragments + withViewingOptionsFragments, + mapProps(({ root, asset, data, open, openMenu, closeMenu }) => ({ + slotPassthrough: { + data, + root, + asset, + }, + open, + openMenu, + closeMenu, + })) ); export default enhance(ViewingOptions);