consider membership change with reason change (#1441)

src/app/hooks/useMemberEventParser.tsx

@@ -3,6 +3,7 @@ import { IconSrc, Icons } from 'folds';
 import { MatrixEvent } from 'matrix-js-sdk';
 import { IMemberContent, Membership } from '../../types/matrix/room';
 import { getMxIdLocalPart } from '../utils/matrix';
+import { isMembershipChanged } from '../utils/room';
 
 export type ParsedResult = {
   icon: IconSrc;
@@ -27,7 +28,7 @@ export const useMemberEventParser = (): MemberEventParser => {
     const senderName = getMxIdLocalPart(senderId);
     const userName = content.displayname || getMxIdLocalPart(userId);
 
-    if (content.membership !== prevContent.membership) {
+    if (isMembershipChanged(mEvent)) {
       if (content.membership === Membership.Invite) {
         if (prevContent.membership === Membership.Knock) {
           return {

src/app/hooks/useRoomLatestRenderedEvent.ts

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
 import { MessageEvent, StateEvent } from '../../types/matrix/room';
+import { isMembershipChanged } from '../utils/room';
 
 export const useRoomLatestRenderedEvent = (room: Room) => {
   const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
@@ -20,7 +21,7 @@ export const useRoomLatestRenderedEvent = (room: Room) => {
         if (!evt) continue;
         if (evt.isRelation()) continue;
         if (evt.getType() === StateEvent.RoomMember) {
-          const membershipChanged = evt.getContent().membership !== evt.getPrevContent().membership;
+          const membershipChanged = isMembershipChanged(evt);
           if (membershipChanged && hideMembershipEvents) continue;
           if (!membershipChanged && hideNickAvatarEvents) continue;
           return evt;

src/app/organisms/room/RoomTimeline.tsx

@@ -83,6 +83,7 @@ import {
   decryptAllTimelineEvent,
   getMemberDisplayName,
   getReactionContent,
+  isMembershipChanged,
 } from '../../utils/room';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
@@ -1311,8 +1312,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       );
     },
     renderRoomMember: (mEventId, mEvent, item) => {
-      const membershipChanged =
+      const membershipChanged = isMembershipChanged(mEvent);
-        mEvent.getContent().membership !== mEvent.getPrevContent().membership;
       if (membershipChanged && hideMembershipEvents) return null;
       if (!membershipChanged && hideNickAvatarEvents) return null;
 

src/app/utils/room.ts

@@ -278,6 +278,10 @@ export const getMemberAvatarMxc = (room: Room, userId: string): string | undefin
   return member?.getMxcAvatarUrl();
 };
 
+export const isMembershipChanged = (mEvent: MatrixEvent): boolean =>
+  mEvent.getContent().membership !== mEvent.getPrevContent().membership ||
+  mEvent.getContent().reason !== mEvent.getPrevContent().reason;
+
 export const decryptAllTimelineEvent = async (mx: MatrixClient, timeline: EventTimeline) => {
   const crypto = mx.getCrypto();
   if (!crypto) return;