Handle room not found scenario.

src/modules/room/RoomBanner.tsx

@@ -0,0 +1,13 @@
+import { FC } from "react";
+
+interface Props {
+  title: string;
+}
+
+const RoomBanner: FC<Props> = ({ title }) => (
+  <div className="flex h-full justify-center items-center">
+    <h3>{title}</h3>
+  </div>
+);
+
+export default RoomBanner;

src/modules/room/RoomChat.tsx

@@ -6,6 +6,7 @@ import {
   RoomMembership,
   roomSetMembership,
 } from "modules/room/slice";
+import RoomBanner from "modules/room/RoomBanner";
 import RoomChatForm from "modules/room/RoomChatForm";
 import RoomChatHeader from "modules/room/RoomChatHeader";
 import RoomChatMessageList from "modules/room/RoomChatMessageList";
@@ -13,29 +14,16 @@ import RoomDetails from "modules/room/RoomDetails";
 
 interface Props {
   loginUserName: string;
-  room?: RoomState;
+  room: RoomState;
 }
 
-const RoomChat: FC<Props> = ({ loginUserName, room }) => {
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (room !== undefined && room.membership === RoomMembership.Left) {
-      dispatch(roomSetMembership([room.name, RoomMembership.Joining]));
-    }
-  });
-
+const RoomChatInner: FC<Props> = ({ loginUserName, room }) => {
   const [showDetails, setShowDetails] = useState<boolean>(false);
   const toggleDetails = () => {
     setShowDetails(!showDetails);
   };
 
   const header = <RoomChatHeader room={room} toggleDetails={toggleDetails} />;
-  if (room === undefined || room.membership !== RoomMembership.Joined) {
-    return (
-      <div className="flex h-full justify-center items-center">{header}</div>
-    );
-  }
 
   let details;
   if (showDetails) {
@@ -62,4 +50,20 @@ const RoomChat: FC<Props> = ({ loginUserName, room }) => {
   );
 };
 
+const RoomChat: FC<Props> = ({ loginUserName, room }) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (room.membership === RoomMembership.Left) {
+      dispatch(roomSetMembership([room.name, RoomMembership.Joining]));
+    }
+  });
+
+  if (room.membership !== RoomMembership.Joined) {
+    return <RoomBanner title={`Joining ${room.name}`} />;
+  }
+
+  return <RoomChatInner loginUserName={loginUserName} room={room} />;
+};
+
 export default RoomChat;

src/modules/room/RoomsPane.tsx

@@ -6,6 +6,7 @@ import { Switch, Route } from "react-router-dom";
 import { decode } from "modules/base64";
 import { selectLogin } from "modules/login/slice";
 import { RoomMap, selectAllRooms } from "modules/room/slice";
+import RoomBanner from "modules/room/RoomBanner";
 import RoomChat from "modules/room/RoomChat";
 import RoomList from "modules/room/RoomList";
 
@@ -21,10 +22,14 @@ interface UrlParams {
 const RoomChatPane: FC<ChatProps> = ({ loginUserName, rooms }) => {
   const { roomId } = useParams<UrlParams>();
 
-  let room;
-  if (roomId !== undefined) {
-    const name = decode(roomId);
-    room = rooms[name];
+  if (roomId === undefined) {
+    return <RoomBanner title="Select a room" />;
+  }
+
+  const name = decode(roomId);
+  const room = rooms[name];
+  if (room === undefined) {
+    return <RoomBanner title={`Room ${name} not found`} />;
   }
 
   return <RoomChat loginUserName={loginUserName} room={room} />;