Route /chats/:chatId to ChatPage component, cleanup UI imports, nuke ChatRoom (he cry)

app/soapbox/features/chats/chat-room.tsx

@@ -1,55 +0,0 @@
-import { Map as ImmutableMap } from 'immutable';
-import React, { useEffect } from 'react';
-
-import { fetchChat, markChatRead } from 'soapbox/actions/chats';
-import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
-import { makeGetChat } from 'soapbox/selectors';
-import { getAcct } from 'soapbox/utils/accounts';
-import { displayFqn as getDisplayFqn } from 'soapbox/utils/state';
-
-import Chat from './components/chat';
-
-const getChat = makeGetChat();
-
-interface IChatRoom {
-  params: {
-    chatId: string,
-  }
-}
-
-/** Fullscreen chat UI. */
-const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
-  const dispatch = useAppDispatch();
-  const displayFqn = useAppSelector(getDisplayFqn);
-
-  const chat = useAppSelector(state => {
-    const chat = state.chats.items.get(params.chatId, ImmutableMap()).toJS() as any;
-    return getChat(state, chat);
-  });
-
-  const markRead = () => {
-    if (!chat) return;
-    dispatch(markChatRead(chat.id));
-  };
-
-  useEffect(() => {
-    dispatch(fetchChat(params.chatId));
-    markRead();
-  }, [params.chatId]);
-
-  // If this component is loaded at all, we can instantly mark new messages as read.
-  useEffect(() => {
-    markRead();
-  }, [chat?.unread]);
-
-  if (!chat) return null;
-
-  return (
-    <Column label={`@${getAcct(chat.account as any, displayFqn)}`}>
-      <Chat chat={chat as any} autosize />
-    </Column>
-  );
-};
-
-export default ChatRoom;

app/soapbox/features/ui/index.tsx

@@ -28,15 +28,14 @@ import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig, useFea
 import AdminPage from 'soapbox/pages/admin_page';
 import ChatsPage from 'soapbox/pages/chats-page';
 import DefaultPage from 'soapbox/pages/default_page';
-// import GroupsPage from 'soapbox/pages/groups_page';
-// import GroupPage from 'soapbox/pages/group_page';
 import HomePage from 'soapbox/pages/home_page';
 import ProfilePage from 'soapbox/pages/profile_page';
 import RemoteInstancePage from 'soapbox/pages/remote_instance_page';
 import StatusPage from 'soapbox/pages/status_page';
 import { getAccessToken, getVapidKey } from 'soapbox/utils/auth';
 import { isStandalone } from 'soapbox/utils/state';
-// import GroupSidebarPanel from '../groups/sidebar_panel';
+
+import { StatProvider } from '../../contexts/stat-context';
 
 import BackgroundShapes from './components/background_shapes';
 import Navbar from './components/navbar';
@@ -64,15 +63,9 @@ import {
   Filters,
   PinnedStatuses,
   Search,
-  // Groups,
-  // GroupTimeline,
   ListTimeline,
   Lists,
   Bookmarks,
-  // GroupMembers,
-  // GroupRemovedAccounts,
-  // GroupCreate,
-  // GroupEdit,
   Settings,
   MediaDisplay,
   EditProfile,
@@ -86,7 +79,6 @@ import {
   // Backups,
   MfaForm,
   ChatIndex,
-  ChatRoom,
   ChatWidget,
   ServerInfo,
   Dashboard,
@@ -118,7 +110,6 @@ import { WrappedRoute } from './util/react_router_helpers';
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
 import 'soapbox/components/status';
-import { StatProvider } from '../../contexts/stat-context';
 
 const EmptyPage = HomePage;
 
@@ -264,7 +255,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       {features.profileDirectory && <WrappedRoute path='/directory' publicRoute page={DefaultPage} component={Directory} content={children} />}
 
       {features.chats && <WrappedRoute path='/chats' exact page={ChatsPage} component={ChatIndex} content={children} />}
-      {features.chats && <WrappedRoute path='/chats/:chatId' page={ChatsPage} component={ChatRoom} content={children} />}
+      {features.chats && <WrappedRoute path='/chats/:chatId' page={ChatsPage} component={ChatIndex} content={children} />}
 
       <WrappedRoute path='/follow_requests' page={DefaultPage} component={FollowRequests} content={children} />
       <WrappedRoute path='/blocks' page={DefaultPage} component={Blocks} content={children} />

app/soapbox/features/ui/util/async-components.ts

@@ -294,10 +294,6 @@ export function ChatIndex() {
   return import(/* webpackChunkName: "features/chats" */'../../chats');
 }
 
-export function ChatRoom() {
-  return import(/* webpackChunkName: "features/chats/chat_room" */'../../chats/chat-room');
-}
-
 export function ChatWidget() {
   return import(/* webpackChunkName: "features/chats/components/chat-widget" */'../../chats/components/chat-widget');
 }