mirror of
https://github.com/LemmyNet/lemmy.git
synced 2024-11-05 04:00:02 +00:00
Add fast comment and post voting. (Doesn't wait for server return)
- Fixes #416
This commit is contained in:
parent
083fcb9c6c
commit
3f4cce99ed
2 changed files with 64 additions and 13 deletions
37
ui/src/components/comment-node.tsx
vendored
37
ui/src/components/comment-node.tsx
vendored
|
@ -47,6 +47,8 @@ interface CommentNodeState {
|
|||
showConfirmAppointAsAdmin: boolean;
|
||||
collapsed: boolean;
|
||||
viewSource: boolean;
|
||||
my_vote: number;
|
||||
score: number;
|
||||
}
|
||||
|
||||
interface CommentNodeProps {
|
||||
|
@ -76,6 +78,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
showConfirmTransferCommunity: false,
|
||||
showConfirmAppointAsMod: false,
|
||||
showConfirmAppointAsAdmin: false,
|
||||
my_vote: this.props.node.comment.my_vote,
|
||||
score: this.props.node.comment.score,
|
||||
};
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
|
@ -102,7 +106,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
>
|
||||
<button
|
||||
className={`btn p-0 ${
|
||||
node.comment.my_vote == 1 ? 'text-info' : 'text-muted'
|
||||
this.state.my_vote == 1 ? 'text-info' : 'text-muted'
|
||||
}`}
|
||||
onClick={linkEvent(node, this.handleCommentLike)}
|
||||
>
|
||||
|
@ -110,13 +114,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<use xlinkHref="#icon-arrow-up"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<div class={`font-weight-bold text-muted`}>
|
||||
{node.comment.score}
|
||||
</div>
|
||||
<div class={`font-weight-bold text-muted`}>{this.state.score}</div>
|
||||
{WebSocketService.Instance.site.enable_downvotes && (
|
||||
<button
|
||||
className={`btn p-0 ${
|
||||
node.comment.my_vote == -1 ? 'text-danger' : 'text-muted'
|
||||
this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
|
||||
}`}
|
||||
onClick={linkEvent(node, this.handleCommentDisLike)}
|
||||
>
|
||||
|
@ -721,19 +723,40 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
}
|
||||
|
||||
handleCommentLike(i: CommentNodeI) {
|
||||
this.state.my_vote = i.comment.my_vote == 1 ? 0 : 1;
|
||||
let add = 1;
|
||||
if (i.comment.my_vote == 1) {
|
||||
add = -1;
|
||||
} else if (i.comment.my_vote == -1) {
|
||||
add = 2;
|
||||
}
|
||||
|
||||
this.state.score = i.comment.score + add;
|
||||
this.setState(this.state);
|
||||
|
||||
let form: CommentLikeForm = {
|
||||
comment_id: i.comment.id,
|
||||
post_id: i.comment.post_id,
|
||||
score: i.comment.my_vote == 1 ? 0 : 1,
|
||||
score: this.state.my_vote,
|
||||
};
|
||||
WebSocketService.Instance.likeComment(form);
|
||||
}
|
||||
|
||||
handleCommentDisLike(i: CommentNodeI) {
|
||||
this.state.my_vote = i.comment.my_vote == -1 ? 0 : -1;
|
||||
let add = -1;
|
||||
if (i.comment.my_vote == 1) {
|
||||
add = -2;
|
||||
} else if (i.comment.my_vote == -1) {
|
||||
add = 1;
|
||||
}
|
||||
this.state.score = i.comment.score + add;
|
||||
this.setState(this.state);
|
||||
|
||||
let form: CommentLikeForm = {
|
||||
comment_id: i.comment.id,
|
||||
post_id: i.comment.post_id,
|
||||
score: i.comment.my_vote == -1 ? 0 : -1,
|
||||
score: this.state.my_vote,
|
||||
};
|
||||
WebSocketService.Instance.likeComment(form);
|
||||
}
|
||||
|
|
40
ui/src/components/post-listing.tsx
vendored
40
ui/src/components/post-listing.tsx
vendored
|
@ -44,6 +44,8 @@ interface PostListingState {
|
|||
showConfirmTransferCommunity: boolean;
|
||||
imageExpanded: boolean;
|
||||
viewSource: boolean;
|
||||
my_vote: number;
|
||||
score: number;
|
||||
}
|
||||
|
||||
interface PostListingProps {
|
||||
|
@ -68,6 +70,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
showConfirmTransferCommunity: false,
|
||||
imageExpanded: false,
|
||||
viewSource: false,
|
||||
my_vote: this.props.post.my_vote,
|
||||
score: this.props.post.score,
|
||||
};
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
|
@ -108,7 +112,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
>
|
||||
<button
|
||||
className={`btn p-0 ${
|
||||
post.my_vote == 1 ? 'text-info' : 'text-muted'
|
||||
this.state.my_vote == 1 ? 'text-info' : 'text-muted'
|
||||
}`}
|
||||
onClick={linkEvent(this, this.handlePostLike)}
|
||||
>
|
||||
|
@ -116,11 +120,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<use xlinkHref="#icon-arrow-up"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<div class={`font-weight-bold text-muted`}>{post.score}</div>
|
||||
<div class={`font-weight-bold text-muted`}>{this.state.score}</div>
|
||||
{WebSocketService.Instance.site.enable_downvotes && (
|
||||
<button
|
||||
className={`btn p-0 ${
|
||||
post.my_vote == -1 ? 'text-danger' : 'text-muted'
|
||||
this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
|
||||
}`}
|
||||
onClick={linkEvent(this, this.handlePostDisLike)}
|
||||
>
|
||||
|
@ -642,7 +646,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
get isAdmin(): boolean {
|
||||
return (
|
||||
this.props.admins &&
|
||||
isMod(this.props.admins.map(a => a.id), this.props.post.creator_id)
|
||||
isMod(
|
||||
this.props.admins.map(a => a.id),
|
||||
this.props.post.creator_id
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -709,17 +716,38 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
}
|
||||
|
||||
handlePostLike(i: PostListing) {
|
||||
this.state.my_vote = i.props.post.my_vote == 1 ? 0 : 1;
|
||||
let add = 1;
|
||||
if (i.props.post.my_vote == 1) {
|
||||
add = -1;
|
||||
} else if (i.props.post.my_vote == -1) {
|
||||
add = 2;
|
||||
}
|
||||
|
||||
this.state.score = i.props.post.score + add;
|
||||
this.setState(this.state);
|
||||
|
||||
let form: CreatePostLikeForm = {
|
||||
post_id: i.props.post.id,
|
||||
score: i.props.post.my_vote == 1 ? 0 : 1,
|
||||
score: this.state.my_vote,
|
||||
};
|
||||
WebSocketService.Instance.likePost(form);
|
||||
}
|
||||
|
||||
handlePostDisLike(i: PostListing) {
|
||||
this.state.my_vote = i.props.post.my_vote == -1 ? 0 : -1;
|
||||
let add = -1;
|
||||
if (i.props.post.my_vote == 1) {
|
||||
add = -2;
|
||||
} else if (i.props.post.my_vote == -1) {
|
||||
add = 1;
|
||||
}
|
||||
this.state.score = i.props.post.score + add;
|
||||
this.setState(this.state);
|
||||
|
||||
let form: CreatePostLikeForm = {
|
||||
post_id: i.props.post.id,
|
||||
score: i.props.post.my_vote == -1 ? 0 : -1,
|
||||
score: this.state.my_vote,
|
||||
};
|
||||
WebSocketService.Instance.likePost(form);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue