fix(flat-pages): add stop class command and refresh list correctly

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

@@ -1,21 +1,21 @@
 // import "../MainRoomListPanel/MainRoomList.less";
 
-import React, { useCallback, useContext } from "react";
+import React, { useCallback } from "react";
 import { observer } from "mobx-react-lite";
-import { MainRoomList } from "../MainRoomListPanel/MainRoomList";
 import { ListRoomsType } from "@netless/flat-server-api";
 import { RoomList } from "flat-components";
 import { useTranslate } from "@netless/flat-i18n";
-import { RoomStoreContext } from "../../components/StoreProvider";
+import { RoomStore } from "@netless/flat-stores";
+import { MainRoomList } from "../MainRoomListPanel/MainRoomList";
 
 interface MainRoomHistoryPanelProps {
-    isLogin: boolean;
+    roomStore: RoomStore;
+    refreshRooms: () => Promise<void>;
 }
 
 export const MainRoomHistoryPanel = observer<MainRoomHistoryPanelProps>(
-    function MainRoomHistoryPanel({ isLogin }) {
+    function MainRoomHistoryPanel({ roomStore, refreshRooms }) {
         const t = useTranslate();
-        const roomStore = useContext(RoomStoreContext);
 
         const onScrollToBottom = useCallback((): void => {
             void roomStore.fetchMoreRooms(ListRoomsType.History);
@@ -24,8 +24,8 @@ export const MainRoomHistoryPanel = observer<MainRoomHistoryPanelProps>(
         return (
             <RoomList title={t("history")} onScrollToBottom={onScrollToBottom}>
                 <MainRoomList
-                    isLogin={isLogin}
                     listRoomsType={ListRoomsType.History}
+                    refreshRooms={refreshRooms}
                     roomStore={roomStore}
                 />
             </RoomList>

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

@@ -1,5 +1,5 @@
 import { message } from "antd";
-import React, { Fragment, useCallback, useContext, useEffect, useState } from "react";
+import React, { Fragment, useContext, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import {
     InviteModal,
@@ -27,13 +27,13 @@ import { generateAvatar } from "../../utils/generate-avatar";
 export interface MainRoomListProps {
     roomStore: RoomStore;
     listRoomsType: ListRoomsType;
-    isLogin: boolean;
+    refreshRooms: () => Promise<void>;
 }
 
 export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
     roomStore,
     listRoomsType,
-    isLogin,
+    refreshRooms,
 }) {
     const t = useTranslate();
     const [skeletonsVisible, setSkeletonsVisible] = useState(false);
@@ -54,31 +54,6 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
         return () => window.clearTimeout(ticket);
     }, []);
 
-    const refreshRooms = useCallback(
-        async function refreshRooms(): Promise<void> {
-            try {
-                await sp(roomStore.listRooms(listRoomsType));
-            } catch (e) {
-                errorTips(e);
-            }
-        },
-        [listRoomsType, roomStore, sp],
-    );
-
-    useEffect(() => {
-        if (!isLogin) {
-            return;
-        }
-
-        void refreshRooms();
-
-        const ticket = window.setInterval(refreshRooms, 30 * 1000);
-
-        return () => {
-            window.clearInterval(ticket);
-        };
-    }, [refreshRooms, isLogin]);
-
     const roomUUIDs = roomStore.roomUUIDs[listRoomsType];
 
     if (!roomUUIDs) {
@@ -430,6 +405,11 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                     key: "cancel",
                     text: isCreator ? t("cancel-room") : t("remove-room"),
                 });
+            } else if (isCreator) {
+                result.push({
+                    key: "stop",
+                    text: t("end-the-class"),
+                });
             }
             if (room.roomUUID) {
                 result.push({ key: "invite", text: t("invitation") });

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

@@ -1,16 +1,21 @@
-import React, { useContext, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { RoomList } from "flat-components";
-import { MainRoomList } from "./MainRoomList";
 import { ListRoomsType } from "@netless/flat-server-api";
 import { useTranslate } from "@netless/flat-i18n";
-import { RoomStoreContext } from "../../components/StoreProvider";
+import { RoomStore } from "@netless/flat-stores";
+import { MainRoomList } from "./MainRoomList";
+
+interface MainRoomListPanelProps {
+    roomStore: RoomStore;
+    refreshRooms: () => Promise<void>;
+}
 
-export const MainRoomListPanel = observer<{ isLogin: boolean }>(function MainRoomListPanel({
-    isLogin,
+export const MainRoomListPanel = observer<MainRoomListPanelProps>(function MainRoomListPanel({
+    roomStore,
+    refreshRooms,
 }) {
     const t = useTranslate();
-    const roomStore = useContext(RoomStoreContext);
     const [activeTab, setActiveTab] = useState<"all" | "today" | "periodic">("all");
     const filters = useMemo<Array<{ key: "all" | "today" | "periodic"; title: string }>>(
         () => [
@@ -38,8 +43,8 @@ export const MainRoomListPanel = observer<{ isLogin: boolean }>(function MainRoo
             onTabActive={setActiveTab}
         >
             <MainRoomList
-                isLogin={isLogin}
                 listRoomsType={activeTab as ListRoomsType}
+                refreshRooms={refreshRooms}
                 roomStore={roomStore}
             />
         </RoomList>

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

@@ -1,28 +1,62 @@
 import "./style.less";
 
-import React, { useContext, useEffect } from "react";
+import React, { useCallback, useContext, useEffect } from "react";
 import { observer } from "mobx-react-lite";
+import { ListRoomsType } from "@netless/flat-server-api";
+import { errorTips, useSafePromise } from "flat-components";
 import { MainRoomMenu } from "./MainRoomMenu";
 import { MainRoomListPanel } from "./MainRoomListPanel";
 import { MainRoomHistoryPanel } from "./MainRoomHistoryPanel";
 import { useLoginCheck } from "../utils/use-login-check";
-import { PageStoreContext } from "../components/StoreProvider";
+import { PageStoreContext, RoomStoreContext } from "../components/StoreProvider";
 import { AppUpgradeModal } from "../components/AppUpgradeModal";
 
 export const HomePage = observer(function HomePage() {
+    const sp = useSafePromise();
     const pageStore = useContext(PageStoreContext);
+    const roomStore = useContext(RoomStoreContext);
 
     // 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(ListRoomsType.History)),
+                ]);
+            } catch (e) {
+                errorTips(e);
+            }
+        },
+        [roomStore, sp],
+    );
+
+    useEffect(() => {
+        if (!isLogin) {
+            return;
+        }
+
+        void refreshRooms();
+
+        const ticket = window.setInterval(refreshRooms, 30 * 1000);
+
+        return () => {
+            window.clearInterval(ticket);
+        };
+    }, [refreshRooms, isLogin]);
+
     return (
         <div className="homepage-layout-horizontal-container">
             <MainRoomMenu />
             <div className="homepage-layout-horizontal-content">
-                <MainRoomListPanel isLogin={isLogin} />
-                <MainRoomHistoryPanel isLogin={isLogin} />
+                <MainRoomListPanel refreshRooms={refreshRooms} roomStore={roomStore} />
+                <MainRoomHistoryPanel refreshRooms={refreshRooms} roomStore={roomStore} />
             </div>
             <AppUpgradeModal />
         </div>

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

@@ -6,7 +6,7 @@ import {
     createOrGetPmi,
     listPmi,
 } from "@netless/flat-server-api";
-import { autorun } from "mobx";
+import { autorun, runInAction } from "mobx";
 import { autoPersistStore } from "./utils/auto-persist-store";
 
 // clear storage if not match
@@ -124,11 +124,25 @@ export class GlobalStore {
     }
 
     public updatePmi = async (pmi?: string | null): Promise<void> => {
-        this.pmi = pmi ?? ((await createOrGetPmi({ create: true }))?.pmi || null);
+        if (pmi) {
+            this.pmi = pmi;
+        } else {
+            const pmi = (await createOrGetPmi({ create: true }))?.pmi || null;
+            runInAction(() => {
+                this.pmi = pmi;
+            });
+        }
     };
 
     public updatePmiRoomList = async (pmiRoomList?: PmiRoom[]): Promise<void> => {
-        this.pmiRoomList = pmiRoomList ?? ((await listPmi()) || []);
+        if (pmiRoomList) {
+            this.pmiRoomList = pmiRoomList;
+        } else {
+            const pmiRoomList = (await listPmi()) || [];
+            runInAction(() => {
+                this.pmiRoomList = pmiRoomList;
+            });
+        }
     };
 
     public updateUserInfo = (userInfo: UserInfo | null): void => {

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

@@ -97,12 +97,12 @@ export class RoomStore {
                 roomUUIDs.history.push(room.roomUUID);
             } else {
                 roomUUIDs.all.push(room.roomUUID);
-            }
-            if (isPeriodic) {
-                roomUUIDs.periodic.push(room.roomUUID);
-            }
-            if (isToday(beginTime)) {
-                roomUUIDs.today.push(room.roomUUID);
+                if (isToday(beginTime)) {
+                    roomUUIDs.today.push(room.roomUUID);
+                }
+                if (isPeriodic) {
+                    roomUUIDs.periodic.push(room.roomUUID);
+                }
             }
         }
         return roomUUIDs;
@@ -206,6 +206,11 @@ 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> {