diff --git a/packages/flat-pages/src/HomePage/MainRoomListPanel/index.tsx b/packages/flat-pages/src/HomePage/MainRoomListPanel/index.tsx index 44b60f821bc..53f9e8b3399 100644 --- a/packages/flat-pages/src/HomePage/MainRoomListPanel/index.tsx +++ b/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; } export const MainRoomListPanel = observer(function MainRoomListPanel({ + activeTab, + setActiveTab, roomStore, refreshRooms, }) { const t = useTranslate(); - const [activeTab, setActiveTab] = useState<"all" | "today" | "periodic">("all"); const filters = useMemo>( () => [ { diff --git a/packages/flat-pages/src/HomePage/index.tsx b/packages/flat-pages/src/HomePage/index.tsx index 5f2a800a93a..5005b2e3271 100644 --- a/packages/flat-pages/src/HomePage/index.tsx +++ b/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() {
- +
diff --git a/packages/flat-stores/src/room-store.ts b/packages/flat-stores/src/room-store.ts index ed63ef2cc78..f33922f5e72 100644 --- a/packages/flat-stores/src/room-store.ts +++ b/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(); public periodicRooms = observable.map(); + /** + * Home page room list data, only contains room UUID. + * Each time `listRooms({ page: 1 })` is called, it should update this list. + */ + public roomUUIDs: Record = { + all: [], + periodic: [], + today: [], + history: [], + }; + /** If `fetchMoreRooms()` returns 0 rooms, stop fetching it */ public hasMoreRooms: Record = { all: true, @@ -82,51 +92,6 @@ export class RoomStore { /** Don't invoke `fetchMoreRooms()` too many times */ public isFetchingRooms = false; - public get roomUUIDs(): Record { - const roomUUIDs: Record = { - all: [], - history: [], - periodic: [], - today: [], - }; - - // periodicUUID -> { roomUUID, timestamp } - const periodicRooms = new Map(); - - 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 { await cancelRoom(payload); - runInAction(() => { - if (payload.roomUUID) { - this.rooms.delete(payload.roomUUID); - } - }); } public async syncOrdinaryRoomInfo(roomUUID: string): Promise { diff --git a/web/flat-web/src/tasks/init-ui.tsx b/web/flat-web/src/tasks/init-ui.tsx index b6e35b2fa9f..d4535c3ad56 100644 --- a/web/flat-web/src/tasks/init-ui.tsx +++ b/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();