From 703dcd0fdfaed77ef1a4851a6c26354c7ce47c4f Mon Sep 17 00:00:00 2001
From: hyrious <hyrious@outlook.com>
Date: Wed, 10 May 2023 15:19:51 +0800
Subject: [PATCH] refactor(flat-components): update raise hand styles

---
 .../ClassroomPage/RaiseHand/index.tsx         | 30 ++++++++++---------
 .../flat-stores/src/classroom-store/index.ts  |  8 +++--
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx b/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx
index 84e77fe1c9c..e3cb31b4fc8 100644
--- a/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx
+++ b/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx
@@ -1,10 +1,11 @@
 import "./style.less";
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import classNames from "classnames";
 import { isInteger } from "lodash-es";
 import { useTranslate } from "@netless/flat-i18n";
 import { SVGHandUp } from "../../FlatIcons";
+import { useIsUnMounted } from "../../../utils/hooks";
 
 export interface RaiseHandProps {
     isRaiseHand?: boolean;
@@ -18,30 +19,31 @@ export const RaiseHand: React.FC<RaiseHandProps> = ({
     onRaiseHandChange,
 }) => {
     const t = useTranslate();
-    const [active, setActive] = useState(false);
+    const isUnmounted = useIsUnMounted();
+    // if temp is not null, use temp, otherwise use isRaiseHand
+    const [temp, setTemp] = useState<boolean | null>(null);
+
+    const active = temp === null ? isRaiseHand : temp;
 
     const onClick = useCallback(() => {
         onRaiseHandChange();
-        setActive(true);
-    }, [onRaiseHandChange]);
-
-    useEffect(() => {
-        if (active) {
-            const timer = setTimeout(() => setActive(false), 3000);
-            return () => clearTimeout(timer);
-        }
-        return;
-    }, [active]);
+        setTemp(!active);
+        setTimeout(() => {
+            if (!isUnmounted.current) {
+                setTemp(null);
+            }
+        }, 3000);
+    }, [active, isUnmounted, onRaiseHandChange]);
 
     return disableHandRaising ? null : (
         <button
             className={classNames("raise-hand-btn", {
-                "is-active": isRaiseHand || active,
+                "is-active": active,
             })}
             title={t("raise-your-hand")}
             onClick={onClick}
         >
-            <SVGHandUp active={isRaiseHand || active} />
+            <SVGHandUp active={active} />
         </button>
     );
 };
diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
index d404cc6fad1..dc431b92d02 100644
--- a/packages/flat-stores/src/classroom-store/index.ts
+++ b/packages/flat-stores/src/classroom-store/index.ts
@@ -1056,13 +1056,17 @@ export class ClassroomStore {
         }
 
         if (this.users.currentUser) {
+            const nextState = !this.users.currentUser.isRaiseHand;
+
             void this.rtm.sendPeerCommand(
                 "raise-hand",
-                { roomUUID: this.roomUUID, raiseHand: !this.users.currentUser.isRaiseHand },
+                { roomUUID: this.roomUUID, raiseHand: nextState },
                 this.ownerUUID,
             );
 
-            message.info(FlatI18n.t("have-raised-hand"));
+            if (nextState) {
+                message.info(FlatI18n.t("have-raised-hand"));
+            }
         }
     };