fix: set grade can not 0

Author: hqer927

packages/flat-components/src/components/ClassroomPage/ExitRoomConfirmModal/index.tsx

@@ -3,7 +3,6 @@
 import React, { FC, useEffect } from "react";
 import { Button, Modal } from "antd";
 import { useTranslate } from "@netless/flat-i18n";
-import { SVGGood } from "../../FlatIcons/icons/SVGGood";
 
 export interface StopClassConfirmModalProps {
     visible: boolean;
@@ -41,6 +40,8 @@ export interface CloseRoomConfirmModalProps {
     hangLoading: boolean;
     stopLoading: boolean;
     rateModal?: React.ReactNode;
+    showRateModal?: boolean;
+    setShowRateModal?: (show: boolean) => void;
     onHang: () => void;
     onStop: () => void;
     onCancel: () => void;
@@ -56,35 +57,14 @@ export const CloseRoomConfirmModal: FC<CloseRoomConfirmModalProps> = ({
     hangLoading,
     stopLoading,
     rateModal,
+    showRateModal,
+    setShowRateModal,
     onHang,
     onStop,
     onCancel,
-    setGrade,
 }) => {
     const t = useTranslate();
-    const [loading, setLoading] = React.useState(false);
-    const [showRateModal, setShowRateModal] = React.useState(false);
     const [open, setOpen] = React.useState(visible);
-    const handleOk = async () => {
-        setLoading(true);
-        try {
-            if (setGrade) {
-                await setGrade();
-            }
-            setLoading(false);
-            setShowRateModal(false);
-            onStop();
-        } catch (error) {
-            console.error(error);
-            setLoading(false);
-            setShowRateModal(false);
-            onCancel();
-        }
-    };
-    const handCancel = async () => {
-        setShowRateModal(false);
-        onStop();
-    };
     useEffect(() => {
         setOpen(visible);
     }, [visible]);
@@ -103,7 +83,7 @@ export const CloseRoomConfirmModal: FC<CloseRoomConfirmModalProps> = ({
                         loading={stopLoading}
                         type="primary"
                         onClick={() => {
-                            if (rateModal) {
+                            if (setShowRateModal) {
                                 setShowRateModal(true);
                                 setOpen(false);
                             } else {
@@ -121,26 +101,7 @@ export const CloseRoomConfirmModal: FC<CloseRoomConfirmModalProps> = ({
             >
                 <p>{t("exit-room-tips")}</p>
             </Modal>
-            {showRateModal && (
-                <Modal
-                    footer={[
-                        <Button key="submit" loading={loading} type="primary" onClick={handleOk}>
-                            {t("home-page-AI-teacher-modal.rate.submit")}
-                        </Button>,
-                    ]}
-                    open={true}
-                    title={
-                        <div style={{ display: "flex", alignItems: "stretch" }}>
-                            <span>{t("home-page-AI-teacher-modal.rate.title")} </span>
-                            <SVGGood />
-                        </div>
-                    }
-                    onCancel={handCancel}
-                    onOk={handleOk}
-                >
-                    {rateModal}
-                </Modal>
-            )}
+            {(showRateModal && rateModal) || null}
         </>
     );
 };

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

@@ -3,7 +3,7 @@ import "./AIPage.less";
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { useTranslate } from "@netless/flat-i18n";
 import { observer } from "mobx-react-lite";
-import { message, Popover } from "antd";
+import { Button, message, Modal, Popover } from "antd";
 import {
     NetworkStatus,
     TopBar,
@@ -17,6 +17,7 @@ import {
     SVGWhiteBoardOff,
     SVGRate,
     SVGAIChatMsgCC,
+    SVGGood,
 } from "flat-components";
 
 import { RealtimePanel } from "../components/RealtimePanel";
@@ -55,9 +56,11 @@ export const AIPage = withClassroomStore<AIPageProps>(
         const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classroomStore);
 
         const isRealtimeSideOpen = !whiteboardStore.isRightSideClose;
-        const [value, setValue] = useState(0);
+        const [grade, setGrade] = useState(0);
         const [isFirst, setIsFirst] = useState(false);
         const [show, setShow] = useState(true);
+        const [showRateModal, setShowRateModal] = React.useState(false);
+        const [loading, setLoading] = React.useState(false);
 
         useEffect(() => {
             if (classroomStore.userWindowsMode === "normal") {
@@ -107,6 +110,25 @@ export const AIPage = withClassroomStore<AIPageProps>(
             }
             return null;
         }, [classroomStore.isHasAIUser]);
+        const handleOk: () => Promise<void> = async () => {
+            setLoading(true);
+            try {
+                await setGradeRoom({
+                    roomUUID: classroomStore.roomUUID,
+                    userUUID: classroomStore.userUUID,
+                    grade,
+                });
+                setLoading(false);
+                setShowRateModal(false);
+                exitConfirmModalProps.onStopClass();
+            } catch (error) {
+                console.error(error);
+                setLoading(false);
+                setShowRateModal(false);
+                exitConfirmModalProps.onCancel();
+            }
+        };
+
         return (
             (aiUser && (
                 <div className="ai-page-class-page-container">
@@ -135,25 +157,46 @@ export const AIPage = withClassroomStore<AIPageProps>(
                             <ExitRoomConfirm
                                 isCreator={classroomStore.isCreator}
                                 rateModal={
-                                    <Rate
-                                        character={<SVGRate active={value > 3} />}
-                                        className="ai-page-rate-ui"
-                                        style={{ color: value > 3 ? "#FE4D00" : "#007AFF" }}
-                                        value={value}
-                                        onHoverChange={(value: number) => {
-                                            if (value) {
-                                                setValue(value);
-                                            }
-                                        }}
-                                    />
+                                    <Modal
+                                        closable={false}
+                                        footer={[
+                                            <Button
+                                                key="submit"
+                                                disabled={grade <= 0}
+                                                loading={loading}
+                                                type="primary"
+                                                onClick={handleOk}
+                                            >
+                                                {t("home-page-AI-teacher-modal.rate.submit")}
+                                            </Button>,
+                                        ]}
+                                        maskClosable={false}
+                                        open={true}
+                                        title={
+                                            <div style={{ display: "flex", alignItems: "stretch" }}>
+                                                <span>
+                                                    {t("home-page-AI-teacher-modal.rate.title")}{" "}
+                                                </span>
+                                                <SVGGood />
+                                            </div>
+                                        }
+                                        onOk={handleOk}
+                                    >
+                                        <Rate
+                                            character={<SVGRate active={grade > 3} />}
+                                            className="ai-page-rate-ui"
+                                            style={{ color: grade > 3 ? "#FE4D00" : "#007AFF" }}
+                                            value={grade}
+                                            onHoverChange={(grade: number) => {
+                                                if (grade) {
+                                                    setGrade(grade);
+                                                }
+                                            }}
+                                        />
+                                    </Modal>
                                 }
-                                setGrade={() => {
-                                    return setGradeRoom({
-                                        roomUUID: classroomStore.roomUUID,
-                                        userUUID: classroomStore.userUUID,
-                                        grade: value,
-                                    });
-                                }}
+                                setShowRateModal={setShowRateModal}
+                                showRateModal={showRateModal}
                                 {...exitConfirmModalProps}
                             />
                             <RoomStatusStoppedModal

packages/flat-pages/src/components/ExitRoomConfirm.tsx

@@ -23,6 +23,8 @@ export interface ExitRoomConfirmProps {
     isReturnLoading: boolean;
     isStopLoading: boolean;
     rateModal?: React.ReactNode;
+    showRateModal?: boolean;
+    setShowRateModal?: (showRateModal: boolean) => void;
     onReturnMain: () => Promise<void>;
     onStopClass: () => Promise<void>;
     onCancel: () => void;
@@ -120,6 +122,8 @@ export const ExitRoomConfirm = observer<Omit<ExitRoomConfirmProps, "confirm">>(
         isReturnLoading,
         isStopLoading,
         rateModal,
+        showRateModal,
+        setShowRateModal,
         onReturnMain,
         onStopClass,
         ...restProps
@@ -130,6 +134,8 @@ export const ExitRoomConfirm = observer<Omit<ExitRoomConfirmProps, "confirm">>(
                     {...restProps}
                     hangLoading={isReturnLoading}
                     rateModal={rateModal}
+                    setShowRateModal={setShowRateModal}
+                    showRateModal={showRateModal}
                     stopLoading={isStopLoading}
                     onHang={onReturnMain}
                     onStop={onStopClass}