From 05f0aee3ea88d3982e2efe6230f8c591540e4c92 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Wed, 27 Mar 2019 12:54:55 -0700 Subject: [PATCH] Adding moment time parsing --- ui/package.json | 2 +- ui/src/components/create-post.tsx | 1 + ui/src/components/moment-time.tsx | 28 ++++++++++++++++++++++++++++ ui/src/components/post.tsx | 25 +++++++++++++++---------- ui/src/index.html | 1 + ui/src/main.css | 5 +++-- ui/src/utils.ts | 1 + ui/yarn.lock | 2 +- 8 files changed, 51 insertions(+), 14 deletions(-) create mode 100644 ui/src/components/moment-time.tsx diff --git a/ui/package.json b/ui/package.json index 08443b14b..0d30805d0 100644 --- 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 3d5dceda3..2a39e96c6 100644 --- 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 index 000000000..e0886cbc2 --- /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 { + + constructor(props, context) { + super(props, context); + } + + render() { + if (this.props.data.updated) { + return ( + modified {moment.utc(this.props.data.updated).fromNow()} + ) + } else { + return ( + {moment.utc(this.props.data.published).fromNow()} + ) + } + } +} diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx index 5e383c09c..867e1a4a4 100644 --- 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 { postHeader() { let title = this.state.post.url - ?
{this.state.post.name}
+ ?
+ {this.state.post.name} + {(new URL(this.state.post.url)).hostname} +
:
{this.state.post.name}
; return (
- {title} - via {this.state.post.attributed_to} X hours ago - {this.state.post.body} -
+
{title}
+
via {this.state.post.attributed_to}
+
{this.state.post.body}
+ ) } @@ -90,7 +94,7 @@ export class Post extends Component {

New Comments

{this.state.comments.map(comment => - + )}
) @@ -163,6 +167,7 @@ interface CommentNodesState { interface CommentNodesProps { nodes: Array; + noIndent?: boolean; } export class CommentNodes extends Component { @@ -177,7 +182,7 @@ export class CommentNodes extends Component {this.props.nodes.map(node => -
+
20
@@ -190,14 +195,14 @@ export class CommentNodes extends Component
  • ( - +1300 + +1300 | -29 - ) points + )
  • - X hours ago +
  • {node.comment.content}

    diff --git a/ui/src/index.html b/ui/src/index.html index 2a3e41981..e02660cfd 100644 --- a/ui/src/index.html +++ b/ui/src/index.html @@ -9,6 +9,7 @@ rust-reddit-fediverse + diff --git a/ui/src/main.css b/ui/src/main.css index 30fbc8dcc..d0cb8baf8 100644 --- 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 d3d9696eb..02c1afbff 100644 --- 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 e668e7491..ff82991bb 100644 --- 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==