From d903ecb6d3fbba7af00f2bd52fb405c6f4a8fa3b Mon Sep 17 00:00:00 2001
From: Dessalines <happydooby@gmail.com>
Date: Thu, 5 Mar 2020 15:10:46 -0500
Subject: [PATCH] Proper comment-node depth coloring.

---
 ui/src/components/comment-node.tsx |  6 ++++--
 ui/src/components/post.tsx         | 15 +++++++++++++--
 ui/src/interfaces.ts               |  1 +
 ui/src/utils.ts                    |  2 ++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 19c834237..db3c589d1 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 faee23ed0..e6b4a206d 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 5baadb170..eb58ca116 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 bdd629c77..058be6ae3 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)`;
 }