discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

rating-reactivity-fixing

Browse Source
This commit is contained in:
Untone 2024-02-16 11:01:40 +03:00
parent 54ef10307e
commit dab1eff314
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Article/RatingControl.tsx
View File

@ -32,9 +32,19 @@ export const RatingControl = (props: RatingControlProps) => {
createEffect( createEffect(
on( on(
[() => props.comment, () => props.shout], () => props.comment,
([comment, shout]) => { (comment) => {
setTotal(comment?.stat?.rating || shout?.stat?.rating || 0) setTotal(comment?.stat?.rating || 0)
},
{ defer: true },
),
)
createEffect(
on(
() => props.shout,
(shout) => {
setTotal(shout?.stat?.rating || 0)
}, },
{ defer: true }, { defer: true },
), ),
@ -97,10 +107,11 @@ export const RatingControl = (props: RatingControlProps) => {
setIsLoading(false) setIsLoading(false)
}, 'vote') }, 'vote')
} }
const isNotDisliked = createMemo(() => !myRate() || myRate()?.kind === ReactionKind.Dislike) const isNotDisliked = createMemo(() => !myRate() || myRate()?.kind === ReactionKind.Dislike)
const isNotLiked = createMemo(() => !myRate() || myRate()?.kind === ReactionKind.Like) const isNotLiked = createMemo(() => !myRate() || myRate()?.kind === ReactionKind.Like)
const getTrigger = () => { const getTrigger = createMemo(() => {
return props.comment ? ( return props.comment ? (
<div <div
class={clsx(stylesComment.commentRatingValue, { class={clsx(stylesComment.commentRatingValue, {
@ -113,18 +124,18 @@ export const RatingControl = (props: RatingControlProps) => {
) : ( ) : (
<span class={stylesShout.ratingValue}>{total()}</span> <span class={stylesShout.ratingValue}>{total()}</span>
) )
} })
return ( return (
<div class={clsx(props.comment ? stylesComment.commentRating : stylesShout.rating, props.class)}> <div class={clsx(props.comment ? stylesComment.commentRating : stylesShout.rating, props.class)}>
<button <button
onClick={() => handleRatingChange(ReactionKind.Dislike)} onClick={() => handleRatingChange(ReactionKind.Dislike)}
disabled={isLoading()} disabled={isLoading()}
class={ class={
props.comment props.comment ? clsx(stylesComment.commentRatingControl,
? clsx(stylesComment.commentRatingControl, stylesComment.commentRatingControlUp, { stylesComment.commentRatingControlUp,
[stylesComment.voted]: myRate()?.kind === 'LIKE', { [stylesComment.voted]: myRate()?.kind === 'LIKE'}
}) ) : ''
: ''
} }
> >
<Show when={!props.comment}> <Show when={!props.comment}>
@ -146,11 +157,10 @@ export const RatingControl = (props: RatingControlProps) => {
onClick={() => handleRatingChange(ReactionKind.Like)} onClick={() => handleRatingChange(ReactionKind.Like)}
disabled={isLoading()} disabled={isLoading()}
class={ class={
props.comment props.comment ? clsx(stylesComment.commentRatingControl,
? clsx(stylesComment.commentRatingControl, stylesComment.commentRatingControlDown, { stylesComment.commentRatingControlDown,
[stylesComment.voted]: myRate()?.kind === 'DISLIKE', { [stylesComment.voted]: myRate()?.kind === 'DISLIKE'}
}) ) : ''
: ''
} }
> >
<Show when={!props.comment}> <Show when={!props.comment}>