Merge branch 'master' into featured-comments

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

@@ -358,7 +358,7 @@ export default class Comment extends React.Component {
         return false;
       });
 
-    const rootClassNames = [
+    const rootClassName = cn(
       'talk-stream-comment-wrapper',
       `talk-stream-comment-wrapper-level-${depth}`,
       styles.root,
@@ -367,28 +367,28 @@ export default class Comment extends React.Component {
         ...conditionalClassNames,
         [styles.enter]: this.state.animateEnter,
       },
-    ];
+    );
+
+    const commentClassName = cn(
+      'talk-stream-comment',
+      `talk-stream-comment-level-${depth}`,
+      styles.comment,
+      styles[`commentLevel${depth}`],
+      {
+        [styles.pendingComment]: isPending,
+        [styles.highlightedComment]: isHighlighted,
+        'talk-stream-pending-comment': isPending,
+        'talk-stream-highlighted-comment': isHighlighted,
+      }
+    );
 
     return (
       <div
-        className={cn(...rootClassNames)}
+        className={rootClassName}
         id={`c_${comment.id}`}
       >
         {!isReply && <hr aria-hidden={true} />}
-        <div
-          className={cn(
-            'talk-stream-comment',
-            `talk-stream-comment-level-${depth}`,
-            styles.comment,
-            styles[`commentLevel${depth}`],
-            {
-              [styles.pendingComment]: isPending,
-              [styles.highlightedComment]: isHighlighted,
-              'talk-stream-pending-comment': isPending,
-              'talk-stream-highlighted-comment': isHighlighted,
-            }
-          )}
-        >
+        <div className={commentClassName}>
           <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
           {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 

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

@@ -21,6 +21,7 @@ import {
   insertCommentIntoEmbedQuery,
   removeCommentFromEmbedQuery,
   insertFetchedCommentsIntoEmbedQuery,
+  nest,
 } from '../graphql/utils';
 
 const {showSignInDialog} = authActions;
@@ -151,18 +152,6 @@ class StreamContainer extends React.Component {
   }
 }
 
-const nest = (def, level) => {
-  let result = '';
-  for (let x = 0; x < level; x++) {
-    if (x === 0) {
-      result += def;
-      continue;
-    }
-    result = result.replace('...nest', def);
-  }
-  return result.replace('...nest', '');
-};
-
 const commentFragment = gql`
   fragment CoralEmbedStream_Stream_comment on Comment {
     id

client/coral-embed-stream/src/graphql/utils.js

@@ -4,13 +4,11 @@ import {THREADING_LEVEL} from '../constants/stream';
 function applyToCommentsOrigin(root, callback) {
   if (root.comment) {
     let comment = root.comment;
-    console.log(comment);
     for (let depth = 0; depth <= THREADING_LEVEL; depth++) {
       let changes = {$apply: (node) => node ? callback(node) : node};
       for (let i = 0; i < depth; i++) {
         changes = {parent: changes};
       }
-      console.log(changes);
       comment = update(comment, changes);
     }
 
@@ -183,3 +181,33 @@ function findAndInsertFetchedComments(parent, comments, parent_id) {
 export function insertFetchedCommentsIntoEmbedQuery(root, comments, parent_id) {
   return applyToCommentsOrigin(root, (origin) => findAndInsertFetchedComments(origin, comments, parent_id));
 }
+
+/**
+ * Nest a string in itself repeatly until `level` has been reached.
+ *
+ * Example:
+ * nest(`
+ *   a
+ *   ...nest
+ *   b
+ * `, 2)
+ *
+ * Output:
+ * `
+ *   a
+ *   a
+ *   b
+ *   b
+ * `
+ */
+export function nest(document, level) {
+  let result = '';
+  for (let x = 0; x < level; x++) {
+    if (x === 0) {
+      result += document;
+      continue;
+    }
+    result = result.replace('...nest', document);
+  }
+  return result.replace('...nest', '');
+}