Adding moment time parsing

This commit is contained in:
Dessalines 2019-03-27 12:54:55 -07:00
parent fa3791e502
commit 57bd4976d3
8 changed files with 51 additions and 14 deletions

View file

@ -22,7 +22,7 @@
"inferno-router": "^7.0.1", "inferno-router": "^7.0.1",
"js-cookie": "^2.2.0", "js-cookie": "^2.2.0",
"jwt-decode": "^2.2.0", "jwt-decode": "^2.2.0",
"moment": "^2.22.2", "moment": "^2.24.0",
"rxjs": "^6.4.0" "rxjs": "^6.4.0"
}, },
"devDependencies": { "devDependencies": {

View file

@ -4,6 +4,7 @@ import { retryWhen, delay, take } from 'rxjs/operators';
import { PostForm, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse } from '../interfaces'; import { PostForm, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse } from '../interfaces';
import { WebSocketService, UserService } from '../services'; import { WebSocketService, UserService } from '../services';
import { msgOp } from '../utils'; import { msgOp } from '../utils';
import { MomentTime } from './moment-time';
interface State { interface State {
postForm: PostForm; postForm: PostForm;

View file

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

View file

@ -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 { UserOperation, Community, Post as PostI, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse } from '../interfaces';
import { WebSocketService, UserService } from '../services'; import { WebSocketService, UserService } from '../services';
import { msgOp } from '../utils'; import { msgOp } from '../utils';
import { MomentTime } from './moment-time';
interface CommentNodeI { interface CommentNodeI {
comment: Comment; comment: Comment;
@ -74,13 +75,16 @@ export class Post extends Component<any, State> {
postHeader() { postHeader() {
let title = this.state.post.url 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>; : <h5>{this.state.post.name}</h5>;
return ( return (
<div> <div>
{title} <div>{title}</div>
via {this.state.post.attributed_to} X hours ago <div>via {this.state.post.attributed_to} <MomentTime data={this.state.post} /></div>
{this.state.post.body} <div>{this.state.post.body}</div>
</div> </div>
) )
} }
@ -90,7 +94,7 @@ export class Post extends Component<any, State> {
<div class="sticky-top"> <div class="sticky-top">
<h4>New Comments</h4> <h4>New Comments</h4>
{this.state.comments.map(comment => {this.state.comments.map(comment =>
<CommentNodes nodes={[{comment: comment}]} /> <CommentNodes nodes={[{comment: comment}]} noIndent />
)} )}
</div> </div>
) )
@ -163,6 +167,7 @@ interface CommentNodesState {
interface CommentNodesProps { interface CommentNodesProps {
nodes: Array<CommentNodeI>; nodes: Array<CommentNodeI>;
noIndent?: boolean;
} }
export class CommentNodes extends Component<CommentNodesProps, CommentNodesState> { export class CommentNodes extends Component<CommentNodesProps, CommentNodesState> {
@ -177,7 +182,7 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
return ( return (
<div className="comments"> <div className="comments">
{this.props.nodes.map(node => {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="float-left small text-center">
<div className="pointer upvote"></div> <div className="pointer upvote"></div>
<div>20</div> <div>20</div>
@ -190,14 +195,14 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<span>( <span>(
<span className="text-info"> +1300</span> <span className="text-info">+1300</span>
<span> | </span> <span> | </span>
<span className="text-danger">-29</span> <span className="text-danger">-29</span>
<span> ) points</span> <span>) </span>
</span> </span>
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<span>X hours ago</span> <span><MomentTime data={node.comment} /></span>
</li> </li>
</ul> </ul>
<p className="mb-0">{node.comment.content}</p> <p className="mb-0">{node.comment.content}</p>

View file

@ -9,6 +9,7 @@
<title>rust-reddit-fediverse</title> <title>rust-reddit-fediverse</title>
<link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css"> <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 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> </head>
<body> <body>

View file

@ -1,5 +1,6 @@
body {
font-family: 'Open Sans', sans-serif;
}
.pointer { .pointer {
cursor: pointer; cursor: pointer;

View file

@ -7,3 +7,4 @@ export function msgOp(msg: any): UserOperation {
let opStr: string = msg.op; let opStr: string = msg.op;
return UserOperation[opStr]; return UserOperation[opStr];
} }

View file

@ -1753,7 +1753,7 @@ mkdirp@^0.5.0, mkdirp@^0.5.1:
dependencies: dependencies:
minimist "0.0.8" minimist "0.0.8"
moment@^2.22.2: moment@^2.24.0:
version "2.24.0" version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b" resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg== integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==