diff options
Diffstat (limited to 'ui/src/components/post-listing.tsx')
-rw-r--r-- | ui/src/components/post-listing.tsx | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx new file mode 100644 index 00000000..861f0f15 --- /dev/null +++ b/ui/src/components/post-listing.tsx @@ -0,0 +1,104 @@ +import { Component, linkEvent } from 'inferno'; +import { Link } from 'inferno-router'; +import { Subscription } from "rxjs"; +import { retryWhen, delay, take } from 'rxjs/operators'; +import { WebSocketService, UserService } from '../services'; +import { Post, CreatePostLikeResponse, CreatePostLikeForm } from '../interfaces'; +import { MomentTime } from './moment-time'; +import { mdToHtml } from '../utils'; + +interface PostListingState { +} + +interface PostListingProps { + post: Post; + showCommunity?: boolean; + showBody?: boolean; +} + +export class PostListing extends Component<PostListingProps, PostListingState> { + + private emptyState: PostListingState = { + } + + constructor(props, context) { + super(props, context); + + this.state = this.emptyState; + this.handlePostLike = this.handlePostLike.bind(this); + this.handlePostDisLike = this.handlePostDisLike.bind(this); + } + + render() { + let post = this.props.post; + return ( + <div class="listing"> + <div className="float-left small text-center"> + <div className={`pointer upvote ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}>▲</div> + <div>{post.score}</div> + <div className={`pointer downvote ${post.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(this, this.handlePostDisLike)}>▼</div> + </div> + <div className="ml-4"> + {post.url + ? <h5 className="mb-0"> + <a className="text-white" href={post.url}>{post.name}</a> + <small><a className="ml-2 text-muted font-italic" href={post.url}>{(new URL(post.url)).hostname}</a></small> + </h5> + : <h5 className="mb-0"><Link className="text-white" to={`/post/${post.id}`}>{post.name}</Link></h5> + } + </div> + <div className="details ml-4 mb-1"> + <ul class="list-inline mb-0 text-muted small"> + <li className="list-inline-item"> + <span>by </span> + <a href={post.creator_id.toString()}>{post.creator_name}</a> + {this.props.showCommunity && + <span> + <span> to </span> + <Link to={`/community/${post.community_id}`}>{post.community_name}</Link> + </span> + } + </li> + <li className="list-inline-item"> + <span><MomentTime data={post} /></span> + </li> + <li className="list-inline-item"> + <span>( + <span className="text-info">+{post.upvotes}</span> + <span> | </span> + <span className="text-danger">-{post.downvotes}</span> + <span>) </span> + </span> + </li> + <li className="list-inline-item"> + <Link to={`/post/${post.id}`}>{post.number_of_comments} Comments</Link> + </li> + </ul> + {this.props.showBody && this.props.post.body && <div className="md-div" dangerouslySetInnerHTML={mdToHtml(post.body)} />} + </div> + </div> + ) + } + + // private get myPost(): boolean { + // return this.props.node.comment.attributed_to == UserService.Instance.fediUserId; + // } + + handlePostLike(i: PostListing, event) { + + let form: CreatePostLikeForm = { + post_id: i.props.post.id, + score: (i.props.post.my_vote == 1) ? 0 : 1 + }; + WebSocketService.Instance.likePost(form); + } + + handlePostDisLike(i: PostListing, event) { + let form: CreatePostLikeForm = { + post_id: i.props.post.id, + score: (i.props.post.my_vote == -1) ? 0 : -1 + }; + WebSocketService.Instance.likePost(form); + } +} + |