From 947ce07d1f4513c4ad72f112d5706b36abebac32 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 10 Oct 2024 02:40:57 +0300
Subject: [PATCH] web: load room state when switching to room

---
 web/src/api/client.ts     |  1 +
 web/src/api/statestore.ts |  1 +
 web/src/ui/MainScreen.tsx | 14 +++++++++++---
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/web/src/api/client.ts b/web/src/api/client.ts
index 0cb80f0..f23c4bd 100644
--- a/web/src/api/client.ts
+++ b/web/src/api/client.ts
@@ -62,6 +62,7 @@ export default class Client {
 			stateMap.set(evt.state_key, evt.rowid)
 		}
 		room.state = newStateMap
+		room.stateLoaded = true
 	}
 
 	async loadMoreHistory(roomID: RoomID): Promise<void> {
diff --git a/web/src/api/statestore.ts b/web/src/api/statestore.ts
index afa024d..6e93b93 100644
--- a/web/src/api/statestore.ts
+++ b/web/src/api/statestore.ts
@@ -66,6 +66,7 @@ export class RoomStateStore {
 	readonly meta: NonNullCachedEventDispatcher<DBRoom>
 	readonly timeline = new NonNullCachedEventDispatcher<TimelineRowTuple[]>([])
 	state: Map<EventType, Map<string, EventRowID>> = new Map()
+	stateLoaded = false
 	readonly eventsByRowID: Map<EventRowID, DBEvent> = new Map()
 	readonly eventsByID: Map<EventID, DBEvent> = new Map()
 
diff --git a/web/src/ui/MainScreen.tsx b/web/src/ui/MainScreen.tsx
index 8396cce..030d514 100644
--- a/web/src/ui/MainScreen.tsx
+++ b/web/src/ui/MainScreen.tsx
@@ -13,7 +13,7 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-import { use, useState } from "react"
+import { use, useCallback, useState } from "react"
 import type { RoomID } from "../api/types"
 import { ClientContext } from "./ClientContext.ts"
 import RoomView from "./RoomView.tsx"
@@ -22,9 +22,17 @@ import "./MainScreen.css"
 
 const MainScreen = () => {
 	const [activeRoomID, setActiveRoomID] = useState<RoomID | null>(null)
-	const activeRoom = activeRoomID && use(ClientContext)!.store.rooms.get(activeRoomID)
+	const client = use(ClientContext)!
+	const activeRoom = activeRoomID && client.store.rooms.get(activeRoomID)
+	const setActiveRoom = useCallback((roomID: RoomID) => {
+		setActiveRoomID(roomID)
+		if (client.store.rooms.get(roomID)?.stateLoaded === false) {
+			client.loadRoomState(roomID)
+				.catch(err => console.error("Failed to load room state", err))
+		}
+	}, [client])
 	return <main className="matrix-main">
-		<RoomList setActiveRoom={setActiveRoomID} />
+		<RoomList setActiveRoom={setActiveRoom} />
 		{activeRoom && <RoomView key={activeRoomID} room={activeRoom} />}
 	</main>
 }