diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index 3f3c395f8..016536708 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -41,9 +41,10 @@ class Embed extends Component {
state = {activeTab: 0, showSignInDialog: false, activeReplyBox: ''};
changeTab = (tab) => {
+ const {isAdmin} = this.props.auth;
// Everytime the comes from another tab, the Stream needs to be updated.
- if (tab === 0) {
+ if (tab === 0 && isAdmin) {
this.props.data.refetch();
}
@@ -116,7 +117,7 @@ class Embed extends Component {
render () {
const {activeTab} = this.state;
const {closedAt, countCache = {}} = this.props.asset;
- const {loading, asset, refetch, comment} = this.props.data;
+ const {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
@@ -130,7 +131,7 @@ class Embed extends Component {
minHeight: document.body.scrollHeight + 200
} : {};
- if (loading || !asset) {
+ if (!asset) {
return ;
}
diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js
index e3350e0d3..21c176500 100644
--- a/client/coral-embed/src/index.js
+++ b/client/coral-embed/src/index.js
@@ -1,5 +1,7 @@
import pym from 'pym.js';
+import {stringify} from 'querystring';
+
const snackbarStyles = {
position: 'fixed',
cursor: 'default',
@@ -26,30 +28,21 @@ const Coral = {};
const Talk = Coral.Talk = {};
// build the URL to load in the pym iframe
-function buildStreamIframeUrl(talkBaseUrl, asset_url, comment, asset_id) {
- let iframeArray = [
+function buildStreamIframeUrl(talkBaseUrl, query) {
+ let url = [
talkBaseUrl,
(talkBaseUrl.match(/\/$/) ? '' : '/'), // make sure no double-'/' if opts.talk already ends with '/'
- 'embed/stream?asset_url=',
- encodeURIComponent(asset_url)
- ];
+ 'embed/stream?'
+ ].join('');
- if (comment) {
- iframeArray.push('&comment_id=');
- iframeArray.push(encodeURIComponent(comment));
- }
+ url += stringify(query);
- if (asset_id) {
- iframeArray.push('&asset_id=');
- iframeArray.push(encodeURIComponent(asset_id));
- }
-
- return iframeArray.join('');
+ return url;
}
// Set up postMessage listeners/handlers on the pymParent
// e.g. to resize the iframe, and navigate the host page
-function configurePymParent(pymParent, asset_url) {
+function configurePymParent(pymParent) {
let notificationOffset = 200;
let ready = false;
let cachedHeight;
@@ -117,8 +110,8 @@ function configurePymParent(pymParent, asset_url) {
if (ready) {
window.clearInterval(interval);
- // @todo - It's weird to me that this is sent here in addition to the iframe URL. Could it just be in one place?
- pymParent.sendMessage('DOMContentLoaded', asset_url);
+ // TODO: It's weird to me that this is sent here
+ pymParent.sendMessage('DOMContentLoaded');
}
}, 100);
});
@@ -166,42 +159,37 @@ Talk.render = function (el, opts) {
}
opts = opts || {};
- // @todo infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
+ // TODO: infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
if (!opts.talk) {
throw new Error('Coral.Talk.render() expects opts.talk as the Talk Base URL');
}
- // ensure el has an id, as pym can't directly accept the HTMLElement
+ // Ensure el has an id, as pym can't directly accept the HTMLElement.
if (!el.id) {
el.id = `_${Math.random()}`;
}
- let asset_url = opts.asset_url;
- if (!asset_url) {
+ // Compose the query to send down to the Talk API so it knows what to load.
+ let query = {};
+
+ query.comment_id = window.location.hash.slice(1);
+ query.asset_id = opts.asset_id;
+
+ query.asset_url = opts.asset_url;
+ if (!query.asset_url) {
try {
- asset_url = document.querySelector('link[rel="canonical"]').href;
+ query.asset_url = document.querySelector('link[rel="canonical"]').href;
} catch (e) {
console.warn('This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.');
- asset_url = window.location.origin + window.location.pathname;
+ query.asset_url = window.location.origin + window.location.pathname;
}
}
- let comment = window.location.hash.slice(1);
-
- let query = {
+ configurePymParent(new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, query), {
title: opts.title,
- asset_url: asset_url,
id: `${el.id}_iframe`,
name: `${el.id}_iframe`
- };
-
- if (opts.asset_id && opts.asset_id.length > 0) {
- query.asset_id = opts.asset_id;
- }
-
- let pymParent = new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, asset_url, comment), query);
-
- configurePymParent(pymParent, asset_url);
+ }));
};
export default Coral;
diff --git a/client/coral-framework/graphql/queries/streamQuery.graphql b/client/coral-framework/graphql/queries/streamQuery.graphql
index c9f9d3d5b..102c656e5 100644
--- a/client/coral-framework/graphql/queries/streamQuery.graphql
+++ b/client/coral-framework/graphql/queries/streamQuery.graphql
@@ -1,6 +1,6 @@
#import "../fragments/commentView.graphql"
-query AssetQuery($asset_id: ID, $asset_url: String!, $comment_id: ID!, $has_comment: Boolean!) {
+query AssetQuery($asset_id: ID, $asset_url: String, $comment_id: ID!, $has_comment: Boolean!) {
# the comment here is for loading one comment and it's children, probably after following a permalink
# $has_comment is derived from the comment_id query param in the iframe url,
# which is in turn pulled from the host page url
diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js
index 6f4151ff6..32e2e4263 100644
--- a/graph/resolvers/root_query.js
+++ b/graph/resolvers/root_query.js
@@ -8,11 +8,6 @@ const RootQuery = {
},
asset(_, query, {loaders: {Assets}}) {
if (query.id) {
-
- // TODO: we may not always have a comment stream here, therefore, when we
- // load it, we may also need to create with the url. This may also have to
- // move the logic over to the mutators function as an upsert operation
- // possibly.
return Assets.getByID.load(query.id);
}
diff --git a/routes/assets/index.js b/routes/assets/index.js
index e8c508b52..54d4e72ed 100644
--- a/routes/assets/index.js
+++ b/routes/assets/index.js
@@ -14,6 +14,7 @@ router.get('/id/:asset_id', (req, res, next) => {
}
res.render('article', {
title: asset.title,
+ asset_id: asset.id,
asset_url: asset.url,
body: '',
basePath: '/client/embed/stream'
@@ -26,6 +27,7 @@ router.get('/title/:asset_title', (req, res) => {
return res.render('article', {
title: req.params.asset_title.split('-').join(' '),
asset_url: '',
+ asset_id: null,
body: body,
basePath: '/client/embed/stream'
});
diff --git a/routes/index.js b/routes/index.js
index 9e38097f9..448bd6964 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -18,6 +18,7 @@ if (process.env.NODE_ENV !== 'production') {
return res.render('article', {
title: 'Coral Talk',
asset_url: '',
+ asset_id: '',
body: '',
basePath: '/client/embed/stream'
});
diff --git a/views/article.ejs b/views/article.ejs
index 5f90cdf4d..e20f91117 100644
--- a/views/article.ejs
+++ b/views/article.ejs
@@ -27,7 +27,8 @@
diff --git a/views/embed-stream.ejs b/views/embed-stream.ejs
deleted file mode 100644
index c69773bcb..000000000
--- a/views/embed-stream.ejs
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-