diff options
author | Dessalines <tyhou13@gmx.com> | 2019-03-27 12:54:55 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-03-27 12:54:55 -0700 |
commit | 05f0aee3ea88d3982e2efe6230f8c591540e4c92 (patch) | |
tree | 8b7c39e4928ffd1d6604ef3c5aad604357a031d9 /ui | |
parent | 2b08fe5be98ba1de0dc3c16f2f3f25ce3c2b262c (diff) |
Adding moment time parsing
Diffstat (limited to 'ui')
-rw-r--r-- | ui/package.json | 2 | ||||
-rw-r--r-- | ui/src/components/create-post.tsx | 1 | ||||
-rw-r--r-- | ui/src/components/moment-time.tsx | 28 | ||||
-rw-r--r-- | ui/src/components/post.tsx | 25 | ||||
-rw-r--r-- | ui/src/index.html | 1 | ||||
-rw-r--r-- | ui/src/main.css | 5 | ||||
-rw-r--r-- | ui/src/utils.ts | 1 | ||||
-rw-r--r-- | ui/yarn.lock | 2 |
8 files changed, 51 insertions, 14 deletions
diff --git a/ui/package.json b/ui/package.json index 08443b14..0d30805d 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 3d5dceda..2a39e96c 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 00000000..e0886cbc --- /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 5e383c09..867e1a4a 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<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 2a3e4198..e02660cf 100644 --- 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 30fbc8dc..d0cb8baf 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 d3d9696e..02c1afbf 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 e668e749..ff82991b 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== |