Optimizing

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",

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));

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>
     );
   }
 }

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';

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);
+}