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

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

@ -58,31 +58,30 @@ export const RatingControl = (props: RatingControlProps) => {
createEffect( createEffect(
on( on(
reactionEntities, reactionEntities,
() => { (reactions) => {
const ratings = Object.values(reactionEntities()).filter(r => !r.reply_to); const ratings = Object.values(reactions).filter((r) => !r?.reply_to)
const likes = ratings.filter(rating => rating.kind === 'LIKE').length; const likes = ratings.filter((rating) => rating.kind === 'LIKE').length
const dislikes = ratings.filter(rating => rating.kind === 'DISLIKE').length; const dislikes = ratings.filter((rating) => rating.kind === 'DISLIKE').length
const total = likes - dislikes; const total = likes - dislikes
setTotal(total); setTotal(total)
}, },
{ defer: true } { defer: true },
),
) )
);
createEffect( createEffect(
on( on(
[() => props.ratings, author], [() => props.ratings, author],
([reactions, me]) => { ([reactions, me]) => {
console.debug('[RatingControl] on reactions update'); console.debug('[RatingControl] on reactions update')
const ratingVotes = Object.values(reactions).filter((r) => !r.reply_to); const ratingVotes = Object.values(reactions).filter((r) => !r.reply_to)
setRatings((_) => ratingVotes.sort(byCreated)); setRatings((_) => ratingVotes.sort(byCreated))
setMyRate((_) => ratingVotes.find((r) => r.created_by.id === me?.id)); const myReaction = reactions.find((r) => r.created_by.id === me?.id)
setMyRate((_) => myReaction)
}, },
{ defer: true }, { defer: true },
), ),
); )
const handleRatingChange = (voteKind: ReactionKind) => { const handleRatingChange = (voteKind: ReactionKind) => {
requireAuthentication(async () => { requireAuthentication(async () => {
@ -127,14 +126,14 @@ export const RatingControl = (props: RatingControlProps) => {
return props.comment ? ( return props.comment ? (
<div <div
class={clsx(stylesComment.commentRatingValue, { class={clsx(stylesComment.commentRatingValue, {
[stylesComment.commentRatingPositive]: total() > 0, [stylesComment.commentRatingPositive]: props.shout?.stat.rating > 0,
[stylesComment.commentRatingNegative]: total() < 0, [stylesComment.commentRatingNegative]: props.shout?.stat.rating < 0,
})} })}
> >
{total()} {props.shout?.stat.rating}
</div> </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 { createStore, reconcile } from 'solid-js/store'
import { apiClient } from '../graphql/client/core' import { apiClient } from '../graphql/client/core'
@ -8,7 +8,7 @@ import { Reaction, ReactionBy, ReactionInput, ReactionKind } from '../graphql/sc
import { useSession } from './session' import { useSession } from './session'
type ReactionsContextType = { type ReactionsContextType = {
reactionEntities: Record<number, Reaction> reactionEntities: Accessor<Record<number, Reaction>>
loadReactionsBy: ({ loadReactionsBy: ({
by, by,
limit, limit,
@ -30,7 +30,7 @@ export function useReactions() {
} }
export const ReactionsProvider = (props: { children: JSX.Element }) => { 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 { author } = useSession()
const loadReactionsBy = async ({ const loadReactionsBy = async ({
@ -99,7 +99,10 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
const updateReaction = async (input: ReactionInput): Promise<void> => { const updateReaction = async (input: ReactionInput): Promise<void> => {
const reaction = await apiClient.updateReaction(input) const reaction = await apiClient.updateReaction(input)
setReactionEntities(reaction.id, reaction) setReactionEntities((rrr) => {
rrr[reaction.id] = reaction
return rrr
})
} }
onCleanup(() => setReactionEntities(reconcile({}))) onCleanup(() => setReactionEntities(reconcile({})))