summaryrefslogtreecommitdiffstats
path: root/ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'ui/src')
-rw-r--r--ui/src/components/comment-node.tsx112
-rw-r--r--ui/src/components/post-listing.tsx103
-rw-r--r--ui/src/interfaces.ts4
-rw-r--r--ui/src/utils.ts4
4 files changed, 121 insertions, 102 deletions
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 0e511063..1d0b12ca 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -48,8 +48,10 @@ interface CommentNodeState {
showConfirmAppointAsAdmin: boolean;
collapsed: boolean;
viewSource: boolean;
- upvoteLoading: boolean;
- downvoteLoading: boolean;
+ my_vote: number;
+ score: number;
+ upvotes: number;
+ downvotes: number;
}
interface CommentNodeProps {
@@ -83,8 +85,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
showConfirmTransferCommunity: false,
showConfirmAppointAsMod: false,
showConfirmAppointAsAdmin: false,
- upvoteLoading: this.props.node.comment.upvoteLoading,
- downvoteLoading: this.props.node.comment.downvoteLoading,
+ my_vote: this.props.node.comment.my_vote,
+ score: this.props.node.comment.score,
+ upvotes: this.props.node.comment.upvotes,
+ downvotes: this.props.node.comment.downvotes,
};
constructor(props: any, context: any) {
@@ -97,15 +101,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
}
componentWillReceiveProps(nextProps: CommentNodeProps) {
- if (
- nextProps.node.comment.upvoteLoading !== this.state.upvoteLoading ||
- nextProps.node.comment.downvoteLoading !== this.state.downvoteLoading
- ) {
- this.setState({
- upvoteLoading: false,
- downvoteLoading: false,
- });
- }
+ this.state.my_vote = nextProps.node.comment.my_vote;
+ this.state.upvotes = nextProps.node.comment.upvotes;
+ this.state.downvotes = nextProps.node.comment.downvotes;
+ this.state.score = nextProps.node.comment.score;
+ this.setState(this.state);
}
render() {
@@ -122,40 +122,26 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
.viewOnly && 'no-click'}`}
>
<button
- className={`btn btn-link p-0 ${
- node.comment.my_vote == 1 ? 'text-info' : 'text-muted'
+ className={`vote-animate btn btn-link p-0 ${
+ this.state.my_vote == 1 ? 'text-info' : 'text-muted'
}`}
onClick={linkEvent(node, this.handleCommentUpvote)}
>
- {this.state.upvoteLoading ? (
- <svg class="icon icon-spinner spin upvote">
- <use xlinkHref="#icon-spinner"></use>
- </svg>
- ) : (
- <svg class="icon upvote">
- <use xlinkHref="#icon-arrow-up"></use>
- </svg>
- )}
+ <svg class="icon upvote">
+ <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 btn-link p-0 ${
- node.comment.my_vote == -1 ? 'text-danger' : 'text-muted'
+ className={`vote-animate btn btn-link p-0 ${
+ this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
}`}
onClick={linkEvent(node, this.handleCommentDownvote)}
>
- {this.state.downvoteLoading ? (
- <svg class="icon icon-spinner spin downvote">
- <use xlinkHref="#icon-spinner"></use>
- </svg>
- ) : (
- <svg class="icon downvote">
- <use xlinkHref="#icon-arrow-down"></use>
- </svg>
- )}
+ <svg class="icon downvote">
+ <use xlinkHref="#icon-arrow-down"></use>
+ </svg>
</button>
)}
</div>
@@ -205,9 +191,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)}
<li className="list-inline-item">
<span>
- (<span className="text-info">+{node.comment.upvotes}</span>
+ (<span className="text-info">+{this.state.upvotes}</span>
<span> | </span>
- <span className="text-danger">-{node.comment.downvotes}</span>
+ <span className="text-danger">-{this.state.downvotes}</span>
<span>) </span>
</span>
</li>
@@ -772,31 +758,57 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
}
handleCommentUpvote(i: CommentNodeI) {
- if (UserService.Instance.user) {
- this.setState({
- upvoteLoading: true,
- });
+ let new_vote = this.state.my_vote == 1 ? 0 : 1;
+
+ if (this.state.my_vote == 1) {
+ this.state.score--;
+ this.state.upvotes--;
+ } else if (this.state.my_vote == -1) {
+ this.state.downvotes--;
+ this.state.upvotes++;
+ this.state.score += 2;
+ } else {
+ this.state.upvotes++;
+ this.state.score++;
}
+
+ this.state.my_vote = new_vote;
+
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);
+ this.setState(this.state);
}
handleCommentDownvote(i: CommentNodeI) {
- if (UserService.Instance.user) {
- this.setState({
- downvoteLoading: true,
- });
+ let new_vote = this.state.my_vote == -1 ? 0 : -1;
+
+ if (this.state.my_vote == 1) {
+ this.state.score -= 2;
+ this.state.upvotes--;
+ this.state.downvotes++;
+ } else if (this.state.my_vote == -1) {
+ this.state.downvotes--;
+ this.state.score++;
+ } else {
+ this.state.downvotes++;
+ this.state.score--;
}
+
+ this.state.my_vote = new_vote;
+
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);
+ this.setState(this.state);
}
handleModRemoveShow(i: CommentNode) {
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index f11d9e14..1e728901 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -43,8 +43,10 @@ interface PostListingState {
showConfirmTransferCommunity: boolean;
imageExpanded: boolean;
viewSource: boolean;
- upvoteLoading: boolean;
- downvoteLoading: boolean;
+ my_vote: number;
+ score: number;
+ upvotes: number;
+ downvotes: number;
}
interface PostListingProps {
@@ -68,8 +70,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
showConfirmTransferCommunity: false,
imageExpanded: false,
viewSource: false,
- upvoteLoading: this.props.post.upvoteLoading,
- downvoteLoading: this.props.post.downvoteLoading,
+ my_vote: this.props.post.my_vote,
+ score: this.props.post.score,
+ upvotes: this.props.post.upvotes,
+ downvotes: this.props.post.downvotes,
};
constructor(props: any, context: any) {
@@ -83,15 +87,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
componentWillReceiveProps(nextProps: PostListingProps) {
- if (
- nextProps.post.upvoteLoading !== this.state.upvoteLoading ||
- nextProps.post.downvoteLoading !== this.state.downvoteLoading
- ) {
- this.setState({
- upvoteLoading: false,
- downvoteLoading: false,
- });
- }
+ this.state.my_vote = nextProps.post.my_vote;
+ this.state.upvotes = nextProps.post.upvotes;
+ this.state.downvotes = nextProps.post.downvotes;
+ this.state.score = nextProps.post.score;
+ this.setState(this.state);
}
render() {
@@ -118,38 +118,26 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<div class="listing col-12">
<div className={`vote-bar mr-2 float-left small text-center`}>
<button
- className={`btn btn-link p-0 ${
- post.my_vote == 1 ? 'text-info' : 'text-muted'
+ className={`vote-animate btn btn-link p-0 ${
+ this.state.my_vote == 1 ? 'text-info' : 'text-muted'
}`}
onClick={linkEvent(this, this.handlePostLike)}
>
- {this.state.upvoteLoading ? (
- <svg class="icon icon-spinner spin upvote">
- <use xlinkHref="#icon-spinner"></use>
- </svg>
- ) : (
- <svg class="icon upvote">
- <use xlinkHref="#icon-arrow-up"></use>
- </svg>
- )}
+ <svg class="icon upvote">
+ <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 btn-link p-0 ${
- post.my_vote == -1 ? 'text-danger' : 'text-muted'
+ className={`vote-animate btn btn-link p-0 ${
+ this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
}`}
onClick={linkEvent(this, this.handlePostDisLike)}
>
- {this.state.downvoteLoading ? (
- <svg class="icon icon-spinner spin downvote">
- <use xlinkHref="#icon-spinner"></use>
- </svg>
- ) : (
- <svg class="icon downvote">
- <use xlinkHref="#icon-arrow-down"></use>
- </svg>
- )}
+ <svg class="icon downvote">
+ <use xlinkHref="#icon-arrow-down"></use>
+ </svg>
</button>
)}
</div>
@@ -315,9 +303,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</li>
<li className="list-inline-item">
<span>
- (<span className="text-info">+{post.upvotes}</span>
+ (<span className="text-info">+{this.state.upvotes}</span>
<span> | </span>
- <span className="text-danger">-{post.downvotes}</span>
+ <span className="text-danger">-{this.state.downvotes}</span>
<span>) </span>
</span>
</li>
@@ -747,28 +735,55 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
handlePostLike(i: PostListing) {
- if (UserService.Instance.user) {
- i.setState({ upvoteLoading: true });
+ let new_vote = i.state.my_vote == 1 ? 0 : 1;
+
+ if (i.state.my_vote == 1) {
+ i.state.score--;
+ i.state.upvotes--;
+ } else if (i.state.my_vote == -1) {
+ i.state.downvotes--;
+ i.state.upvotes++;
+ i.state.score += 2;
+ } else {
+ i.state.upvotes++;
+ i.state.score++;
}
+ i.state.my_vote = new_vote;
+
let form: CreatePostLikeForm = {
post_id: i.props.post.id,
- score: i.props.post.my_vote == 1 ? 0 : 1,
+ score: i.state.my_vote,
};
WebSocketService.Instance.likePost(form);
+ i.setState(i.state);
}
handlePostDisLike(i: PostListing) {
- if (UserService.Instance.user) {
- i.setState({ downvoteLoading: true });
+ let new_vote = i.state.my_vote == -1 ? 0 : -1;
+
+ if (i.state.my_vote == 1) {
+ i.state.score -= 2;
+ i.state.upvotes--;
+ i.state.downvotes++;
+ } else if (i.state.my_vote == -1) {
+ i.state.downvotes--;
+ i.state.score++;
+ } else {
+ i.state.downvotes++;
+ i.state.score--;
}
+ i.state.my_vote = new_vote;
+
let form: CreatePostLikeForm = {
post_id: i.props.post.id,
- score: i.props.post.my_vote == -1 ? 0 : -1,
+ score: i.state.my_vote,
};
+
WebSocketService.Instance.likePost(form);
+ i.setState(i.state);
}
handleEditClick(i: PostListing) {
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index 185056f3..23551b59 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -177,8 +177,6 @@ export interface Post {
subscribed?: boolean;
read?: boolean;
saved?: boolean;
- upvoteLoading?: boolean;
- downvoteLoading?: boolean;
duplicates?: Array<Post>;
}
@@ -209,8 +207,6 @@ export interface Comment {
saved?: boolean;
user_mention_id?: number; // For mention type
recipient_id?: number;
- upvoteLoading?: boolean;
- downvoteLoading?: boolean;
}
export interface Category {
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 929877fc..384d5c1d 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -601,8 +601,6 @@ export function createCommentLikeRes(
found.downvotes = data.comment.downvotes;
if (data.comment.my_vote !== null) {
found.my_vote = data.comment.my_vote;
- found.upvoteLoading = false;
- found.downvoteLoading = false;
}
}
}
@@ -620,8 +618,6 @@ export function createPostLikeRes(data: PostResponse, post: Post) {
post.downvotes = data.post.downvotes;
if (data.post.my_vote !== null) {
post.my_vote = data.post.my_vote;
- post.upvoteLoading = false;
- post.downvoteLoading = false;
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-08 14:03:29 +0000