Proper comment-node depth coloring.

4 files changed, 20 insertions, 4 deletions

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 19c83423..db3c589d 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -27,7 +27,7 @@ import {
   pictshareAvatarThumbnail,
   showAvatars,
   setupTippy,
-  randomHsl,
+  colorList,
 } from '../utils';
 import moment from 'moment';
 import { MomentTime } from './moment-time';
@@ -94,7 +94,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     score: this.props.node.comment.score,
     upvotes: this.props.node.comment.upvotes,
     downvotes: this.props.node.comment.downvotes,
-    borderColor: randomHsl(),
+    borderColor: this.props.node.comment.depth
+      ? colorList[this.props.node.comment.depth % colorList.length]
+      : colorList[0],
   };
 
   constructor(props: any, context: any) {
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index faee23ed..e6b4a206 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -311,16 +311,27 @@ export class Post extends Component<any, PostState> {
     }
     let tree: Array<CommentNodeI> = [];
     for (let comment of this.state.comments) {
+      let child = map.get(comment.id);
       if (comment.parent_id) {
-        map.get(comment.parent_id).children.push(map.get(comment.id));
+        let parent_ = map.get(comment.parent_id);
+        parent_.children.push(child);
       } else {
-        tree.push(map.get(comment.id));
+        tree.push(child);
       }
+
+      this.setDepth(child);
     }
 
     return tree;
   }
 
+  setDepth(node: CommentNodeI, i: number = 0): void {
+    for (let child of node.children) {
+      child.comment.depth = i;
+      this.setDepth(child, i + 1);
+    }
+  }
+
   commentsTree() {
     let nodes = this.buildCommentsTree();
     return (
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index 5baadb17..eb58ca11 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -208,6 +208,7 @@ export interface Comment {
   saved?: boolean;
   user_mention_id?: number; // For mention type
   recipient_id?: number;
+  depth?: number;
 }
 
 export interface Category {
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index bdd629c7..058be6ae 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -768,6 +768,8 @@ export function postSort(
   }
 }
 
+export const colorList: Array<string> = [...Array(10)].map(() => randomHsl());
+
 export function randomHsl() {
   return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
 }