From 90d2f365c119e71e1098e0ac82750ca9591f3da5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Tue, 21 May 2019 16:15:37 -0500
Subject: [PATCH] Optimizing

---
 package.json                            |  3 +-
 src/ui/component/commentCreate/view.jsx |  7 ++-
 src/ui/component/commentsList/view.jsx  | 69 +++++++++++++------------
 src/ui/scss/all.scss                    |  1 +
 src/ui/scss/component/_comments.scss    | 20 +++++++
 5 files changed, 64 insertions(+), 36 deletions(-)
 create mode 100644 src/ui/scss/component/_comments.scss

diff --git a/package.json b/package.json
index c3167a0bd..65d1c29f4 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,8 @@
     "electron-log": "^2.2.12",
     "electron-updater": "^4.0.6",
     "express": "^4.16.4",
-    "keytar": "^4.4.1"
+    "keytar": "^4.4.1",
+    "tiny-relative-date": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
diff --git a/src/ui/component/commentCreate/view.jsx b/src/ui/component/commentCreate/view.jsx
index 61230a46f..78891b7da 100644
--- a/src/ui/component/commentCreate/view.jsx
+++ b/src/ui/component/commentCreate/view.jsx
@@ -33,11 +33,14 @@ class CommentCreate extends React.PureComponent<Props> {
   }
 
   handleSubmit() {
-    const { createComment, claim, channelUri } = this.props;
-    console.log('claim', claim)
+    // const { createComment, claim, channelUri } = this.props;
+    const { channelUri, claim } = this.props; // eslint-disable-line react/prop-types
+    console.log('claim', claim);
+
     const { claim_id: claimId } = claim;
     const { message } = this.state;
     let cmt = { message, channelId: parseURI(channelUri).claimId, claimId };
+
     console.log('CMT', cmt);
     console.log('PURI', claimId);
     console.log('PURI', parseURI(channelUri));
diff --git a/src/ui/component/commentsList/view.jsx b/src/ui/component/commentsList/view.jsx
index 4d7763085..6378e464c 100644
--- a/src/ui/component/commentsList/view.jsx
+++ b/src/ui/component/commentsList/view.jsx
@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import relativeDate from 'tiny-relative-date';
 
 type CommentListProps = {
   comments: {},
@@ -20,34 +21,35 @@ class CommentList extends React.PureComponent<CommentListProps> {
   componentDidMount() {
     this.fetchComments(this.props);
   }
+
   fetchComments = (props: Props) => {
     const { fetchList, uri } = props;
     fetchList(uri);
   };
+
   render() {
     const { comments } = this.props;
+
     if (!comments) {
       return null;
     }
+
     return (
-      <div>
-        <ul>
-          {comments['comments'].map(comment => {
-            console.log(comment.message);
-            return (
-              <li key={comment.author + comment.comment_id}>
-                <Comment
-                  commentId={comment.comment_id}
-                  claimId={comment.claim_id}
-                  author={comment.author}
-                  message={comment.message}
-                  timePosted={comment.time_posted}
-                />
-              </li>
-            );
-          })}
-        </ul>
-      </div>
+      <ul className="comments">
+        {comments['comments'].map(comment => {
+          console.log(comment.message);
+          return (
+            <Comment
+              author={comment.author}
+              claimId={comment.claim_id}
+              commentId={comment.comment_id}
+              key={comment.author + comment.comment_id}
+              message={comment.message}
+              timePosted={comment.time_posted}
+            />
+          );
+        })}
+      </ul>
     );
   }
 }
@@ -55,22 +57,23 @@ class CommentList extends React.PureComponent<CommentListProps> {
 class Comment extends React.PureComponent<CommentProps> {
   render() {
     return (
-      <span className="button button--no-style navigation__link card__message">
-        <div className="media__info-text">
-          <div className="card__actions--between">
-            <div>Author: {this.props.author}</div>
-            <div>Date: {this.props.timePosted}</div>
-          </div>
-          <div className="media__subtitle__channel">Message: {this.props.message}</div>
-          <div className="card__actions--between">
-            <button className={'button button--primary'}>Reply</button>
-            <div>
-              <button className={'button button--primary'}>Up</button>
-              <button className={'button button--primary'}>Down</button>
-            </div>
-          </div>
+      <li className="comment">
+        <div className="comment__meta card__actions--between">
+          <div>{this.props.author}</div>
+          <time datatime={this.props.timePosted}>{relativeDate(this.props.timePosted)}</time>
         </div>
-      </span>
+
+        <div className="comment__content">{this.props.message}</div>
+
+        <div className="comment__actions card__actions--between">
+          <button className={'button button--primary'}>Reply</button>
+
+          <span>
+            <button className="comment__action button button--secondary">Up</button>
+            <button className="comment__action button button--secondary">Down</button>
+          </span>
+        </div>
+      </li>
     );
   }
 }
diff --git a/src/ui/scss/all.scss b/src/ui/scss/all.scss
index b14ebd8d8..be0187dfa 100644
--- a/src/ui/scss/all.scss
+++ b/src/ui/scss/all.scss
@@ -13,6 +13,7 @@
 @import 'component/button';
 @import 'component/card';
 @import 'component/channel';
+@import 'component/comments';
 @import 'component/content';
 @import 'component/credit';
 @import 'component/dat-gui';
diff --git a/src/ui/scss/component/_comments.scss b/src/ui/scss/component/_comments.scss
new file mode 100644
index 000000000..7aba0c141
--- /dev/null
+++ b/src/ui/scss/component/_comments.scss
@@ -0,0 +1,20 @@
+.comments {
+}
+
+.comment {
+  padding-bottom: var(--spacing-vertical-large);
+
+  &:not(:first-of-type) {
+    padding-top: var(--spacing-vertical-large);
+  }
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid $lbry-gray-1;
+  }
+}
+
+.comment__content {
+  font-size: 1.15rem;
+  padding-top: var(--spacing-vertical-medium);
+  padding-bottom: var(--spacing-vertical-medium);
+}