Fix, currently the GridTile is broken.

src/button/ReactionToggleButton.test.tsx

@@ -83,7 +83,7 @@ test("Can raise hand", async () => {
   expect(container).toMatchSnapshot();
 });
 
-test("Can lower hand", async () => {
+test.only("Can lower hand", async () => {
   const user = userEvent.setup();
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);

src/button/ReactionToggleButton.tsx

@@ -223,7 +223,6 @@ export function ReactionToggleButton({
   const { t } = useTranslation();
   const { raisedHands, lowerHand, reactions } = useReactions();
   const [busy, setBusy] = useState(false);
-  const userId = client.getUserId()!;
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const [showReactionsMenu, setShowReactionsMenu] = useState(false);
   const [errorText, setErrorText] = useState<string>();
@@ -238,6 +237,8 @@ export function ReactionToggleButton({
     [memberships],
   )?.eventId;
 
+  console.log(memberships);
+
   useEffect(() => {
     // Clear whenever the reactions menu state changes.
     setErrorText(undefined);

src/tile/GridTile.tsx

@@ -112,9 +112,14 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       </>
     );
 
-    const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""];
+    console.log(vm.member);
+
+    console.log(vm.member?.events.member?.getId(), raisedHands, reactions);
+
+    const handRaised: Date | undefined =
+      raisedHands[vm.member?.events.member?.getId() ?? ""];
     const currentReaction: ReactionOption | undefined =
-      reactions[vm.member?.userId ?? ""];
+      reactions[vm.member?.events.member?.getId() ?? ""];
     const raisedHandOnClick =
       vm.local && handRaised ? (): void => void lowerHand() : undefined;
 

src/useReactions.tsx

@@ -199,6 +199,8 @@ export const ReactionsProvider = ({
       if (event.getType() === ElementCallReactionEventType) {
         const content: ECallReactionEventContent = event.getContent();
 
+        console.log(latestMemberships, content);
+
         const membershipEventId = content?.["m.relates_to"]?.event_id;
         // Check to see if this reaction was made to a membership event (and the
         // sender of the reaction matches the membership)
@@ -318,19 +320,22 @@ export const ReactionsProvider = ({
     latestRaisedHands,
   ]);
 
-  const myMembershipEventId = useMemo(
+  const myMembershipEventId = useMemo(() => {
-    () =>
+    console.log(
-      memberships.find(
+      room.client.getUserId(),
-        (m) =>
+      room.client.getDeviceId(),
-          clientState?.state === "valid" &&
+      memberships,
-          m.sender === clientState.authenticated?.client.getUserId() &&
+    );
-          m.deviceId === clientState.authenticated?.client.getDeviceId(),
+    return memberships.find(
-      ),
+      (m) =>
-    [memberships],
+        m.sender === room.client.getUserId() &&
-  )?.eventId;
+        m.deviceId === room.client.getDeviceId(),
+    );
+  }, [memberships, room])?.eventId;
 
   const lowerHand = useCallback(async () => {
     if (!myMembershipEventId || !raisedHands[myMembershipEventId]) {
+      logger.warn(`No membership event for us!`, myMembershipEventId);
       return;
     }
     const myReactionId = raisedHands[myMembershipEventId].reactionEventId;

src/utils/testReactions.tsx

@@ -41,6 +41,8 @@ export const TestReactionsWrapper = ({
   );
 };
 
+const OWN_DEVICE_ID = "OWN_DEVICE";
+
 export class MockRTCSession extends EventEmitter {
   public memberships: {
     sender: string;
@@ -54,12 +56,14 @@ export class MockRTCSession extends EventEmitter {
     membership: Record<string, string>,
   ) {
     super();
-    this.memberships = Object.entries(membership).map(([eventId, sender]) => ({
+    this.memberships = Object.entries(membership).map(
-      sender,
+      ([eventId, sender], index) => ({
-      eventId,
+        sender,
-      deviceId: randomUUID(),
+        eventId,
-      createdTs: (): Date => new Date(),
+        deviceId: index === 0 ? OWN_DEVICE_ID : randomUUID(),
-    }));
+        createdTs: (): Date => new Date(),
+      }),
+    );
   }
 
   public testRemoveMember(userId: string): void {
@@ -121,7 +125,6 @@ export class MockRoom extends EventEmitter {
 
   public constructor(
     private readonly ownUserId: string,
-    private readonly ownDeviceId: string,
     private readonly existingRelations: MatrixEvent[] = [],
   ) {
     super();
@@ -130,7 +133,7 @@ export class MockRoom extends EventEmitter {
   public get client(): MatrixClient {
     return {
       getUserId: (): string => this.ownUserId,
-      getDeviceId: (): string => this.ownDeviceId,
+      getDeviceId: (): string => OWN_DEVICE_ID,
       sendEvent: async (
         ...props: Parameters<MatrixClient["sendEvent"]>
       ): ReturnType<MatrixClient["sendEvent"]> => {