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

reactions-context-fix

Browse Source
This commit is contained in:
Untone 2024-03-03 20:06:58 +03:00
parent f0bddfe461
commit 96f72f00ee
2 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,31 +58,30 @@ export const RatingControl = (props: RatingControlProps) => {
createEffect(
on(
reactionEntities,
() => {
const ratings = Object.values(reactionEntities()).filter(r => !r.reply_to);
const likes = ratings.filter(rating => rating.kind === 'LIKE').length;
const dislikes = ratings.filter(rating => rating.kind === 'DISLIKE').length;
const total = likes - dislikes;
setTotal(total);
(reactions) => {
const ratings = Object.values(reactions).filter((r) => !r?.reply_to)
const likes = ratings.filter((rating) => rating.kind === 'LIKE').length
const dislikes = ratings.filter((rating) => rating.kind === 'DISLIKE').length
const total = likes - dislikes
setTotal(total)
},
{ defer: true }
)
);
{ defer: true },
),
)
createEffect(
on(
[() => props.ratings, author],
([reactions, me]) => {
console.debug('[RatingControl] on reactions update');
const ratingVotes = Object.values(reactions).filter((r) => !r.reply_to);
setRatings((_) => ratingVotes.sort(byCreated));
setMyRate((_) => ratingVotes.find((r) => r.created_by.id === me?.id));
console.debug('[RatingControl] on reactions update')
const ratingVotes = Object.values(reactions).filter((r) => !r.reply_to)
setRatings((_) => ratingVotes.sort(byCreated))
const myReaction = reactions.find((r) => r.created_by.id === me?.id)
setMyRate((_) => myReaction)
},
{ defer: true },
),
);
)
const handleRatingChange = (voteKind: ReactionKind) => {
requireAuthentication(async () => {
@ -127,14 +126,14 @@ export const RatingControl = (props: RatingControlProps) => {
return props.comment ? (
<div
class={clsx(stylesComment.commentRatingValue, {
[stylesComment.commentRatingPositive]: total() > 0,
[stylesComment.commentRatingNegative]: total() < 0,
[stylesComment.commentRatingPositive]: props.shout?.stat.rating > 0,
[stylesComment.commentRatingNegative]: props.shout?.stat.rating < 0,
})}
>
{total()}
{props.shout?.stat.rating}
</div>
) : (
<span class={stylesShout.ratingValue}>{total()}</span>
<span class={stylesShout.ratingValue}>{props.shout?.stat.rating}</span>
)
})

13
src/context/reactions.tsx
View File

@ -1,6 +1,6 @@
import type { JSX } from 'solid-js'
import type { JSX, Accessor } from 'solid-js'
import { createContext, onCleanup, useContext } from 'solid-js'
import { createSignal, createContext, onCleanup, useContext } from 'solid-js'
import { createStore, reconcile } from 'solid-js/store'
import { apiClient } from '../graphql/client/core'
@ -8,7 +8,7 @@ import { Reaction, ReactionBy, ReactionInput, ReactionKind } from '../graphql/sc
import { useSession } from './session'
type ReactionsContextType = {
reactionEntities: Record<number, Reaction>
reactionEntities: Accessor<Record<number, Reaction>>
loadReactionsBy: ({
by,
limit,
@ -30,7 +30,7 @@ export function useReactions() {
}
export const ReactionsProvider = (props: { children: JSX.Element }) => {
const [reactionEntities, setReactionEntities] = createStore<Record<number, Reaction>>({})
const [reactionEntities, setReactionEntities] = createSignal<Record<number, Reaction>|undefined>()
const { author } = useSession()
const loadReactionsBy = async ({
@ -99,7 +99,10 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
const updateReaction = async (input: ReactionInput): Promise<void> => {
const reaction = await apiClient.updateReaction(input)
setReactionEntities(reaction.id, reaction)
setReactionEntities((rrr) => {
rrr[reaction.id] = reaction
return rrr
})
}
onCleanup(() => setReactionEntities(reconcile({})))