From dab1eff31458f5a1beacb9bc385759ecc2bc4bd9 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Fri, 16 Feb 2024 11:01:40 +0300
Subject: [PATCH] rating-reactivity-fixing

---
 src/components/Article/RatingControl.tsx | 40 +++++++++++++++---------
 1 file changed, 25 insertions(+), 15 deletions(-)

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