Improved Comment URL Handling (#1860)

* feat: replaces PR 1819

- fixes #1851

* fix: set query using new syntax

* review: fixes for missed framework changes

* fix: linting

client/coral-admin/src/actions/community.js

@@ -1,4 +1,4 @@
-import queryString from 'query-string';
+import queryString from 'querystringify';
 
 import {
   FETCH_USERS_REQUEST,

client/coral-admin/src/actions/stories.js

@@ -1,4 +1,4 @@
-import queryString from 'query-string';
+import queryString from 'querystringify';
 
 import {
   FETCH_ASSETS_REQUEST,

client/coral-admin/src/components/UserDetailComment.js

@@ -13,6 +13,8 @@ import CommentLabels from '../containers/CommentLabels';
 import ApproveButton from './ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
 import CommentDeletedTombstone from './CommentDeletedTombstone';
+
+import { buildCommentURL } from 'coral-framework/utils/url';
 import TimeAgo from 'coral-framework/components/TimeAgo';
 import t from 'coral-framework/services/i18n';
 
@@ -110,7 +112,7 @@ class UserDetailComment extends React.Component {
                 />
                 <a
                   className={styles.external}
-                  href={`${comment.asset.url}?commentId=${comment.id}`}
+                  href={buildCommentURL(comment.asset.url, comment.id)}
                   target="_blank"
                   rel="noopener noreferrer"
                 >

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

@@ -16,6 +16,7 @@ import RejectButton from 'coral-admin/src/components/RejectButton';
 import CommentDeletedTombstone from '../../../components/CommentDeletedTombstone';
 import TimeAgo from 'coral-framework/components/TimeAgo';
 
+import { buildCommentURL } from 'coral-framework/utils/url';
 import t from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
@@ -170,7 +171,7 @@ class Comment extends React.Component {
                 <div className={styles.commentContentFooter}>
                   <a
                     className={styles.external}
-                    href={`${comment.asset.url}?commentId=${comment.id}`}
+                    href={buildCommentURL(comment.asset.url, comment.id)}
                     target="_blank"
                     rel="noopener noreferrer"
                   >

client/coral-embed-stream/src/actions/stream.js

@@ -1,6 +1,6 @@
 import * as actions from '../constants/stream';
 import { buildUrl } from 'coral-framework/utils/url';
-import queryString from 'query-string';
+import queryString from 'querystringify';
 
 export const setActiveReplyBox = id => ({
   type: actions.SET_ACTIVE_REPLY_BOX,
@@ -14,12 +14,13 @@ export const setSort = ({ sortOrder, sortBy }) => ({
 });
 
 export const viewAllComments = () => (dispatch, _, { pym }) => {
-  const search = queryString.stringify({
-    ...queryString.parse(location.search),
-    comment_id: undefined,
-  });
+  const query = queryString.parse(location.search);
 
   // remove the comment_id url param
+  delete query.comment_id;
+
+  const search = queryString.stringify(query);
+
   const url = buildUrl({ ...location, search });
 
   try {

client/coral-embed-stream/src/tabs/profile/components/Comment.js

@@ -9,6 +9,7 @@ import cn from 'classnames';
 import { getTotalReactionsCount } from 'coral-framework/utils';
 
 import t from 'coral-framework/services/i18n';
+import { buildCommentURL } from 'coral-framework/utils/url';
 
 class Comment extends React.Component {
   render() {
@@ -79,9 +80,10 @@ class Comment extends React.Component {
             <li>
               <a
                 className={styles.viewLink}
-                href={`${this.props.comment.asset.url}?commentId=${
+                href={buildCommentURL(
+                  this.props.comment.asset.url,
                   this.props.comment.id
-                }`}
+                )}
                 target="_parent"
               >
                 <Icon name="open_in_new" className={styles.iconView} />

client/coral-embed/src/Stream.js

@@ -1,4 +1,4 @@
-import queryString from 'query-string';
+import queryString from 'querystringify';
 import pym from 'pym.js';
 import EventEmitter from 'eventemitter2';
 import { buildUrl } from 'coral-framework/utils/url';
@@ -94,12 +94,13 @@ export default class Stream {
 
     // Remove the permalink comment id from the hash.
     this.pym.onMessage('coral-view-all-comments', () => {
-      const search = queryString.stringify({
-        ...queryString.parse(location.search),
-        commentId: undefined,
-      });
+      const query = queryString.parse(location.search);
 
       // Remove the commentId url param.
+      delete query.commentId;
+
+      const search = queryString.stringify(query);
+
       const url = buildUrl({ ...location, search });
 
       // Change the url.

client/coral-framework/constants/url.js

@@ -1,7 +1,7 @@
-import url from 'url';
+import parse from 'url-parse';
 
 const base = document.querySelector('base');
-const baseUrl = (base && url.parse(base.href)) || {};
+const baseUrl = (base && parse(base.href)) || {};
 
 export const BASE_URL = base.href;
 export const BASE_PATH = baseUrl.pathname;

client/coral-framework/utils/index.js

@@ -6,6 +6,7 @@ import { capitalize } from 'coral-framework/helpers/strings';
 import assignWith from 'lodash/assignWith';
 import mapValues from 'lodash/mapValues';
 export * from 'coral-framework/helpers/strings';
+export * from './url';
 
 export const getTotalActionCount = (type, comment) => {
   return comment.action_summaries

client/coral-framework/utils/url.js

@@ -1,3 +1,5 @@
+import parse from 'url-parse';
+
 export function buildUrl(
   { protocol, hostname, port, pathname, search, hash } = window.location
 ) {
@@ -10,3 +12,10 @@ export function buildUrl(
     port ? `:${port}` : ''
   }${pathname}${search}${hash}`;
 }
+
+export function buildCommentURL(assetURL, commentID) {
+  const u = parse(assetURL, true);
+  u.query.commentId = commentID;
+  u.set('query', u.query);
+  return u.href;
+}