Support joining non-peekable rooms via the module API

src/components/structures/RoomView.tsx

@@ -1903,6 +1903,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                                 loading={loading}
                                 joining={this.state.joining}
                                 oobData={this.props.oobData}
+                                roomId={this.state.roomId}
                             />
                         </ErrorBoundary>
                     </div>
@@ -1932,7 +1933,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                                 invitedEmail={invitedEmail}
                                 oobData={this.props.oobData}
                                 signUrl={this.props.threepidInvite?.signUrl}
-                                room={this.state.room}
+                                roomId={this.state.roomId}
                             />
                         </ErrorBoundary>
                     </div>
@@ -1969,6 +1970,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                             error={this.state.roomLoadError}
                             joining={this.state.joining}
                             rejecting={this.state.rejecting}
+                            roomId={this.state.roomId}
                         />
                     </ErrorBoundary>
                 );
@@ -1998,6 +2000,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                                 canPreview={false}
                                 joining={this.state.joining}
                                 room={this.state.room}
+                                roomId={this.state.roomId}
                             />
                         </ErrorBoundary>
                     </div>
@@ -2090,6 +2093,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     oobData={this.props.oobData}
                     canPreview={this.state.canPeek}
                     room={this.state.room}
+                    roomId={this.state.roomId}
                 />
             );
             if (!this.state.canPeek && !this.state.room?.isSpaceRoom()) {

src/components/views/rooms/RoomPreviewBar.tsx

@@ -57,6 +57,9 @@ enum MessageCase {
 }
 
 interface IProps {
+    // The id of the room to be previewed
+    roomId?: string;
+
     // if inviterName is specified, the preview bar will shown an invite to the room.
     // You should also specify onRejectClick if specifying inviterName
     inviterName?: string;
@@ -76,6 +79,9 @@ interface IProps {
 
     canPreview?: boolean;
     previewLoading?: boolean;
+
+    // The room to be previewed
+    // If given, the room passed is peekable
     room?: Room;
 
     loading?: boolean;
@@ -310,18 +316,14 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
             }
             case MessageCase.NotLoggedIn: {
                 const opts: RoomPreviewOpts = { canJoin: false };
-                if (this.props.room?.roomId) {
-                    ModuleRunner.instance.invoke(
-                        RoomViewLifecycle.PreviewRoomNotLoggedIn,
-                        opts,
-                        this.props.room.roomId,
-                    );
+                if (this.props.roomId) {
+                    ModuleRunner.instance.invoke(RoomViewLifecycle.PreviewRoomNotLoggedIn, opts, this.props.roomId);
                 }
                 if (opts.canJoin) {
                     title = _t("Join the room to participate");
                     primaryActionLabel = _t("Join");
                     primaryActionHandler = () => {
-                        ModuleRunner.instance.invoke(RoomViewLifecycle.JoinFromRoomPreview, this.props.room.roomId);
+                        ModuleRunner.instance.invoke(RoomViewLifecycle.JoinFromRoomPreview, this.props.roomId);
                     };
                 } else {
                     title = _t("Join the conversation with an account");

test/components/views/rooms/RoomPreviewBar-test.tsx

@@ -71,8 +71,9 @@ describe("<RoomPreviewBar />", () => {
     const inviterUserId = "@inviter:test.com";
     const otherUserId = "@othertester:test.com";
 
-    const getComponent = (props: ComponentProps<typeof RoomPreviewBar> = {}) => {
+    const getComponent = (props: Omit<ComponentProps<typeof RoomPreviewBar>, "roomId"> = {}) => {
         const defaultProps = {
+            roomId,
             room: createRoom(roomId, userId),
         };
         return render(<RoomPreviewBar {...defaultProps} {...props} />);
@@ -324,7 +325,7 @@ describe("<RoomPreviewBar />", () => {
                 { medium: "not-email", address: "address 2" },
             ];
 
-            const testJoinButton = (props: ComponentProps<typeof RoomPreviewBar>) => async () => {
+            const testJoinButton = (props: Omit<ComponentProps<typeof RoomPreviewBar>, "roomId">) => async () => {
                 const onJoinClick = jest.fn();
                 const onRejectClick = jest.fn();
                 const component = getComponent({ ...props, onJoinClick, onRejectClick });