Fixed reaction count on comments (#4243)

* Fixed reaction count on comments

* Fixed commentReactions event emitter to only update corresponding comments

packages/commonwealth/client/scripts/controllers/server/reactionCounts.ts

@@ -1,5 +1,6 @@
 /* eslint-disable dot-notation */
 import { notifyError } from 'controllers/app/notifications';
+import { EventEmitter } from 'events';
 import proposalIdToEntity from 'helpers/proposalIdToEntity';
 /* eslint-disable no-restricted-syntax */
 import $ from 'jquery';
@@ -30,6 +31,7 @@ export const modelFromServer = (reactionCount) => {
 
 // TODO: Graham 4/24/22: File + class needs to be named ReactionCounts (plural) following convention
 class ReactionCountController {
+  public isFetched = new EventEmitter();
   private _store: ReactionCountsStore = new ReactionCountsStore();
   public get store() {
     return this._store;

packages/commonwealth/client/scripts/views/components/ReactionButton/CommentReactionButton.tsx

@@ -6,6 +6,7 @@ import TopicGateCheck from 'controllers/chain/ethereum/gatedTopic';
 import app from 'state';
 import type ChainInfo from '../../../models/ChainInfo';
 import type Comment from '../../../models/Comment';
+import ReactionCount from '../../../models/ReactionCount';
 import { CWIconButton } from '../component_kit/cw_icon_button';
 import { CWTooltip } from '../component_kit/cw_popover/cw_tooltip';
 import { CWText } from '../component_kit/cw_text';
@@ -31,8 +32,24 @@ export const CommentReactionButton = ({
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [reactors, setReactors] = useState<Array<any>>([]);
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [reactionCounts, setReactionCounts] = useState<ReactionCount<any>>();
+
+  useEffect(() => {
+    const redrawFunction = (comment_id) => {
+      if (comment_id !== comment.id) {
+        return;
+      }
+
+      setReactionCounts(app.reactionCounts.store.getByPost(comment));
+    };
+
+    app.reactionCounts.isFetched.on('redraw', redrawFunction);
+
+    return () => {
+      app.reactionCounts.isFetched.off('redraw', redrawFunction);
+    };
+  });
 
-  const reactionCounts = app.reactionCounts.store.getByPost(comment);
   const { likes = 0, hasReacted } = reactionCounts || {};
 
   // token balance check if needed
@@ -66,6 +83,7 @@ export const CommentReactionButton = ({
           reactors.filter(({ Address }) => Address.address !== userAddress)
         );
 
+        setReactionCounts(app.reactionCounts.store.getByPost(comment));
         setIsLoading(false);
       });
   };
@@ -83,6 +101,7 @@ export const CommentReactionButton = ({
           },
         ]);
 
+        setReactionCounts(app.reactionCounts.store.getByPost(comment));
         setIsLoading(false);
       });
   };

packages/commonwealth/client/scripts/views/pages/view_thread/ViewThreadPage.tsx

@@ -279,6 +279,8 @@ const ViewThreadPage = ({ identifier }: ViewThreadPageProps) => {
             app.reactionCounts.store.add(
               modelReactionCountFromServer({ ...rc, id })
             );
+
+            app.reactionCounts.isFetched.emit('redraw', rc.comment_id);
           }
         })
         .catch(() => {