diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index f531d794f..db37efc7a 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/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 (
{!isReply &&
} -
+
{isStaff(comment.tags) ? Staff : null} diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js index f5ce991c0..479605285 100644 --- a/client/coral-embed-stream/src/containers/Stream.js +++ b/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 diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js index 518f4b62f..03d9fe02a 100644 --- a/client/coral-embed-stream/src/graphql/utils.js +++ b/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', ''); +}