[native] switch getViewerAlreadySelectedMessageReactions to useGetVie…

…werAlreadySelectedMessageReactions

Summary: small follow up diff to address comment in D8288

Test Plan: confirmed that the already selected emojis still behaved as expected in the emoji keyboard

Reviewers: atul, kamil

Reviewed By: kamil

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D8410

lib/shared/reaction-utils.js

@@ -33,20 +33,22 @@ function stringForReactionList(reactions: ReactionInfo): string {
   return reactionText.join(' ');
 }
 
-function getViewerAlreadySelectedMessageReactions(
+function useViewerAlreadySelectedMessageReactions(
   reactions: ReactionInfo,
 ): $ReadOnlyArray<string> {
-  const alreadySelectedEmojis = [];
+  return React.useMemo(() => {
+    const alreadySelectedEmojis = [];
 
-  for (const reaction in reactions) {
-    const reactionInfo = reactions[reaction];
+    for (const reaction in reactions) {
+      const reactionInfo = reactions[reaction];
 
-    if (reactionInfo.viewerReacted) {
-      alreadySelectedEmojis.push(reaction);
+      if (reactionInfo.viewerReacted) {
+        alreadySelectedEmojis.push(reaction);
+      }
     }
-  }
 
-  return alreadySelectedEmojis;
+    return alreadySelectedEmojis;
+  }, [reactions]);
 }
 
 type MessageReactionListInfo = {
@@ -119,7 +121,7 @@ function useCanCreateReactionFromMessage(
 
 export {
   stringForReactionList,
-  getViewerAlreadySelectedMessageReactions,
+  useViewerAlreadySelectedMessageReactions,
   useMessageReactionsList,
   useCanCreateReactionFromMessage,
 };

native/chat/multimedia-message-tooltip-button.react.js

@@ -5,7 +5,7 @@ import Animated from 'react-native-reanimated';
 
 import { localIDPrefix } from 'lib/shared/message-utils.js';
 import {
-  getViewerAlreadySelectedMessageReactions,
+  useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
@@ -155,10 +155,8 @@ function MultimediaMessageTooltipButton(props: Props): React.Node {
     [sendReaction, dismissTooltip],
   );
 
-  const alreadySelectedEmojis = React.useMemo(
-    () => getViewerAlreadySelectedMessageReactions(item.reactions),
-    [item.reactions],
-  );
+  const alreadySelectedEmojis =
+    useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <>

native/chat/robotext-message-tooltip-button.react.js

@@ -5,7 +5,7 @@ import Animated from 'react-native-reanimated';
 
 import { localIDPrefix } from 'lib/shared/message-utils.js';
 import {
-  getViewerAlreadySelectedMessageReactions,
+  useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
@@ -138,10 +138,8 @@ function RobotextMessageTooltipButton(props: Props): React.Node {
     [sendReaction, dismissTooltip],
   );
 
-  const alreadySelectedEmojis = React.useMemo(
-    () => getViewerAlreadySelectedMessageReactions(item.reactions),
-    [item.reactions],
-  );
+  const alreadySelectedEmojis =
+    useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <>

native/chat/text-message-tooltip-button.react.js

@@ -5,7 +5,7 @@ import Animated from 'react-native-reanimated';
 
 import { localIDPrefix } from 'lib/shared/message-utils.js';
 import {
-  getViewerAlreadySelectedMessageReactions,
+  useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
@@ -152,10 +152,8 @@ function TextMessageTooltipButton(props: Props): React.Node {
     [sendReaction, dismissTooltip],
   );
 
-  const alreadySelectedEmojis = React.useMemo(
-    () => getViewerAlreadySelectedMessageReactions(item.reactions),
-    [item.reactions],
-  );
+  const alreadySelectedEmojis =
+    useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <MessageListContextProvider threadInfo={threadInfo}>