From 32d23214f16ef382bf7eaa5e7ecbddfe28fb7e4c Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Fri, 20 Jan 2017 16:23:34 -0700
Subject: [PATCH] replies

---
 client/coral-embed-stream/src/Comment.css |  1 +
 client/coral-embed-stream/src/Comment.js  | 12 ++++++++----
 client/coral-embed-stream/src/Stream.js   |  1 +
 3 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 client/coral-embed-stream/src/Comment.css

diff --git a/client/coral-embed-stream/src/Comment.css b/client/coral-embed-stream/src/Comment.css
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/client/coral-embed-stream/src/Comment.css
@@ -0,0 +1 @@
+
diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 0d19d7b30..0e5806e6b 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -15,11 +15,12 @@ import {ReplyBox, ReplyButton} from '../../coral-plugin-replies';
 import FlagComment from '../../coral-plugin-flags/FlagComment';
 import LikeButton from '../../coral-plugin-likes/LikeButton';
 
-const Comment = ({comment, currentUser, asset}) => {
-  console.log('A Comment', comment);
-  console.log('the asset', asset);
+const Comment = ({comment, currentUser, asset, depth}) => {
   return (
-    <div className="comment" id={`c_${comment.id}`}>
+    <div
+      className="comment"
+      id={`c_${comment.id}`}
+      style={{marginLeft: depth * 30}}>
       <hr aria-hidden={true} />
       {/*<AuthorName
         author={comment.user}
@@ -42,8 +43,10 @@ const Comment = ({comment, currentUser, asset}) => {
         <PermalinkButton articleURL={asset.url} commentId={comment.id} />
       </div>
       {
+        comment.replies &&
         comment.replies.map(reply => {
           return <Comment
+            depth={depth + 1}
             asset={asset}
             currentUser={currentUser}
             key={reply.id}
@@ -56,6 +59,7 @@ const Comment = ({comment, currentUser, asset}) => {
 };
 
 Comment.propTypes = {
+  depth: PropTypes.number.isRequired,
   asset: PropTypes.shape({
     id: PropTypes.string,
     title: PropTypes.string,
diff --git a/client/coral-embed-stream/src/Stream.js b/client/coral-embed-stream/src/Stream.js
index 999cfbd94..78a988553 100644
--- a/client/coral-embed-stream/src/Stream.js
+++ b/client/coral-embed-stream/src/Stream.js
@@ -8,6 +8,7 @@ const Stream = ({comments, currentUser, asset}) => {
       {
         comments.map(comment => {
           return <Comment
+            depth={0}
             asset={asset}
             currentUser={currentUser}
             key={comment.id}