From 9e7ff7d68d2cf43e603bcfb82bfe8b156ab47c23 Mon Sep 17 00:00:00 2001
From: Jimmy <jyng02@gmail.com>
Date: Wed, 29 Jan 2020 13:47:43 -0800
Subject: [PATCH] moving comment box into comments.js and user comment into
 comment-item.js

---
 .../src/js/components/lib/comment-item.js     | 18 ++++++++++-
 .../publish/src/js/components/lib/comments.js | 10 ++++++-
 .../publish/src/js/components/lib/note.js     | 30 +------------------
 3 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/pkg/interface/publish/src/js/components/lib/comment-item.js b/pkg/interface/publish/src/js/components/lib/comment-item.js
index d790a31ce..e10430b23 100644
--- a/pkg/interface/publish/src/js/components/lib/comment-item.js
+++ b/pkg/interface/publish/src/js/components/lib/comment-item.js
@@ -5,7 +5,23 @@ export class CommentItem extends Component {
   render() {
     return (
       <div>
-        
+        <div className="flex mv3">
+          <div className="f9 mono mr2">~fabled-faster</div>
+          <div className="f9 gray3">12m ago</div>
+        </div>
+        <div className="f8 lh-solid mb8">
+          <p className="mb2">
+            Wow, impressive results! Already a few examples in the comments of what bad actors could do this tech. I wanted to share an example of something good.
+          </p>
+
+          <p className="mb2">
+            I lost my dad about 6 years ago after a Stage 4 cancer diagnosis and a 3 month rapid diagnosis. I have some, but not a lot of video content of him from over the years. My mom still misses him terribly so for her 60th birthday I tried to splice together an audio message and greeting from her saying what I thought he would have said.
+          </p>
+          <p className="mb2">
+          The work was rough and nowhere near what this Google project could produce. She listens to that poor facsimile every year for her birthday. It's therapeutic for her. With some limits for her mental health of course, I'm sure she would love to hear my dad again with this level of fidelity.
+          And so would I.
+          </p>
+        </div>
       </div>
     )
   }
diff --git a/pkg/interface/publish/src/js/components/lib/comments.js b/pkg/interface/publish/src/js/components/lib/comments.js
index 7ae1b6e25..c9d063f42 100644
--- a/pkg/interface/publish/src/js/components/lib/comments.js
+++ b/pkg/interface/publish/src/js/components/lib/comments.js
@@ -6,7 +6,15 @@ export class Comments extends Component {
   render() {
     return (
       <div>
-        
+        <form class="mt8">
+          <div>
+            <textarea style={{resize:'vertical'}} id="comment" name="comment" placeHolder="Leave a comment here" class="f9 db border-box w-100 ba b--gray3 pt3 ph3 pb8 br1 mb2" aria-describedby="comment-desc"></textarea>
+          </div>
+          <button className="f9 pa2 bg-white br1 ba b--gray2 gray2">
+            Add comment
+          </button>
+        </form>
+        <CommentItem/>
       </div>
     )
   }
diff --git a/pkg/interface/publish/src/js/components/lib/note.js b/pkg/interface/publish/src/js/components/lib/note.js
index b84ac2e5e..c7e958c71 100644
--- a/pkg/interface/publish/src/js/components/lib/note.js
+++ b/pkg/interface/publish/src/js/components/lib/note.js
@@ -35,35 +35,7 @@ export class Note extends Component {
               <div className="f9 gray2">6d ago</div>
               </div>
             </div>
-
-            <form class="mt8">
-              <div>
-                <textarea style={{resize:'vertical'}} id="comment" name="comment" placeHolder="Leave a comment here" class="f9 db border-box w-100 ba b--gray3 pt3 ph3 pb8 br1 mb2" aria-describedby="comment-desc"></textarea>
-              </div>
-              <button className="f9 pa2 bg-white br1 ba b--gray2 gray2">
-                Add comment
-              </button>
-            </form>
-            <div>
-              <div className="flex mv3">
-                <div className="f9 mono mr2">~fabled-faster</div>
-                <div className="f9 gray3">12m ago</div>
-              </div>
-              <div className="f8 lh-solid mb8">
-              <p className="mb2">
-                Wow, impressive results! Already a few examples in the comments of what bad actors could do this tech. I wanted to share an example of something good.
-              </p>
-
-              <p className="mb2">
-                I lost my dad about 6 years ago after a Stage 4 cancer diagnosis and a 3 month rapid diagnosis. I have some, but not a lot of video content of him from over the years. My mom still misses him terribly so for her 60th birthday I tried to splice together an audio message and greeting from her saying what I thought he would have said.
-              </p>
-              <p className="mb2">
-              The work was rough and nowhere near what this Google project could produce. She listens to that poor facsimile every year for her birthday. It's therapeutic for her. With some limits for her mental health of course, I'm sure she would love to hear my dad again with this level of fidelity.
-              And so would I.
-              </p>
-              </div>
-            </div>
-
+            <Comments/>
           </div>
         </div>
       </div>