linting

src/button/RaisedHandToggleButton.tsx

@@ -68,48 +68,52 @@ export function RaiseHandToggleButton({
   const isHandRaised = !!raisedHands[userId];
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
 
-  const toggleRaisedHand = useCallback(async () => {
+  const toggleRaisedHand = useCallback(() => {
-    if (isHandRaised) {
+    const raiseHand = async (): Promise<void> => {
-      if (!myReactionId) {
+      if (isHandRaised) {
-        logger.warn(`Hand raised but no reaction event to redact!`);
+        if (!myReactionId) {
-        return;
+          logger.warn(`Hand raised but no reaction event to redact!`);
-      }
+          return;
-      try {
+        }
-        setBusy(true);
+        try {
-        await client.redactEvent(rtcSession.room.roomId, myReactionId);
+          setBusy(true);
-        logger.debug("Redacted raise hand event");
+          await client.redactEvent(rtcSession.room.roomId, myReactionId);
-      } catch (ex) {
+          logger.debug("Redacted raise hand event");
-        logger.error("Failed to redact reaction event", myReactionId, ex);
+        } catch (ex) {
-      } finally {
+          logger.error("Failed to redact reaction event", myReactionId, ex);
-        setBusy(false);
+        } finally {
-      }
+          setBusy(false);
-    } else {
+        }
-      const myMembership = memberships.find((m) => m.sender === userId);
+      } else {
-      if (!myMembership?.eventId) {
+        const myMembership = memberships.find((m) => m.sender === userId);
-        logger.error("Cannot find own membership event");
+        if (!myMembership?.eventId) {
-        return;
+          logger.error("Cannot find own membership event");
-      }
+          return;
-      const parentEventId = myMembership.eventId;
+        }
-      try {
+        const parentEventId = myMembership.eventId;
-        setBusy(true);
+        try {
-        const reaction = await client.sendEvent(
+          setBusy(true);
-          rtcSession.room.roomId,
+          const reaction = await client.sendEvent(
-          EventType.Reaction,
+            rtcSession.room.roomId,
-          {
+            EventType.Reaction,
-            "m.relates_to": {
+            {
-              rel_type: RelationType.Annotation,
+              "m.relates_to": {
-              event_id: parentEventId,
+                rel_type: RelationType.Annotation,
-              key: "🖐️",
+                event_id: parentEventId,
+                key: "🖐️",
+              },
             },
-          },
+          );
-        );
+          logger.debug("Sent raise hand event", reaction.event_id);
-        logger.debug("Sent raise hand event", reaction.event_id);
+        } catch (ex) {
-      } catch (ex) {
+          logger.error("Failed to send reaction event", ex);
-        logger.error("Failed to send reaction event", ex);
+        } finally {
-      } finally {
+          setBusy(false);
-        setBusy(false);
+        }
       }
-    }
+    };
+
+    void raiseHand();
   }, [
     client,
     isHandRaised,

src/useReactions.test.tsx

@@ -214,17 +214,17 @@ describe("useReactions", () => {
   });
   // If the membership event changes for a user, we want to remove
   // the raised hand event.
-  test("will remove reaction when a member leaves the call", async () => {
+  test("will remove reaction when a member leaves the call", () => {
     const room = new MockRoom([createReaction(memberEventAlice)]);
     const rtcSession = new MockRTCSession(room);
     const { queryByRole } = render(
       <TestComponentWrapper rtcSession={rtcSession} />,
     );
     expect(queryByRole("list")?.children).to.have.lengthOf(1);
-    await act(() => rtcSession.testRemoveMember(memberUserIdAlice));
+    act(() => rtcSession.testRemoveMember(memberUserIdAlice));
     expect(queryByRole("list")?.children).to.have.lengthOf(0);
   });
-  test("will remove reaction when a member joins via a new event", async () => {
+  test("will remove reaction when a member joins via a new event", () => {
     const room = new MockRoom([createReaction(memberEventAlice)]);
     const rtcSession = new MockRTCSession(room);
     const { queryByRole } = render(
@@ -232,7 +232,7 @@ describe("useReactions", () => {
     );
     expect(queryByRole("list")?.children).to.have.lengthOf(1);
     // Simulate leaving and rejoining
-    await act(() => {
+    act(() => {
       rtcSession.testRemoveMember(memberUserIdAlice);
       rtcSession.testAddMember(memberUserIdAlice);
     });

src/useReactions.tsx

@@ -84,7 +84,7 @@ export const ReactionsProvider = ({
   const myReactionId = useMemo(
     (): string | null =>
       (myUserId && raisedHands[myUserId]?.reactionEventId) ?? null,
-    [raisedHands, room],
+    [raisedHands, myUserId],
   );
 
   // Reduce the data down for the consumers.
@@ -160,7 +160,14 @@ export const ReactionsProvider = ({
         }
       }
     }
-  }, [room, memberships, addRaisedHand, removeRaisedHand]);
+  }, [
+    room,
+    memberships,
+    myUserId,
+    raisedHands,
+    addRaisedHand,
+    removeRaisedHand,
+  ]);
 
   // This effect handles any *live* reaction/redactions in the room.
   useEffect(() => {