load more replies on a permalinked comment

client/coral-framework/graphql/queries/index.js

@@ -5,6 +5,7 @@ import GET_COUNTS from './getCounts.graphql';
 import MY_COMMENT_HISTORY from './myCommentHistory.graphql';
 import uniqBy from 'lodash/uniqBy';
 import sortBy from 'lodash/sortBy';
+import isNil from 'lodash/isNil';
 
 function getQueryVariable(variable) {
   let query = window.location.search.substring(1);
@@ -47,19 +48,43 @@ export const loadMore = (data) => ({limit, cursor, parent_id = null, asset_id, s
   return data.fetchMore({
     query: LOAD_MORE,
     variables: {
-      limit,
-      cursor,
-      parent_id,
-      asset_id,
-      sort
+      limit, // how many comments are we returning
+      cursor, // the date of the first/last comment depending on the sort order
+      parent_id, // if null, we're loading more top-level comments, if not, we're loading more replies to a comment
+      asset_id, // the id of the asset we're currently on
+      sort // CHRONOLOGICAL or REVERSE_CHRONOLOGICAL
     },
     updateQuery: (oldData, {fetchMoreResult:{data:{new_top_level_comments}}}) => {
 
       let updatedAsset;
 
-      if (parent_id) {
+      if (!isNil(oldData.comment)) { // loaded replies on a highlighted (permalinked) comment
+
+        let comment = {};
+        if (oldData.comment && oldData.comment.parent) {
+
+          // put comments (replies) onto the oldData.comment.parent object
+          // the initial comment permalinked was a reply
+          const uniqReplies = uniqBy([...new_top_level_comments, ...oldData.comment.parent.replies], 'id');
+          comment.parent = {...oldData.comment.parent, replies: sortBy(uniqReplies, 'created_at')};
+        } else if (oldData.comment) {
+
+          // put the comments (replies) directly onto oldData.comment
+          // the initial comment permalinked was a top-level comment
+          const uniqReplies = uniqBy([...new_top_level_comments, ...oldData.comment.replies], 'id');
+          comment.replies = sortBy(uniqReplies, 'created_at');
+        }
+
+        updatedAsset = {
+          ...oldData,
+          comment: {
+            ...oldData.comment,
+            ...comment
+          }
+        };
+
+      } else if (parent_id) { // If loading more replies
 
-        // If loading more replies
         updatedAsset = {
           ...oldData,
           asset: {
@@ -78,9 +103,8 @@ export const loadMore = (data) => ({limit, cursor, parent_id = null, asset_id, s
             })
           }
         };
-      } else {
+      } else { // If loading more top-level comments
 
-        // If loading more top-level comments
         updatedAsset = {
           ...oldData,
           asset: {
@@ -99,6 +123,8 @@ export const loadMore = (data) => ({limit, cursor, parent_id = null, asset_id, s
 // load the comment stream.
 export const queryStream = graphql(STREAM_QUERY, {
   options: () => {
+
+    // where the query string is from the embeded iframe url
     let comment_id = getQueryVariable('comment_id');
     let has_comment = comment_id != null;
 

client/coral-framework/graphql/queries/streamQuery.graphql

@@ -1,8 +1,15 @@
 #import "../fragments/commentView.graphql"
 
 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
     comment(id: $comment_id) @include(if: $has_comment) {
       ...commentView
+      replyCount
+      replies {
+        ...commentView
+      }
       parent {
         ...commentView
         replyCount