diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index fa59cc1db..55e5a5d46 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -1,23 +1,24 @@ import React, {Component} from 'react'; import {compose} from 'react-apollo'; +import {bindActionCreators} from 'redux'; import {connect} from 'react-redux'; import isEqual from 'lodash/isEqual'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from 'coral-framework/translations'; const lang = new I18n(translations); +import {queriesAndMutators as pluginQueriesAndMutators} from 'coral-framework/helpers/plugins'; -import {TabBar, Tab, TabContent, Spinner, Button} from 'coral-ui'; +import {TabBar, Tab, TabContent, Spinner} from 'coral-ui'; const {logout, showSignInDialog, requestConfirmEmail} = authActions; const {addNotification, clearNotification} = notificationActions; const {fetchAssetSuccess} = assetActions; -import {NEW_COMMENT_COUNT_POLL_INTERVAL} from 'coral-framework/constants/comments'; import {queryStream} from 'coral-framework/graphql/queries'; import {postComment, postFlag, postLike, postDontAgree, deleteAction, addCommentTag, removeCommentTag} from 'coral-framework/graphql/mutations'; import {editName} from 'coral-framework/actions/user'; -import {updateCountCache, viewAllComments} from 'coral-framework/actions/asset'; -import {notificationActions, authActions, assetActions, pym} from 'coral-framework'; +import {updateCountCache} from 'coral-framework/actions/asset'; +import {notificationActions, authActions, assetActions, pym, actions} from 'coral-framework'; import Stream from './Stream'; import InfoBox from 'coral-plugin-infobox/InfoBox'; @@ -32,14 +33,13 @@ import ChangeUsernameContainer from '../../coral-sign-in/containers/ChangeUserna import ProfileContainer from 'coral-settings/containers/ProfileContainer'; import RestrictedContent from 'coral-framework/components/RestrictedContent'; import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer'; -import HighlightedComment from './Comment'; +import Comment from './Comment'; import LoadMore from './LoadMore'; import NewCount from './NewCount'; class Embed extends Component { state = {activeTab: 0, showSignInDialog: false, activeReplyBox: ''}; - pluginActions = {} changeTab = (tab) => { @@ -70,30 +70,10 @@ class Embed extends Component { pym.sendMessage('childReady'); } - componentWillUnmount () { - clearInterval(this.state.countPoll); - } - componentWillReceiveProps (nextProps) { const {loadAsset} = this.props; if(!isEqual(nextProps.data.asset, this.props.data.asset)) { loadAsset(nextProps.data.asset); - - const {getCounts, updateCountCache} = this.props; - const {asset} = nextProps.data; - - updateCountCache(asset.id, asset.commentCount); - - this.setState({ - countPoll: setInterval(() => { - const {asset} = this.props.data; - getCounts({ - asset_id: asset.id, - limit: asset.comments.length, - sort: 'REVERSE_CHRONOLOGICAL' - }); - }, NEW_COMMENT_COUNT_POLL_INTERVAL) - }); } } @@ -101,7 +81,7 @@ class Embed extends Component { if(!isEqual(prevProps.data.comment, this.props.data.comment)) { // Scroll to a permalinked comment if one is in the URL once the page is done rendering. - setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0); + setTimeout(()=>pym.scrollParentToChildEl(`c_${this.props.data.comment.id}`), 0); } } @@ -119,8 +99,6 @@ class Embed extends Component { const {closedAt, countCache = {}} = this.props.asset; const {loading, asset, refetch, comment} = this.props.data; const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth; - - // even though the permalinked comment is the highlighted one, we're displaying its parent + replies const highlightedComment = comment && comment.parent ? comment.parent : comment; const openStream = closedAt === null; @@ -140,24 +118,29 @@ class Embed extends Component { ? asset.comments[0].created_at : new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString(); + /** + * Plugins Section + * + */ + const {dispatch, state, ...currentProps} = this.props; + const {pluginActions} = actions; + let boundActionCreators = bindActionCreators(pluginActions, dispatch); + + const pluginProps = { + state, + context: currentProps, + actions: boundActionCreators + }; + return (
+ {/* */} {lang.t('MY_COMMENTS')} Configure Stream - { - highlightedComment && - - } {loggedIn && this.props.logout().then(refetch)} changeTab={this.changeTab}/>} { @@ -204,11 +187,9 @@ class Embed extends Component { offset={signInOffset}/>} {loggedIn && user && } {loggedIn && } - - {/* the highlightedComment is isolated after the user followed a permalink */} { - highlightedComment - ? }
asset.comments.length} loadMore={this.props.loadMore}/> - comment={highlightedComment} /> - :
- -
- -
- asset.comments.length} - loadMore={this.props.loadMore} /> -
- } ({ - auth: state.auth.toJS(), - userData: state.user.toJS(), - asset: state.asset.toJS() -}); +const mapStateToProps = (state) => Object + .keys(state) + .reduce((entry, key) => { + if (key !== 'apollo') { + entry.state[key] = state[key].toJS(); + } + return entry; + }, { + auth: state.auth.toJS(), + userData: state.user.toJS(), + asset: state.asset.toJS(), + state: {} + }); const mapDispatchToProps = dispatch => ({ requestConfirmEmail: () => dispatch(requestConfirmEmail()), @@ -338,7 +292,6 @@ const mapDispatchToProps = dispatch => ({ editName: (username) => dispatch(editName(username)), showSignInDialog: (offset) => dispatch(showSignInDialog(offset)), updateCountCache: (id, count) => dispatch(updateCountCache(id, count)), - viewAllComments: () => dispatch(viewAllComments()), logout: () => dispatch(logout()), dispatch: d => dispatch(d) }); @@ -352,5 +305,6 @@ export default compose( addCommentTag, removeCommentTag, deleteAction, - queryStream + queryStream, + ...pluginQueriesAndMutators, )(Embed);