refactor(flat-pages): add stop class command in room list

netless-io · Oct 23, 2023 · f559c6a · f559c6a
1 parent ef0dd3d
commit f559c6a
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 7 deletions.
diff --git a/packages/flat-pages/src/HomePage/MainRoomListPanel/MainRoomList.tsx b/packages/flat-pages/src/HomePage/MainRoomListPanel/MainRoomList.tsx
@@ -11,9 +11,10 @@ import {
     RoomListItemPrimaryAction,
     RoomListSkeletons,
     RoomStatusType,
+    StopClassConfirmModal,
     errorTips,
 } from "flat-components";
-import { ListRoomsType, RoomStatus, RoomType } from "@netless/flat-server-api";
+import { ListRoomsType, RoomStatus, RoomType, listPmi, stopClass } from "@netless/flat-server-api";
 import { GlobalStoreContext, RoomStoreContext } from "../../components/StoreProvider";
 import { RoomItem } from "@netless/flat-stores";
 import { useSafePromise } from "../../utils/hooks/lifecycle";
@@ -37,6 +38,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
     const [skeletonsVisible, setSkeletonsVisible] = useState(false);
     const [roomUUIDs, setRoomUUIDs] = useState<string[]>();
     const [cancelModalVisible, setCancelModalVisible] = useState(false);
+    const [stopModalVisible, setStopModalVisible] = useState(false);
     const [inviteModalVisible, setInviteModalVisible] = useState(false);
     const [removeHistoryVisible, setRemoveHistoryVisible] = useState(false);
     const [removeHistoryLoading, setRemoveHistoryLoading] = useState(false);
@@ -188,6 +190,11 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                                         setCancelModalVisible(true);
                                         break;
                                     }
+                                    case "stop": {
+                                        setCurrentRoom(room);
+                                        setStopModalVisible(true);
+                                        break;
+                                    }
                                     case "invite": {
                                         setCurrentRoom(room);
                                         setInviteModalVisible(true);
@@ -238,6 +245,14 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                     onCancelRoom={removeRoomHandler}
                 />
             )}
+            {currentRoom && (
+                <StopClassConfirmModal
+                    loading={false}
+                    visible={stopModalVisible}
+                    onCancel={hideStopModal}
+                    onStop={stopRoomHandler}
+                />
+            )}
             {currentRoom && (
                 <InviteModal
                     baseUrl={FLAT_WEB_BASE_URL}
@@ -281,6 +296,10 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
         setCancelModalVisible(false);
     }
 
+    function hideStopModal(): void {
+        setStopModalVisible(false);
+    }
+
     function hideInviteModal(): void {
         setInviteModalVisible(false);
     }
@@ -343,6 +362,27 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
         }
     }
 
+    async function stopRoomHandler(): Promise<void> {
+        const { ownerUUID, roomUUID, roomStatus } = currentRoom!;
+        const isCreator = ownerUUID === globalStore.userUUID;
+        const isStarted = roomStatus === RoomStatus.Started || roomStatus === RoomStatus.Paused;
+        try {
+            if (isCreator && isStarted) {
+                await stopClass(roomUUID);
+
+                if (globalStore.pmiRoomUUID === roomUUID) {
+                    // remove pmi room id list
+                    globalStore.updatePmiRoomList(await listPmi());
+                }
+                void refreshRooms();
+            }
+            setStopModalVisible(false);
+        } catch (e) {
+            console.error(e);
+            errorTips(e);
+        }
+    }
+
     async function removeConfirm(): Promise<void> {
         setRemoveHistoryLoading(true);
         try {
@@ -364,7 +404,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
 
     type SubActions =
         | Array<{ key: "details" | "share" | "delete-history"; text: string }>
-        | Array<{ key: "details" | "modify" | "cancel" | "invite"; text: string }>;
+        | Array<{ key: "details" | "modify" | "cancel" | "stop" | "invite"; text: string }>;
 
     function getSubActions(room: RoomItem): SubActions {
         const result = [{ key: "details", text: t("room-detail") }];

diff --git a/packages/flat-pages/src/HomePage/MainRoomMenu/index.tsx b/packages/flat-pages/src/HomePage/MainRoomMenu/index.tsx
@@ -58,7 +58,7 @@ export const MainRoomMenu: FC = () => {
 
             if (pmi) {
                 // update pmi room list
-                globalStore.updatePmiRoomList((await listPmi()) || []);
+                globalStore.updatePmiRoomList(await listPmi());
             }
 
             await onJoinRoom(roomUUID);

diff --git a/packages/flat-pages/src/LoginPage/utils/state.ts b/packages/flat-pages/src/LoginPage/utils/state.ts
@@ -88,7 +88,7 @@ export function useLoginState(): LoginState {
         async (authData: LoginProcessResult | null, account?: Account) => {
             globalStore.updateUserInfo(authData);
             globalStore.updatePmi((await createOrGetPmi({ create: true }))?.pmi || null);
-            globalStore.updatePmiRoomList((await listPmi()) || []);
+            globalStore.updatePmiRoomList(await listPmi());
 
             if (!authData) {
                 setLoginResult(null);

diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
@@ -1373,7 +1373,7 @@ export class ClassroomStore {
 
                     if (globalStore.pmiRoomUUID === this.roomUUID) {
                         // remove pmi room id list
-                        globalStore.updatePmiRoomList((await listPmi()) || []);
+                        globalStore.updatePmiRoomList(await listPmi());
                     }
                     break;
                 }

diff --git a/packages/flat-stores/src/global-store.ts b/packages/flat-stores/src/global-store.ts
@@ -125,8 +125,8 @@ export class GlobalStore {
         this.pmi = pmi;
     };
 
-    public updatePmiRoomList = (pmiRoomList: PmiRoom[]): void => {
-        this.pmiRoomList = pmiRoomList;
+    public updatePmiRoomList = (pmiRoomList?: PmiRoom[]): void => {
+        this.pmiRoomList = pmiRoomList || [];
     };
 
     public updateUserInfo = (userInfo: UserInfo | null): void => {