Refactor rooms management

matrixgw_frontend/src/widgets/messages/MainMessagesWidget.tsx

@@ -1,5 +1,6 @@
 import { Divider } from "@mui/material";
 import React from "react";
+import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
 import {
   MatrixApiProfile,
   type UsersMap,
@@ -7,6 +8,7 @@ import {
 import { MatrixApiRoom, type Room } from "../../api/matrix/MatrixApiRoom";
 import { MatrixSyncApi } from "../../api/MatrixSyncApi";
 import type { WsMessage } from "../../api/WsApi";
+import { RoomEventsManager } from "../../utils/RoomEventsManager";
 import { AsyncWidget } from "../AsyncWidget";
 import { useUserInfo } from "../dashboard/BaseAuthenticatedPage";
 import { MatrixWS } from "./MatrixWS";
@@ -17,9 +19,8 @@ import { SpaceSelector } from "./SpaceSelector";
 export function MainMessageWidget(): React.ReactElement {
   const [rooms, setRooms] = React.useState<Room[] | undefined>();
   const [users, setUsers] = React.useState<UsersMap | undefined>();
-  const user = useUserInfo();
 
-  const load = async () => {
+  const loadRoomsList = async () => {
     await MatrixSyncApi.Start();
 
     const rooms = await MatrixApiRoom.ListJoined();
@@ -34,37 +35,17 @@ export function MainMessageWidget(): React.ReactElement {
     setUsers(await MatrixApiProfile.GetMultiple([...users]));
   };
 
-  const handleEvent = (m: WsMessage) => {
-    // Add a new unread message
-    if (
-      m.type === "RoomMessageEvent" &&
-      !m.data["m.new_content"] &&
-      m.sender !== user.info.matrix_user_id
-    ) {
-      setRooms((r) => {
-        const n = r ? [...r] : undefined;
-        const idx = n?.findIndex((el) => el.id === m.room_id);
-        if (idx)
-          n![idx] = {
-            ...n![idx],
-            number_unread_messages: n![idx].number_unread_messages + 1,
-          };
-        return n;
-      });
-    }
-  };
-
   return (
     <AsyncWidget
       loadKey={1}
-      load={load}
+      load={loadRoomsList}
       ready={!!rooms && !!users}
       errMsg="Failed to initialize messaging component!"
       build={() => (
         <_MainMessageWidget
           rooms={rooms!}
           users={users!}
-          onEvent={handleEvent}
+          onRoomsListUpdate={(cb) => setRooms((r) => cb(r!))}
         />
       )}
     />
@@ -74,10 +55,12 @@ export function MainMessageWidget(): React.ReactElement {
 function _MainMessageWidget(p: {
   rooms: Room[];
   users: UsersMap;
-  onEvent: (m: WsMessage) => void;
+  onRoomsListUpdate: (cb: (a: Room[]) => Room[]) => void;
 }): React.ReactElement {
+  const user = useUserInfo();
+
   const [space, setSpace] = React.useState<string | undefined>();
-  const [room, setRoom] = React.useState<Room | undefined>();
+  const [currentRoom, setCurrentRoom] = React.useState<Room | undefined>();
 
   const spaceRooms = React.useMemo(() => {
     return p.rooms
@@ -87,33 +70,96 @@ function _MainMessageWidget(p: {
       );
   }, [space, p.rooms]);
 
+  const [_refreshCount, setRefreshCount] = React.useState(0);
+  const [roomMgr, setRoomMgr] = React.useState<undefined | RoomEventsManager>();
+
+  const loadRoom = async () => {
+    setRoomMgr(undefined);
+    if (!currentRoom) {
+      console.warn("Cannot load manager for no room!");
+      return;
+    }
+    const messages = await MatrixApiEvent.GetRoomEvents(currentRoom);
+    const mgr = new RoomEventsManager(currentRoom!, messages);
+    setRoomMgr(mgr);
+  };
+
+  const handleWsEvent = (m: WsMessage) => {
+    // Process messages for current room
+    if (roomMgr?.processWsMessage(m)) {
+      console.info("Current room updated!");
+      setRefreshCount((c) => c + 1);
+    }
+
+    // Add a new unread message on left sidebar
+    if (
+      m.type === "RoomMessageEvent" &&
+      !m.data["m.new_content"] &&
+      m.sender !== user.info.matrix_user_id
+    ) {
+      p.onRoomsListUpdate((r) => {
+        const n = [...r];
+        const idx = r.findIndex((el) => el.id === m.room_id);
+        if (idx)
+          n[idx] = {
+            ...n[idx],
+            number_unread_messages: n[idx].number_unread_messages + 1,
+          };
+        return n;
+      });
+    }
+  };
+
   return (
     <div style={{ display: "flex", height: "100%" }}>
+      {/* Websocket */}
+      <div style={{ position: "absolute", right: "0px", padding: "10px" }}>
+        <MatrixWS onMessage={handleWsEvent} />
+      </div>
+
+      {/* Space selector */}
       <SpaceSelector {...p} selectedSpace={space} onChange={setSpace} />
+
+      {/* Separator */}
       <Divider orientation="vertical" />
+
+      {/* Room selector */}
       <RoomSelector
         {...p}
         rooms={spaceRooms}
-        currRoom={room}
-        onChange={setRoom}
+        currRoom={currentRoom}
+        onChange={setCurrentRoom}
       />
+
+      {/* Separator */}
       <Divider orientation="vertical" />
-      {room === undefined && (
-        <>
-          <MatrixWS onMessage={p.onEvent} />
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              flex: 1,
-            }}
-          >
-            No room selected.
-          </div>
-        </>
+
+      {/* If no room is selected */}
+      {currentRoom === undefined && (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flex: 1,
+          }}
+        >
+          No room selected.
+        </div>
+      )}
+
+      {/* In case of room */}
+      {currentRoom && (
+        <AsyncWidget
+          loadKey={currentRoom.id}
+          ready={!!roomMgr}
+          load={loadRoom}
+          errMsg="Failed to load room!"
+          build={() => (
+            <RoomWidget {...p} manager={roomMgr!} room={currentRoom} />
+          )}
+        />
       )}
-      {room && <RoomWidget {...p} room={room} />}
     </div>
   );
 }