Wire up UserProfilesStores in permalinks

Author: weeman1337

src/hooks/usePermalinkMember.ts

@@ -64,6 +64,15 @@ const determineUserId = (
     return null;
 };
 
+/**
+ * Tries to determine a RoomMember.
+ *
+ * @param userId - User Id to get the member for
+ * @param targetRoom - permalink target room
+ * @returns RoomMember of the target room if it exists.
+ *          If sharing at least one room with the user, then the result will be the profile fetched via API.
+ *          null in all other cases.
+ */
 const determineMember = (userId: string, targetRoom: Room): RoomMember | null => {
     const targetRoomMember = targetRoom.getMember(userId);
 

test/components/views/elements/Pill-test.tsx

@@ -33,6 +33,7 @@ import {
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import { Action } from "../../../../src/dispatcher/actions";
 import { ButtonEvent } from "../../../../src/components/views/elements/AccessibleButton";
+import { SdkContextClass } from "../../../../src/contexts/SDKContext";
 
 describe("<Pill>", () => {
     let client: Mocked<MatrixClient>;
@@ -47,6 +48,7 @@ describe("<Pill>", () => {
     let space1: Room;
     const user1Id = "@user1:example.com";
     const user2Id = "@user2:example.com";
+    const user3Id = "@user3:example.com";
     let renderResult: RenderResult;
     let pillParentClickHandler: (e: ButtonEvent) => void;
 
@@ -72,6 +74,7 @@ describe("<Pill>", () => {
 
     beforeEach(() => {
         client = mocked(stubClient());
+        SdkContextClass.instance.client = client;
         DMRoomMap.makeShared();
         room1 = new Room(room1Id, client, user1Id);
         room1.name = "Room 1";
@@ -93,12 +96,13 @@ describe("<Pill>", () => {
         room1.addLiveEvents([room1Message]);
 
         room2 = new Room(room2Id, client, user1Id);
+        room2.currentState.setStateEvents([mkRoomMemberJoinEvent(user2Id, room2Id)]);
         room2.name = "Room 2";
 
         space1 = new Room(space1Id, client, client.getSafeUserId());
         space1.name = "Space 1";
 
-        client.getRooms.mockReturnValue([room1, space1]);
+        client.getRooms.mockReturnValue([room1, room2, space1]);
         client.getRoom.mockImplementation((roomId: string) => {
             if (roomId === room1.roomId) return room1;
             if (roomId === room2.roomId) return room2;
@@ -204,7 +208,7 @@ describe("<Pill>", () => {
         });
     });
 
-    it("should render the expected pill for a user not in the room", async () => {
+    it("should render the expected pill for a known user not in the room", async () => {
         renderPill({
             room: room1,
             url: permalinkPrefix + user2Id,
@@ -218,6 +222,20 @@ describe("<Pill>", () => {
         expect(renderResult.asFragment()).toMatchSnapshot();
     });
 
+    it("should render the expected pill for an uknown user not in the room", async () => {
+        renderPill({
+            room: room1,
+            url: permalinkPrefix + user3Id,
+        });
+
+        // wait for profile query via API
+        await act(async () => {
+            await flushPromises();
+        });
+
+        expect(renderResult.asFragment()).toMatchSnapshot();
+    });
+
     it("should not render anything if the type cannot be detected", () => {
         renderPill({
             url: permalinkPrefix,

test/components/views/elements/__snapshots__/Pill-test.tsx.snap

@@ -63,13 +63,13 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Pill> should render the expected pill for a message in another room 1`] = `
+exports[`<Pill> should render the expected pill for a known user not in the room 1`] = `
 <DocumentFragment>
   <div>
     <bdi>
       <a
-        class="mx_Pill mx_EventPill"
-        href="https://matrix.to/#/!room1:example.com/$123-456"
+        class="mx_Pill mx_UserPill"
+        href="https://matrix.to/#/@user2:example.com"
       >
         <span
           aria-hidden="true"
@@ -81,7 +81,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
             class="mx_BaseAvatar_initial"
             style="font-size: 10.4px; width: 16px; line-height: 16px;"
           >
-            R
+            U
           </span>
           <img
             alt=""
@@ -95,15 +95,15 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
         <span
           class="mx_Pill_text"
         >
-          Message in Room 1
+          User 2
         </span>
       </a>
     </bdi>
   </div>
 </DocumentFragment>
 `;
 
-exports[`<Pill> should render the expected pill for a message in the same room 1`] = `
+exports[`<Pill> should render the expected pill for a message in another room 1`] = `
 <DocumentFragment>
   <div>
     <bdi>
@@ -121,7 +121,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
             class="mx_BaseAvatar_initial"
             style="font-size: 10.4px; width: 16px; line-height: 16px;"
           >
-            U
+            R
           </span>
           <img
             alt=""
@@ -135,21 +135,21 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
         <span
           class="mx_Pill_text"
         >
-          Message from User 1
+          Message in Room 1
         </span>
       </a>
     </bdi>
   </div>
 </DocumentFragment>
 `;
 
-exports[`<Pill> should render the expected pill for a room alias 1`] = `
+exports[`<Pill> should render the expected pill for a message in the same room 1`] = `
 <DocumentFragment>
   <div>
     <bdi>
       <a
-        class="mx_Pill mx_RoomPill"
-        href="https://matrix.to/#/#room1:example.com"
+        class="mx_Pill mx_EventPill"
+        href="https://matrix.to/#/!room1:example.com/$123-456"
       >
         <span
           aria-hidden="true"
@@ -161,7 +161,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
             class="mx_BaseAvatar_initial"
             style="font-size: 10.4px; width: 16px; line-height: 16px;"
           >
-            R
+            U
           </span>
           <img
             alt=""
@@ -175,21 +175,21 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
         <span
           class="mx_Pill_text"
         >
-          Room 1
+          Message from User 1
         </span>
       </a>
     </bdi>
   </div>
 </DocumentFragment>
 `;
 
-exports[`<Pill> should render the expected pill for a space 1`] = `
+exports[`<Pill> should render the expected pill for a room alias 1`] = `
 <DocumentFragment>
   <div>
     <bdi>
       <a
         class="mx_Pill mx_RoomPill"
-        href="https://matrix.to/#/!space1:example.com"
+        href="https://matrix.to/#/#room1:example.com"
       >
         <span
           aria-hidden="true"
@@ -201,7 +201,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
             class="mx_BaseAvatar_initial"
             style="font-size: 10.4px; width: 16px; line-height: 16px;"
           >
-            S
+            R
           </span>
           <img
             alt=""
@@ -215,21 +215,21 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
         <span
           class="mx_Pill_text"
         >
-          Space 1
+          Room 1
         </span>
       </a>
     </bdi>
   </div>
 </DocumentFragment>
 `;
 
-exports[`<Pill> should render the expected pill for a user not in the room 1`] = `
+exports[`<Pill> should render the expected pill for a space 1`] = `
 <DocumentFragment>
   <div>
     <bdi>
       <a
-        class="mx_Pill mx_UserPill"
-        href="https://matrix.to/#/@user2:example.com"
+        class="mx_Pill mx_RoomPill"
+        href="https://matrix.to/#/!space1:example.com"
       >
         <span
           aria-hidden="true"
@@ -241,7 +241,7 @@ exports[`<Pill> should render the expected pill for a user not in the room 1`] =
             class="mx_BaseAvatar_initial"
             style="font-size: 10.4px; width: 16px; line-height: 16px;"
           >
-            U
+            S
           </span>
           <img
             alt=""
@@ -255,7 +255,29 @@ exports[`<Pill> should render the expected pill for a user not in the room 1`] =
         <span
           class="mx_Pill_text"
         >
-          User 2
+          Space 1
+        </span>
+      </a>
+    </bdi>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Pill> should render the expected pill for an uknown user not in the room 1`] = `
+<DocumentFragment>
+  <div>
+    <bdi>
+      <a
+        class="mx_Pill mx_UserPill"
+        href="https://matrix.to/#/@user3:example.com"
+      >
+        <div
+          class="mx_Pill_UserIcon mx_BaseAvatar mx_BaseAvatar_image"
+        />
+        <span
+          class="mx_Pill_text"
+        >
+          @user3:example.com
         </span>
       </a>
     </bdi>