fix(flat-stores): refresh main room list logic

packages/flat-pages/src/HomePage/MainRoomListPanel/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { RoomList } from "flat-components";
 import { ListRoomsType } from "@netless/flat-server-api";
@@ -7,16 +7,19 @@ import { RoomStore } from "@netless/flat-stores";
 import { MainRoomList } from "./MainRoomList";
 
 interface MainRoomListPanelProps {
+    activeTab: "all" | "today" | "periodic";
+    setActiveTab: (activeTab: "all" | "today" | "periodic") => void;
     roomStore: RoomStore;
     refreshRooms: () => Promise<void>;
 }
 
 export const MainRoomListPanel = observer<MainRoomListPanelProps>(function MainRoomListPanel({
+    activeTab,
+    setActiveTab,
     roomStore,
     refreshRooms,
 }) {
     const t = useTranslate();
-    const [activeTab, setActiveTab] = useState<"all" | "today" | "periodic">("all");
     const filters = useMemo<Array<{ key: "all" | "today" | "periodic"; title: string }>>(
         () => [
             {

packages/flat-pages/src/HomePage/index.tsx

@@ -1,6 +1,6 @@
 import "./style.less";
 
-import React, { useCallback, useContext, useEffect } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ListRoomsType } from "@netless/flat-server-api";
 import { errorTips, useSafePromise } from "flat-components";
@@ -16,25 +16,25 @@ export const HomePage = observer(function HomePage() {
     const pageStore = useContext(PageStoreContext);
     const roomStore = useContext(RoomStoreContext);
 
+    const [activeTab, setActiveTab] = useState<"all" | "today" | "periodic">("all");
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => pageStore.configure(), []);
 
     const isLogin = useLoginCheck();
 
-    // If you stop a class, it will "fly to" the history list,
-    // which means we need 2 refresh list api calls here.
     const refreshRooms = useCallback(
         async function refreshRooms() {
             try {
                 await Promise.all([
-                    sp(roomStore.listRooms(ListRoomsType.All)),
+                    sp(roomStore.listRooms(activeTab as ListRoomsType)),
                     sp(roomStore.listRooms(ListRoomsType.History)),
                 ]);
             } catch (e) {
                 errorTips(e);
             }
         },
-        [roomStore, sp],
+        [activeTab, roomStore, sp],
     );
 
     useEffect(() => {
@@ -55,7 +55,12 @@ export const HomePage = observer(function HomePage() {
         <div className="homepage-layout-horizontal-container">
             <MainRoomMenu />
             <div className="homepage-layout-horizontal-content">
-                <MainRoomListPanel refreshRooms={refreshRooms} roomStore={roomStore} />
+                <MainRoomListPanel
+                    activeTab={activeTab}
+                    refreshRooms={refreshRooms}
+                    roomStore={roomStore}
+                    setActiveTab={setActiveTab}
+                />
                 <MainRoomHistoryPanel refreshRooms={refreshRooms} roomStore={roomStore} />
             </div>
             <AppUpgradeModal />

packages/flat-stores/src/room-store.ts

@@ -23,7 +23,6 @@ import {
 } from "@netless/flat-server-api";
 import { globalStore } from "./global-store";
 import { preferencesStore } from "./preferences-store";
-import { isToday } from "date-fns";
 
 export interface RoomRecording {
     beginTime: number;
@@ -71,6 +70,17 @@ export class RoomStore {
     public rooms = observable.map<string, RoomItem>();
     public periodicRooms = observable.map<string, PeriodicRoomItem>();
 
+    /**
+     * Home page room list data, only contains room UUID.
+     * Each time `listRooms({ page: 1 })` is called, it should update this list.
+     */
+    public roomUUIDs: Record<ListRoomsType, string[]> = {
+        all: [],
+        periodic: [],
+        today: [],
+        history: [],
+    };
+
     /** If `fetchMoreRooms()` returns 0 rooms, stop fetching it */
     public hasMoreRooms: Record<ListRoomsType, boolean> = {
         all: true,
@@ -82,51 +92,6 @@ export class RoomStore {
     /** Don't invoke `fetchMoreRooms()` too many times */
     public isFetchingRooms = false;
 
-    public get roomUUIDs(): Record<ListRoomsType, string[]> {
-        const roomUUIDs: Record<ListRoomsType, string[]> = {
-            all: [],
-            history: [],
-            periodic: [],
-            today: [],
-        };
-
-        // periodicUUID -> { roomUUID, timestamp }
-        const periodicRooms = new Map<string, { roomUUID: string; timestamp: number }>();
-
-        for (const room of this.rooms.values()) {
-            const beginTime = room.beginTime ?? Date.now();
-            const isHistory = room.roomStatus === RoomStatus.Stopped;
-            const isPeriodic = Boolean(room.periodicUUID);
-            if (isHistory) {
-                roomUUIDs.history.push(room.roomUUID);
-            } else {
-                if (isToday(beginTime)) {
-                    roomUUIDs.today.push(room.roomUUID);
-                }
-                if (isPeriodic) {
-                    roomUUIDs.periodic.push(room.roomUUID);
-
-                    // Only keep the latest periodic room
-                    const periodic = periodicRooms.get(room.periodicUUID!);
-                    if ((periodic && periodic.timestamp > beginTime) || !periodic) {
-                        periodicRooms.set(room.periodicUUID!, {
-                            roomUUID: room.roomUUID,
-                            timestamp: beginTime,
-                        });
-                    }
-                } else {
-                    // exclude periodic rooms
-                    roomUUIDs.all.push(room.roomUUID);
-                }
-            }
-        }
-
-        // add periodic rooms to `all`
-        roomUUIDs.all.push(...[...periodicRooms.values()].map(room => room.roomUUID));
-
-        return roomUUIDs;
-    }
-
     public constructor() {
         makeAutoObservable(this);
     }
@@ -183,6 +148,14 @@ export class RoomStore {
                     periodicUUID: room.periodicUUID || void 0,
                 });
             }
+            const isSameRoomUUIDs =
+                this.roomUUIDs[type].length >= roomUUIDs.length &&
+                this.roomUUIDs[type]
+                    .slice(0, this.singlePageSize)
+                    .every((uuid, i) => uuid === roomUUIDs[i]);
+            if (!isSameRoomUUIDs) {
+                this.roomUUIDs[type] = roomUUIDs;
+            }
         });
         return roomUUIDs;
     }
@@ -217,6 +190,17 @@ export class RoomStore {
                             periodicUUID: room.periodicUUID || void 0,
                         });
                     }
+
+                    const isSameRoomUUIDs =
+                        counts[type].length >= fullPageSize + rooms.length &&
+                        counts[type]
+                            .slice(fullPageSize, fullPageSize + rooms.length)
+                            .every((uuid, i) => uuid === rooms[i].roomUUID);
+                    if (!isSameRoomUUIDs) {
+                        counts[type] = counts[type]
+                            .slice(0, fullPageSize)
+                            .concat(rooms.map(room => room.roomUUID));
+                    }
                 });
             } catch {
                 runInAction(() => {
@@ -228,11 +212,6 @@ export class RoomStore {
 
     public async cancelRoom(payload: CancelRoomPayload): Promise<void> {
         await cancelRoom(payload);
-        runInAction(() => {
-            if (payload.roomUUID) {
-                this.rooms.delete(payload.roomUUID);
-            }
-        });
     }
 
     public async syncOrdinaryRoomInfo(roomUUID: string): Promise<void> {

web/flat-web/src/tasks/init-ui.tsx

@@ -12,11 +12,15 @@ import { StoreProvider } from "@netless/flat-pages/src/components/StoreProvider"
 import { FlatServicesContextProvider } from "@netless/flat-pages/src/components/FlatServicesContext";
 
 /** configure right after import */
-import { configure } from "mobx";
+import { configure, toJS } from "mobx";
 configure({
     isolateGlobalState: true,
 });
 
+if (process.env.DEV) {
+    (window as any).toJS = toJS;
+}
+
 const App: React.FC = () => {
     const language = useLanguage();