mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-01 10:09:56 +00:00
fix: Rework some vote buttons architecture
This commit is contained in:
parent
380d6f877c
commit
094429ff1e
2 changed files with 40 additions and 48 deletions
|
@ -1,19 +1,21 @@
|
||||||
import { showScores } from "@utils/app";
|
import { myAuthRequired, newVote, showScores } from "@utils/app";
|
||||||
import { numToSI } from "@utils/helpers";
|
import { numToSI } from "@utils/helpers";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import { CommentAggregates, PostAggregates } from "lemmy-js-client";
|
import {
|
||||||
|
CommentAggregates,
|
||||||
|
CreateCommentLike,
|
||||||
|
CreatePostLike,
|
||||||
|
PostAggregates,
|
||||||
|
} from "lemmy-js-client";
|
||||||
|
import { VoteType } from "../../interfaces";
|
||||||
import { I18NextService } from "../../services";
|
import { I18NextService } from "../../services";
|
||||||
import { Icon, Spinner } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { PostListing } from "../post/post-listing";
|
|
||||||
|
|
||||||
interface VoteButtonsProps {
|
interface VoteButtonsProps {
|
||||||
postListing: PostListing;
|
id: number;
|
||||||
|
onVote: (i: CreatePostLike | CreateCommentLike) => void;
|
||||||
enableDownvotes?: boolean;
|
enableDownvotes?: boolean;
|
||||||
upvoteLoading?: boolean;
|
|
||||||
downvoteLoading?: boolean;
|
|
||||||
handleUpvote: (i: PostListing) => void;
|
|
||||||
handleDownvote: (i: PostListing) => void;
|
|
||||||
counts: CommentAggregates | PostAggregates;
|
counts: CommentAggregates | PostAggregates;
|
||||||
my_vote?: number;
|
my_vote?: number;
|
||||||
}
|
}
|
||||||
|
@ -42,6 +44,26 @@ const tippy = (counts: CommentAggregates | PostAggregates): string => {
|
||||||
return `${points} • ${upvotes} • ${downvotes}`;
|
return `${points} • ${upvotes} • ${downvotes}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleUpvote = (i: VoteButtons) => {
|
||||||
|
i.setState({ upvoteLoading: true });
|
||||||
|
i.props.onVote({
|
||||||
|
post_id: i.props.id,
|
||||||
|
score: newVote(VoteType.Upvote, i.props.my_vote),
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
i.setState({ upvoteLoading: false });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDownvote = (i: VoteButtons) => {
|
||||||
|
i.setState({ downvoteLoading: true });
|
||||||
|
i.props.onVote({
|
||||||
|
post_id: i.props.id,
|
||||||
|
score: newVote(VoteType.Downvote, i.props.my_vote),
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
i.setState({ downvoteLoading: false });
|
||||||
|
};
|
||||||
|
|
||||||
export class VoteButtonsCompact extends Component<
|
export class VoteButtonsCompact extends Component<
|
||||||
VoteButtonsProps,
|
VoteButtonsProps,
|
||||||
VoteButtonsState
|
VoteButtonsState
|
||||||
|
@ -63,7 +85,7 @@ export class VoteButtonsCompact extends Component<
|
||||||
this.props.my_vote === 1 ? "text-info" : "text-muted"
|
this.props.my_vote === 1 ? "text-info" : "text-muted"
|
||||||
}`}
|
}`}
|
||||||
data-tippy-content={tippy(this.props.counts)}
|
data-tippy-content={tippy(this.props.counts)}
|
||||||
onClick={linkEvent(this.props.postListing, this.props.handleUpvote)}
|
onClick={linkEvent(this, handleUpvote)}
|
||||||
aria-label={I18NextService.i18n.t("upvote")}
|
aria-label={I18NextService.i18n.t("upvote")}
|
||||||
aria-pressed={this.props.my_vote === 1}
|
aria-pressed={this.props.my_vote === 1}
|
||||||
>
|
>
|
||||||
|
@ -85,10 +107,7 @@ export class VoteButtonsCompact extends Component<
|
||||||
className={`ms-2 btn-animate btn py-0 px-1 ${
|
className={`ms-2 btn-animate btn py-0 px-1 ${
|
||||||
this.props.my_vote === -1 ? "text-danger" : "text-muted"
|
this.props.my_vote === -1 ? "text-danger" : "text-muted"
|
||||||
}`}
|
}`}
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(this, handleDownvote)}
|
||||||
this.props.postListing,
|
|
||||||
this.props.handleDownvote
|
|
||||||
)}
|
|
||||||
data-tippy-content={tippy(this.props.counts)}
|
data-tippy-content={tippy(this.props.counts)}
|
||||||
aria-label={I18NextService.i18n.t("downvote")}
|
aria-label={I18NextService.i18n.t("downvote")}
|
||||||
aria-pressed={this.props.my_vote === -1}
|
aria-pressed={this.props.my_vote === -1}
|
||||||
|
@ -133,7 +152,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
|
||||||
className={`btn-animate btn btn-link p-0 ${
|
className={`btn-animate btn btn-link p-0 ${
|
||||||
this.props.my_vote == 1 ? "text-info" : "text-muted"
|
this.props.my_vote == 1 ? "text-info" : "text-muted"
|
||||||
}`}
|
}`}
|
||||||
onClick={linkEvent(this.props.postListing, this.props.handleUpvote)}
|
onClick={linkEvent(this, handleUpvote)}
|
||||||
data-tippy-content={I18NextService.i18n.t("upvote")}
|
data-tippy-content={I18NextService.i18n.t("upvote")}
|
||||||
aria-label={I18NextService.i18n.t("upvote")}
|
aria-label={I18NextService.i18n.t("upvote")}
|
||||||
aria-pressed={this.props.my_vote === 1}
|
aria-pressed={this.props.my_vote === 1}
|
||||||
|
@ -159,10 +178,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
|
||||||
className={`btn-animate btn btn-link p-0 ${
|
className={`btn-animate btn btn-link p-0 ${
|
||||||
this.props.my_vote == -1 ? "text-danger" : "text-muted"
|
this.props.my_vote == -1 ? "text-danger" : "text-muted"
|
||||||
}`}
|
}`}
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(this, handleDownvote)}
|
||||||
this.props.postListing,
|
|
||||||
this.props.handleDownvote
|
|
||||||
)}
|
|
||||||
data-tippy-content={I18NextService.i18n.t("downvote")}
|
data-tippy-content={I18NextService.i18n.t("downvote")}
|
||||||
aria-label={I18NextService.i18n.t("downvote")}
|
aria-label={I18NextService.i18n.t("downvote")}
|
||||||
aria-pressed={this.props.my_vote === -1}
|
aria-pressed={this.props.my_vote === -1}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { myAuthRequired, newVote } from "@utils/app";
|
import { myAuthRequired } from "@utils/app";
|
||||||
import { canShare, share } from "@utils/browser";
|
import { canShare, share } from "@utils/browser";
|
||||||
import { getExternalHost, getHttpBase } from "@utils/env";
|
import { getExternalHost, getHttpBase } from "@utils/env";
|
||||||
import {
|
import {
|
||||||
|
@ -43,7 +43,7 @@ import {
|
||||||
TransferCommunity,
|
TransferCommunity,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { relTags } from "../../config";
|
import { relTags } from "../../config";
|
||||||
import { BanType, PostFormParams, PurgeType, VoteType } from "../../interfaces";
|
import { BanType, PostFormParams, PurgeType } from "../../interfaces";
|
||||||
import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
|
import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
|
||||||
import { I18NextService, UserService } from "../../services";
|
import { I18NextService, UserService } from "../../services";
|
||||||
import { setupTippy } from "../../tippy";
|
import { setupTippy } from "../../tippy";
|
||||||
|
@ -78,8 +78,6 @@ interface PostListingState {
|
||||||
showBody: boolean;
|
showBody: boolean;
|
||||||
showReportDialog: boolean;
|
showReportDialog: boolean;
|
||||||
reportReason?: string;
|
reportReason?: string;
|
||||||
upvoteLoading: boolean;
|
|
||||||
downvoteLoading: boolean;
|
|
||||||
reportLoading: boolean;
|
reportLoading: boolean;
|
||||||
blockLoading: boolean;
|
blockLoading: boolean;
|
||||||
lockLoading: boolean;
|
lockLoading: boolean;
|
||||||
|
@ -142,8 +140,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
showMoreMobile: false,
|
showMoreMobile: false,
|
||||||
showBody: false,
|
showBody: false,
|
||||||
showReportDialog: false,
|
showReportDialog: false,
|
||||||
upvoteLoading: false,
|
|
||||||
downvoteLoading: false,
|
|
||||||
purgeLoading: false,
|
purgeLoading: false,
|
||||||
reportLoading: false,
|
reportLoading: false,
|
||||||
blockLoading: false,
|
blockLoading: false,
|
||||||
|
@ -169,8 +165,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
componentWillReceiveProps(nextProps: PostListingProps) {
|
componentWillReceiveProps(nextProps: PostListingProps) {
|
||||||
if (this.props !== nextProps) {
|
if (this.props !== nextProps) {
|
||||||
this.setState({
|
this.setState({
|
||||||
upvoteLoading: false,
|
|
||||||
downvoteLoading: false,
|
|
||||||
purgeLoading: false,
|
purgeLoading: false,
|
||||||
reportLoading: false,
|
reportLoading: false,
|
||||||
blockLoading: false,
|
blockLoading: false,
|
||||||
|
@ -604,10 +598,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
)}
|
)}
|
||||||
{mobile && !this.props.viewOnly && (
|
{mobile && !this.props.viewOnly && (
|
||||||
<VoteButtonsCompact
|
<VoteButtonsCompact
|
||||||
|
id={this.postView.post.id}
|
||||||
|
onVote={this.props.onPostVote}
|
||||||
postListing={this}
|
postListing={this}
|
||||||
enableDownvotes={this.props.enableDownvotes}
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
handleUpvote={this.handleUpvote}
|
|
||||||
handleDownvote={this.handleDownvote}
|
|
||||||
counts={this.postView.counts}
|
counts={this.postView.counts}
|
||||||
my_vote={this.postView.my_vote}
|
my_vote={this.postView.my_vote}
|
||||||
/>
|
/>
|
||||||
|
@ -1387,10 +1381,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
<article className="row post-container">
|
<article className="row post-container">
|
||||||
{!this.props.viewOnly && (
|
{!this.props.viewOnly && (
|
||||||
<VoteButtons
|
<VoteButtons
|
||||||
|
id={this.postView.post.id}
|
||||||
|
onVote={this.props.onPostVote}
|
||||||
postListing={this}
|
postListing={this}
|
||||||
enableDownvotes={this.props.enableDownvotes}
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
handleUpvote={this.handleUpvote}
|
|
||||||
handleDownvote={this.handleDownvote}
|
|
||||||
counts={this.postView.counts}
|
counts={this.postView.counts}
|
||||||
my_vote={this.postView.my_vote}
|
my_vote={this.postView.my_vote}
|
||||||
/>
|
/>
|
||||||
|
@ -1759,24 +1753,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
setupTippy();
|
setupTippy();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleUpvote(i: PostListing) {
|
|
||||||
i.setState({ upvoteLoading: true });
|
|
||||||
i.props.onPostVote({
|
|
||||||
post_id: i.postView.post.id,
|
|
||||||
score: newVote(VoteType.Upvote, i.props.post_view.my_vote),
|
|
||||||
auth: myAuthRequired(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleDownvote(i: PostListing) {
|
|
||||||
i.setState({ downvoteLoading: true });
|
|
||||||
i.props.onPostVote({
|
|
||||||
post_id: i.postView.post.id,
|
|
||||||
score: newVote(VoteType.Downvote, i.props.post_view.my_vote),
|
|
||||||
auth: myAuthRequired(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
get pointsTippy(): string {
|
get pointsTippy(): string {
|
||||||
const points = I18NextService.i18n.t("number_of_points", {
|
const points = I18NextService.i18n.t("number_of_points", {
|
||||||
count: Number(this.postView.counts.score),
|
count: Number(this.postView.counts.score),
|
||||||
|
|
Loading…
Reference in a new issue