diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index a3d2a24a9..61e5ab1b9 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -6,7 +6,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
import translations from 'coral-framework/translations';
const lang = new I18n(translations);
-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;
@@ -15,7 +15,7 @@ const {fetchAssetSuccess} = assetActions;
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 {updateCountCache, viewAllComments} from 'coral-framework/actions/asset';
import {notificationActions, authActions, assetActions, pym} from 'coral-framework';
import Stream from './Stream';
@@ -79,7 +79,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);
}
}
@@ -124,6 +124,16 @@ class Embed extends Component {
{lang.t('MY_COMMENTS')}
Configure Stream
+ {
+ highlightedComment &&
+
+ }
{loggedIn && this.props.logout().then(refetch)} changeTab={this.changeTab}/>}
{
@@ -170,9 +180,11 @@ 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} />
+
}
-
-
-
-
- asset.comments.length}
- loadMore={this.props.loadMore}/>
({
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)
});
diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js
index 8ebd403b8..e3350e0d3 100644
--- a/client/coral-embed/src/index.js
+++ b/client/coral-embed/src/index.js
@@ -74,6 +74,15 @@ function configurePymParent(pymParent, asset_url) {
snackbar.style.opacity = 0;
});
+ // remove the permalink comment id from the hash
+ pymParent.onMessage('coral-view-all-comments', function () {
+ window.history.replaceState(
+ {},
+ document.title,
+ location.origin + location.pathname + location.search
+ );
+ });
+
pymParent.onMessage('coral-alert', function (message) {
const [type, text] = message.split('|');
snackbar.style.transform = 'translate(-50%, 20px)';
diff --git a/client/coral-framework/actions/asset.js b/client/coral-framework/actions/asset.js
index 609525986..fa927e58a 100644
--- a/client/coral-framework/actions/asset.js
+++ b/client/coral-framework/actions/asset.js
@@ -1,6 +1,7 @@
import * as actions from '../constants/asset';
import coralApi from '../helpers/response';
import {addNotification} from '../actions/notification';
+import {pym} from 'coral-framework';
import I18n from '../../coral-framework/modules/i18n/i18n';
import translations from './../translations';
@@ -49,3 +50,37 @@ export const updateOpenStatus = status => dispatch => {
dispatch(updateOpenStream({closedAt: new Date().getTime()}));
}
};
+
+function removeParam(key, sourceURL) {
+ let rtn = sourceURL.split('?')[0];
+ let param;
+ let params_arr = [];
+ let queryString = (sourceURL.indexOf('?') !== -1) ? sourceURL.split('?')[1] : '';
+ if (queryString !== '') {
+ params_arr = queryString.split('&');
+ for (let i = params_arr.length - 1; i >= 0; i -= 1) {
+ param = params_arr[i].split('=')[0];
+ if (param === key) {
+ params_arr.splice(i, 1);
+ }
+ }
+ rtn = `${rtn}?${params_arr.join('&')}`;
+ }
+ return rtn;
+}
+
+export const viewAllComments = () => {
+
+ // remove the comment_id url param
+ const modifiedUrl = removeParam('comment_id', location.href);
+ try {
+
+ // "window" here refers to the embedded iframe
+ window.history.replaceState({}, document.title, modifiedUrl);
+
+ // also change the parent url
+ pym.sendMessage('coral-view-all-comments');
+ } catch (e) { /* not sure if we're worried about old browsers */ }
+
+ return {type: actions.VIEW_ALL_COMMENTS};
+};
diff --git a/client/coral-framework/constants/asset.js b/client/coral-framework/constants/asset.js
index 234095d9d..5547c5284 100644
--- a/client/coral-framework/constants/asset.js
+++ b/client/coral-framework/constants/asset.js
@@ -9,3 +9,5 @@ export const UPDATE_ASSET_SETTINGS_FAILURE = 'UPDATE_ASSET_SETTINGS_FAILURE';
export const OPEN_COMMENTS = 'OPEN_COMMENTS';
export const CLOSE_COMMENTS = 'CLOSE_COMMENTS';
export const UPDATE_COUNT_CACHE = 'UPDATE_COUNT_CACHE';
+
+export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS';
diff --git a/client/coral-framework/graphql/queries/index.js b/client/coral-framework/graphql/queries/index.js
index cdf2356d8..a6c8aa17b 100644
--- a/client/coral-framework/graphql/queries/index.js
+++ b/client/coral-framework/graphql/queries/index.js
@@ -20,6 +20,7 @@ function getQueryVariable(variable) {
return null;
}
+// get the counts of the top-level comments
export const getCounts = (data) => ({asset_id, limit, sort}) => {
return data.fetchMore({
query: GET_COUNTS,
@@ -41,6 +42,7 @@ export const getCounts = (data) => ({asset_id, limit, sort}) => {
});
};
+// handle paginated requests for more Comments pertaining to the Asset
export const loadMore = (data) => ({limit, cursor, parent_id = null, asset_id, sort}, newComments) => {
return data.fetchMore({
query: LOAD_MORE,
@@ -94,6 +96,7 @@ export const loadMore = (data) => ({limit, cursor, parent_id = null, asset_id, s
});
};
+// load the comment stream.
export const queryStream = graphql(STREAM_QUERY, {
options: () => {
let comment_id = getQueryVariable('comment_id');