diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index 55e5a5d46..fa59cc1db 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -1,24 +1,23 @@ 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} from 'coral-ui'; +import {TabBar, Tab, TabContent, Spinner, Button} 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} from 'coral-framework/actions/asset'; -import {notificationActions, authActions, assetActions, pym, actions} from 'coral-framework'; +import {updateCountCache, viewAllComments} from 'coral-framework/actions/asset'; +import {notificationActions, authActions, assetActions, pym} from 'coral-framework'; import Stream from './Stream'; import InfoBox from 'coral-plugin-infobox/InfoBox'; @@ -33,13 +32,14 @@ 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 Comment from './Comment'; +import HighlightedComment from './Comment'; import LoadMore from './LoadMore'; import NewCount from './NewCount'; class Embed extends Component { state = {activeTab: 0, showSignInDialog: false, activeReplyBox: ''}; + pluginActions = {} changeTab = (tab) => { @@ -70,10 +70,30 @@ 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) + }); } } @@ -81,7 +101,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(`c_${this.props.data.comment.id}`), 0); + setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0); } } @@ -99,6 +119,8 @@ 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; @@ -118,29 +140,24 @@ 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 (