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

reactive-fix

Browse Source
This commit is contained in:
Untone 2024-02-15 16:41:14 +03:00
parent e336754226
commit 09a907d123
1 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,19 +28,30 @@ export const RatingControl = (props: RatingControlProps) => {
const [isLoading, setIsLoading] = createSignal(false) const [isLoading, setIsLoading] = createSignal(false)
const [ratings, setRatings] = createSignal<Reaction[]>([]) const [ratings, setRatings] = createSignal<Reaction[]>([])
const [myRate, setMyRate] = createSignal<Reaction | undefined>() const [myRate, setMyRate] = createSignal<Reaction | undefined>()
const [total, setTotal] = createSignal(props.shout?.stat?.rating || 0) const [total, setTotal] = createSignal(0)
createEffect(
on(
[() => props.comment, () => props.shout],
([comment, shout]) => {
setTotal(comment?.stat?.rating || shout?.stat?.rating || 0)
},
{ defer: true },
),
)
createEffect( createEffect(
on( on(
[() => props.ratings, author], [() => props.ratings, author],
([reactions, me]) => { ([reactions, me]) => {
console.debug('[ShoutRatingControl] on reactions update') console.debug('[RatingControl] on reactions update')
const shoutRatings = Object.values(reactions).filter((r) => !r.reply_to) const ratingVotes = Object.values(reactions).filter((r) => !r.reply_to)
setRatings((_) => shoutRatings.sort(byCreated)) setRatings((_) => ratingVotes.sort(byCreated))
setMyRate((_) => shoutRatings.find((r) => r.created_by.id === me?.id)) setMyRate((_) => ratingVotes.find((r) => r.created_by.id === me?.id))
// Extract likes and dislikes from shoutRatings using map // Extract likes and dislikes from shoutRatings using map
const likes = shoutRatings.filter((rating) => rating.kind === 'LIKE').length const likes = ratingVotes.filter((rating) => rating.kind === 'LIKE').length
const dislikes = shoutRatings.filter((rating) => rating.kind === 'DISLIKE').length const dislikes = ratingVotes.filter((rating) => rating.kind === 'DISLIKE').length
// Calculate the total // Calculate the total
const total = likes - dislikes const total = likes - dislikes
@ -55,15 +66,15 @@ export const RatingControl = (props: RatingControlProps) => {
setIsLoading(true) setIsLoading(true)
if (!myRate()) { if (!myRate()) {
console.debug('[ShoutRatingControl.handleRatingChange] shout wasnt voted by you before', myRate()) console.debug('[RatingControl.handleRatingChange] wasnt voted by you before', myRate())
const rateInput = { kind: voteKind, shout: props.shout.id } const rateInput = { kind: voteKind, shout: props.shout?.id }
const fakeId = Date.now() + Math.floor(Math.random() * 1000) const fakeId = Date.now() + Math.floor(Math.random() * 1000)
const savedRatings = [...props.ratings] // const savedRatings = [...props.ratings]
mergeProps(props.ratings, [...props.ratings, { ...rateInput, id: fakeId, created_by: author() }]) mergeProps(props.ratings, [...props.ratings, { ...rateInput, id: fakeId, created_by: author() }])
await createReaction(rateInput) await createReaction(rateInput)
console.debug(`[ShoutRatingControl.handleRatingChange] your ${voteKind} vote was created`) console.debug(`[RatingControl.handleRatingChange] your ${voteKind} vote was created`)
} else { } else {
console.debug('[ShoutRatingControl.handleRatingChange] shout already has your vote', myRate()) console.debug('[RatingControl.handleRatingChange] already has your vote', myRate())
const oppositeKind = voteKind === ReactionKind.Like ? ReactionKind.Dislike : ReactionKind.Like const oppositeKind = voteKind === ReactionKind.Like ? ReactionKind.Dislike : ReactionKind.Like
if (myRate()?.kind === oppositeKind) { if (myRate()?.kind === oppositeKind) {
mergeProps( mergeProps(
@ -72,16 +83,16 @@ export const RatingControl = (props: RatingControlProps) => {
) )
await deleteReaction(myRate().id) await deleteReaction(myRate().id)
setMyRate(undefined) setMyRate(undefined)
console.debug(`[ShoutRatingControl.handleRatingChange] your ${oppositeKind} vote was removed`) console.debug(`[RatingControl.handleRatingChange] your ${oppositeKind} vote was removed`)
} }
if (myRate()?.kind === voteKind) { if (myRate()?.kind === voteKind) {
console.debug(`[ShoutRatingControl.handleRatingChange] cant vote ${voteKind} twice`) console.debug(`[RatingControl.handleRatingChange] cant vote ${voteKind} twice`)
} }
} }
const ratings = await loadReactionsBy({ by: { shout: props.shout.slug, rating: true } }) const ratings = await loadReactionsBy({ by: { shout: props.shout?.slug, rating: true } })
mergeProps(props.ratings, ratings) mergeProps(props.ratings, ratings)
const s = await loadShout(props.shout.slug) const s = await loadShout(props.shout?.slug)
mergeProps(props.shout, s) mergeProps(props.shout, s)
setIsLoading(false) setIsLoading(false)
}, 'vote') }, 'vote')
@ -93,11 +104,11 @@ export const RatingControl = (props: RatingControlProps) => {
return props.comment ? ( return props.comment ? (
<div <div
class={clsx(stylesComment.commentRatingValue, { class={clsx(stylesComment.commentRatingValue, {
[stylesComment.commentRatingPositive]: props.comment.stat.rating > 0, [stylesComment.commentRatingPositive]: total() > 0,
[stylesComment.commentRatingNegative]: props.comment.stat.rating < 0, [stylesComment.commentRatingNegative]: total() < 0,
})} })}
> >
{props.comment.stat.rating || 0} {total()}
</div> </div>
) : ( ) : (
<span class={stylesShout.ratingValue}>{total()}</span> <span class={stylesShout.ratingValue}>{total()}</span>