Adding moment time parsing

diff --git a/ui/package.json b/ui/package.json
index 08443b14b0d0871ae92bd7628d6f265494b2564f..0d30805d094dd7200a9044d8189db38d3e4a9e0a 100644 (file)
--- a/ui/package.json
+++ b/ui/package.json
@@ -22,7 +22,7 @@
     "inferno-router": "^7.0.1",
     "js-cookie": "^2.2.0",
     "jwt-decode": "^2.2.0",
-    "moment": "^2.22.2",
+    "moment": "^2.24.0",
     "rxjs": "^6.4.0"
   },
   "devDependencies": {

diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx
index 3d5dceda373579b45f1992418b770b4b31c7442c..2a39e96c653e57248198935c15b4f5ea26a454ce 100644 (file)
--- a/ui/src/components/create-post.tsx
+++ b/ui/src/components/create-post.tsx
@@ -4,6 +4,7 @@ import { retryWhen, delay, take } from 'rxjs/operators';
 import { PostForm, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { msgOp } from '../utils';
+import { MomentTime } from './moment-time';
 
 interface State {
   postForm: PostForm;

diff --git a/ui/src/components/moment-time.tsx b/ui/src/components/moment-time.tsx
new file mode 100644 (file)
index 0000000..e0886cb
--- /dev/null
+++ b/ui/src/components/moment-time.tsx
@@ -0,0 +1,28 @@
+import { Component, linkEvent } from 'inferno';
+import * as moment from 'moment';
+
+interface MomentTimeProps {
+  data: {
+    published: string;
+    updated?: string;
+  }
+}
+
+export class MomentTime extends Component<MomentTimeProps, any> {
+
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    if (this.props.data.updated) {
+      return (
+        <span className="font-italics">modified {moment.utc(this.props.data.updated).fromNow()}</span>
+      )
+    } else {
+      return (
+        <span>{moment.utc(this.props.data.published).fromNow()}</span>
+      )
+    }
+  }
+}

diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 5e383c09c7252ba4f7a64746893462c8e5a6261f..867e1a4a49cde36a342f3d10f7aa7c790d901714 100644 (file)
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -4,6 +4,7 @@ import { retryWhen, delay, take } from 'rxjs/operators';
 import { UserOperation, Community, Post as PostI, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { msgOp } from '../utils';
+import { MomentTime } from './moment-time';
 
 interface CommentNodeI {
   comment: Comment;
@@ -74,14 +75,17 @@ export class Post extends Component<any, State> {
 
   postHeader() {
     let title = this.state.post.url 
-      ? <h5><a href={this.state.post.url}>{this.state.post.name}</a></h5> 
+      ? <h5>
+      <a href={this.state.post.url}>{this.state.post.name}</a>
+      <small><a className="ml-2 text-muted font-italic" href={this.state.post.url}>{(new URL(this.state.post.url)).hostname}</a></small>
+      </h5> 
       : <h5>{this.state.post.name}</h5>;
     return (
       <div>
-        {title}
-        via {this.state.post.attributed_to} X hours ago
-          {this.state.post.body}
-        </div>
+        <div>{title}</div>
+        <div>via {this.state.post.attributed_to} <MomentTime data={this.state.post} /></div>
+        <div>{this.state.post.body}</div>
+      </div>
     )
   }
 
@@ -90,7 +94,7 @@ export class Post extends Component<any, State> {
       <div class="sticky-top">
         <h4>New Comments</h4>
         {this.state.comments.map(comment => 
-          <CommentNodes nodes={[{comment: comment}]} />
+          <CommentNodes nodes={[{comment: comment}]} noIndent />
         )}
       </div>
     )
@@ -163,6 +167,7 @@ interface CommentNodesState {
 
 interface CommentNodesProps {
   nodes: Array<CommentNodeI>;
+  noIndent?: boolean;
 }
 
 export class CommentNodes extends Component<CommentNodesProps, CommentNodesState> {
@@ -177,7 +182,7 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
     return (
       <div className="comments">
         {this.props.nodes.map(node =>
-          <div className={`comment ${node.comment.parent_id ? 'ml-4' : ''}`}>
+          <div className={`comment ${node.comment.parent_id  && !this.props.noIndent ? 'ml-4' : ''}`}>
             <div className="float-left small text-center">
               <div className="pointer upvote">▲</div>
               <div>20</div>
@@ -190,14 +195,14 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
               </li>
               <li className="list-inline-item">
                 <span>(
-                  <span className="text-info"> +1300</span>
+                  <span className="text-info">+1300</span>
                   <span> | </span>
                   <span className="text-danger">-29</span>
-                  <span> ) points</span>
+                  <span>) </span>
                 </span>
               </li>
               <li className="list-inline-item">
-                <span>X hours ago</span>
+                <span><MomentTime data={node.comment} /></span>
               </li>
             </ul>
             <p className="mb-0">{node.comment.content}</p>

diff --git a/ui/src/index.html b/ui/src/index.html
index 2a3e41981cca225c91d7200477508dc36552fa35..e02660cfdbacdb92e5aabf6197fe71c43b337349 100644 (file)
--- a/ui/src/index.html
+++ b/ui/src/index.html
@@ -9,6 +9,7 @@
        <title>rust-reddit-fediverse</title>
   <link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,800" rel="stylesheet"> 
 </head>
 
 <body>

diff --git a/ui/src/main.css b/ui/src/main.css
index 30fbc8dcc184a6e6b088c60de0359b96e76ae4a7..d0cb8baf843b81efd6a1fc606b91b2ed967c4d24 100644 (file)
--- a/ui/src/main.css
+++ b/ui/src/main.css
@@ -1,5 +1,6 @@
-
-
+body {
+  font-family: 'Open Sans', sans-serif;
+}
 
 .pointer {
   cursor: pointer;

diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index d3d9696eb36f46f75b6a0600f4e7157e9fa0c012..02c1afbff3c32597f496a30e1b26442c2abfaf82 100644 (file)
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -7,3 +7,4 @@ export function msgOp(msg: any): UserOperation {
   let opStr: string = msg.op;
   return UserOperation[opStr];
 }
+

diff --git a/ui/yarn.lock b/ui/yarn.lock
index e668e749156c2dd18b194c7cc2b0038872350a6b..ff82991bb4c22bae577562f97db56aa8687b27ed 100644 (file)
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1753,7 +1753,7 @@ mkdirp@^0.5.0, mkdirp@^0.5.1:
   dependencies:
     minimist "0.0.8"
 
-moment@^2.22.2:
+moment@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==