Merge pull request #729 from coralproject/permalink-id

Permalink by Query Param instead of Hash

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -168,7 +168,7 @@ class Comment extends React.Component {
                 {' '}
                 <a
                   className={styles.external}
-                  href={`${comment.asset.url}#${comment.id}`}
+                  href={`${comment.asset.url}?commentId=${comment.id}`}
                   target="_blank"
                 >
                   <Icon name="open_in_new" /> {t('comment.view_context')}

client/coral-embed-stream/src/components/Stream.js

@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react';
 import LoadMore from './LoadMore';
+import {StreamError} from './StreamError';
 import Comment from '../components/Comment';
 import SuspendedAccount from './SuspendedAccount';
 import Slot from 'coral-framework/components/Slot';
@@ -163,6 +164,7 @@ class Stream extends React.Component {
       pluginProps,
       editName
     } = this.props;
+
     const {keepCommentBox} = this.state;
     const view = this.getVisibleComments();
     const open = asset.closedAt === null;
@@ -187,6 +189,12 @@ class Stream extends React.Component {
     };
 
     const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
+
+    if (!comment && !comments) { 
+      console.error('Talk: No comments came back from the graph given that query. Please, check the query params.'); 
+      return <StreamError />;
+    }
+
     return (
       <div id="stream">
 

client/coral-embed-stream/src/components/StreamError.css

@@ -0,0 +1,3 @@
+.streamError {
+  padding: 10px 0;
+}

client/coral-embed-stream/src/components/StreamError.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './StreamError.css';
+import t from 'coral-framework/services/i18n';
+
+export const StreamError = () => (
+  <div className={styles.streamError}>
+    {t('common.error')}
+  </div>
+);

client/coral-embed/src/index.js

@@ -1,4 +1,5 @@
 import pym from 'pym.js';
+import URLSearchParams from 'url-search-params';
 
 import {stringify} from 'querystring';
 
@@ -190,7 +191,10 @@ Talk.render = function(el, opts) {
   // 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);
+  let urlParams = new URLSearchParams(window.location.search);
+
+  query.comment_id = urlParams.get('commentId');
+
   query.asset_id = opts.asset_id;
 
   query.asset_url = opts.asset_url;

client/coral-plugin-flags/index.js

@@ -1 +1 @@
-export {default as FlagComment} from './components/FlagComment';
+export {default as FlagComment} from './components/FlagComment';

client/coral-plugin-history/Comment.js

@@ -29,7 +29,7 @@ const Comment = (props) => {
       <div className={styles.sidebar}>
         <ul>
           <li>
-            <a onClick={props.link(`${props.asset.url}#${props.comment.id}`)}>
+            <a onClick={props.link(`${props.asset.url}?commentId=${props.comment.id}`)}>
               <Icon name="open_in_new" />{t('view_conversation')}
             </a>
           </li>

locales/en.yml

@@ -40,6 +40,7 @@ en:
   comment_post_notif_premod: "Thank you for posting. Our moderation team will review your comment shortly."
   common:
     copy: 'Copy'
+    error: 'An error has occurred.'
   community:
     account_creation_date: "Account Creation Date"
     active: Active

locales/es.yml

@@ -40,6 +40,7 @@ es:
   comment_post_notif_premod: "Gracias por el comentario. Nuestro equipo de moderación va a revisarlo muy pronto."
   common:
     copy: 'Copiar'
+    error: 'Ha ocurrido un error.'
   community:
     account_creation_date: "Fecha de creación de la cuenta"
     active: Activa

package.json

@@ -123,6 +123,7 @@
     "snake-case": "^2.1.0",
     "subscriptions-transport-ws": "^0.7.2",
     "timekeeper": "^1.0.0",
+    "url-search-params": "^0.9.0",
     "uuid": "^3.0.1",
     "yaml-loader": "^0.4.0",
     "yamljs": "^0.2.10"

plugins/talk-plugin-permalink/client/components/PermalinkButton.js

@@ -83,7 +83,7 @@ export default class PermalinkButton extends React.Component {
               className={cn(styles.input, `${name}-copy-field`)}
               type='text'
               ref={(input) => this.permalinkInput = input}
-              defaultValue={`${asset.url}#${this.props.commentId}`}
+              defaultValue={`${asset.url}?commentId=${this.props.commentId}`}
             />
 
             <Button