From 96f72f00ee627c2651ed7ebe49259352c31b9b59 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Sun, 3 Mar 2024 20:06:58 +0300
Subject: [PATCH] reactions-context-fix

---
 src/components/Article/RatingControl.tsx | 39 ++++++++++++------------
 src/context/reactions.tsx                | 13 +++++---
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/Article/RatingControl.tsx b/src/components/Article/RatingControl.tsx
index 85e0bc41..8e424057 100644
--- a/src/components/Article/RatingControl.tsx
+++ b/src/components/Article/RatingControl.tsx
@@ -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>
     )
   })
 
diff --git a/src/context/reactions.tsx b/src/context/reactions.tsx
index 88f6508d..1fe91de6 100644
--- a/src/context/reactions.tsx
+++ b/src/context/reactions.tsx
@@ -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({})))