grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add fast comment and post voting. (Doesn't wait for server return)

Browse source 
- Fixes #416
This commit is contained in:
Dessalines 2020-01-13 22:57:32 -05:00
parent 7bf391957d
commit f31c781693
2 changed files with 64 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
ui/src/components/comment-node.tsx vendored
View file

@ -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
View file

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