Browse Source

Adding moment time parsing

pull/1/head
Dessalines 3 years ago
parent
commit
ef367998e9
  1. 2
      package.json
  2. 1
      src/components/create-post.tsx
  3. 28
      src/components/moment-time.tsx
  4. 25
      src/components/post.tsx
  5. 1
      src/index.html
  6. 5
      src/main.css
  7. 1
      src/utils.ts
  8. 2
      yarn.lock

2
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": {

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

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

25
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>

1
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>

5
src/main.css

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

1
src/utils.ts

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

2
yarn.lock

@ -1753,7 +1753,7 @@ [email protected]^0.5.0, [email protected]^0.5.1:
dependencies:
minimist "0.0.8"
[email protected]^2.22.2:
[email protected]^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==

Loading…
Cancel
Save