From 6312ff333b423ded7fb11b08bb9120d99e1fce85 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Mon, 20 Jan 2020 10:11:50 -0500 Subject: [PATCH] Adding comment and post vote loading indicators. Fixes #449 --- ui/src/components/comment-node.tsx | 93 +++++++++++++++--------------- ui/src/components/post-listing.tsx | 74 ++++++++++++------------ ui/src/components/post.tsx | 8 ++- ui/src/interfaces.ts | 4 ++ 4 files changed, 93 insertions(+), 86 deletions(-) diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index e6efcf9..baaf63e 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -47,8 +47,8 @@ interface CommentNodeState { showConfirmAppointAsAdmin: boolean; collapsed: boolean; viewSource: boolean; - my_vote: number; - score: number; + upvoteLoading: boolean; + downvoteLoading: boolean; } interface CommentNodeProps { @@ -78,8 +78,8 @@ export class CommentNode extends Component { showConfirmTransferCommunity: false, showConfirmAppointAsMod: false, showConfirmAppointAsAdmin: false, - my_vote: this.props.node.comment.my_vote, - score: this.props.node.comment.score, + upvoteLoading: this.props.node.comment.upvoteLoading, + downvoteLoading: this.props.node.comment.downvoteLoading, }; constructor(props: any, context: any) { @@ -87,18 +87,18 @@ export class CommentNode extends Component { this.state = this.emptyState; this.handleReplyCancel = this.handleReplyCancel.bind(this); - this.handleCommentLike = this.handleCommentLike.bind(this); - this.handleCommentDisLike = this.handleCommentDisLike.bind(this); + this.handleCommentUpvote = this.handleCommentUpvote.bind(this); + this.handleCommentDownvote = this.handleCommentDownvote.bind(this); } - componentDidUpdate(prevProps: CommentNodeProps) { + componentWillReceiveProps(nextProps: CommentNodeProps) { if ( - prevProps.node.comment.my_vote !== this.props.node.comment.my_vote || - this.state.score !== this.props.node.comment.score + nextProps.node.comment.upvoteLoading !== this.state.upvoteLoading || + nextProps.node.comment.downvoteLoading !== this.state.downvoteLoading ) { this.setState({ - my_vote: this.props.node.comment.my_vote, - score: this.props.node.comment.score, + upvoteLoading: false, + downvoteLoading: false, }); } } @@ -119,26 +119,40 @@ export class CommentNode extends Component { -
{this.state.score}
+
+ {node.comment.score} +
{WebSocketService.Instance.site.enable_downvotes && ( )} @@ -736,41 +750,26 @@ export class CommentNode extends Component { this.setState(this.state); } - 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); - + handleCommentUpvote(i: CommentNodeI) { + this.setState({ + upvoteLoading: true, + }); let form: CommentLikeForm = { comment_id: i.comment.id, post_id: i.comment.post_id, - score: this.state.my_vote, + score: i.comment.my_vote == 1 ? 0 : 1, }; 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); - + handleCommentDownvote(i: CommentNodeI) { + this.setState({ + downvoteLoading: true, + }); let form: CommentLikeForm = { comment_id: i.comment.id, post_id: i.comment.post_id, - score: this.state.my_vote, + score: i.comment.my_vote == -1 ? 0 : -1, }; WebSocketService.Instance.likeComment(form); } diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index 0c6d44b..9682575 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -44,8 +44,8 @@ interface PostListingState { showConfirmTransferCommunity: boolean; imageExpanded: boolean; viewSource: boolean; - my_vote: number; - score: number; + upvoteLoading: boolean; + downvoteLoading: boolean; } interface PostListingProps { @@ -70,8 +70,8 @@ export class PostListing extends Component { showConfirmTransferCommunity: false, imageExpanded: false, viewSource: false, - my_vote: this.props.post.my_vote, - score: this.props.post.score, + upvoteLoading: this.props.post.upvoteLoading, + downvoteLoading: this.props.post.downvoteLoading, }; constructor(props: any, context: any) { @@ -84,11 +84,14 @@ export class PostListing extends Component { this.handleEditCancel = this.handleEditCancel.bind(this); } - componentDidUpdate(prevProps: PostListingProps) { - if (prevProps.post.my_vote !== this.props.post.my_vote) { + componentWillReceiveProps(nextProps: PostListingProps) { + if ( + nextProps.post.upvoteLoading !== this.state.upvoteLoading || + nextProps.post.downvoteLoading !== this.state.downvoteLoading + ) { this.setState({ - my_vote: this.props.post.my_vote, - score: this.props.post.score, + upvoteLoading: false, + downvoteLoading: false, }); } } @@ -122,26 +125,38 @@ export class PostListing extends Component { -
{this.state.score}
+
{post.score}
{WebSocketService.Instance.site.enable_downvotes && ( )} @@ -731,38 +746,21 @@ export class PostListing extends Component { } 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); + i.setState({ upvoteLoading: true }); let form: CreatePostLikeForm = { post_id: i.props.post.id, - score: this.state.my_vote, + score: i.props.post.my_vote == 1 ? 0 : 1, }; 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); + i.setState({ downvoteLoading: true }); let form: CreatePostLikeForm = { post_id: i.props.post.id, - score: this.state.my_vote, + score: i.props.post.my_vote == -1 ? 0 : -1, }; WebSocketService.Instance.likePost(form); } diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx index c4bfcce..2005cc1 100644 --- a/ui/src/components/post.tsx +++ b/ui/src/components/post.tsx @@ -400,7 +400,11 @@ export class Post extends Component { found.score = res.comment.score; found.upvotes = res.comment.upvotes; found.downvotes = res.comment.downvotes; - if (res.comment.my_vote !== null) found.my_vote = res.comment.my_vote; + if (res.comment.my_vote !== null) { + found.my_vote = res.comment.my_vote; + found.upvoteLoading = false; + found.downvoteLoading = false; + } this.setState(this.state); } else if (op == UserOperation.CreatePostLike) { let res: CreatePostLikeResponse = msg; @@ -408,6 +412,8 @@ export class Post extends Component { this.state.post.score = res.post.score; this.state.post.upvotes = res.post.upvotes; this.state.post.downvotes = res.post.downvotes; + this.state.post.upvoteLoading = false; + this.state.post.downvoteLoading = false; this.setState(this.state); } else if (op == UserOperation.EditPost) { let res: PostResponse = msg; diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts index 7fc7a25..232d138 100644 --- a/ui/src/interfaces.ts +++ b/ui/src/interfaces.ts @@ -164,6 +164,8 @@ export interface Post { subscribed?: boolean; read?: boolean; saved?: boolean; + upvoteLoading?: boolean; + downvoteLoading?: boolean; } export interface Comment { @@ -190,6 +192,8 @@ export interface Comment { saved?: boolean; user_mention_id?: number; // For mention type recipient_id?: number; + upvoteLoading?: boolean; + downvoteLoading?: boolean; } export interface Category {