refactor(flat-components): hide raise hand button if creator left (#1928

)
netless-io · May 11, 2023 · 5dc335e · 5dc335e
1 parent 134cb92
commit 5dc335e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx b/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx
@@ -1,6 +1,6 @@
 import "./style.less";
 
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 import { isInteger } from "lodash-es";
 import { useTranslate } from "@netless/flat-i18n";
@@ -10,7 +10,7 @@ import { useIsUnMounted } from "../../../utils/hooks";
 export interface RaiseHandProps {
     isRaiseHand?: boolean;
     disableHandRaising?: boolean;
-    onRaiseHandChange: () => void;
+    onRaiseHandChange: (raise: boolean) => void;
 }
 
 export const RaiseHand: React.FC<RaiseHandProps> = ({
@@ -21,14 +21,16 @@ export const RaiseHand: React.FC<RaiseHandProps> = ({
     const t = useTranslate();
     const isUnmounted = useIsUnMounted();
     // if temp is not null, use temp, otherwise use isRaiseHand
+    const timerRef = useRef(0);
     const [temp, setTemp] = useState<boolean | null>(null);
 
     const active = temp === null ? isRaiseHand : temp;
 
     const onClick = useCallback(() => {
-        onRaiseHandChange();
+        onRaiseHandChange(!active);
         setTemp(!active);
-        setTimeout(() => {
+        clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(() => {
             if (!isUnmounted.current) {
                 setTemp(null);
             }

diff --git a/packages/flat-pages/src/components/Whiteboard.tsx b/packages/flat-pages/src/components/Whiteboard.tsx
@@ -28,7 +28,6 @@ import { UserWindows } from "./UserWindows";
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
     classRoomStore: ClassroomStore;
-    disableHandRaising?: boolean;
 }
 
 const noop = (): void => {
@@ -38,7 +37,6 @@ const noop = (): void => {
 export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
     whiteboardStore,
     classRoomStore,
-    disableHandRaising,
 }) {
     const t = useTranslate();
     const { room, windowManager, phase, whiteboard } = whiteboardStore;
@@ -55,6 +53,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
 
     const isReconnecting = phase === RoomPhase.Reconnecting;
     const handRaisingCount = classRoomStore.users.handRaisingJoiners.length;
+    const creatorHasLeft = !classRoomStore.users.creator || classRoomStore.users.creator.hasLeft;
 
     useEffect(() => {
         return whiteboard.events.on("exportAnnotations", () => showSaveAnnotation(true));
@@ -213,7 +212,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                         !classRoomStore.users.currentUser.isSpeak && (
                             <div className="raise-hand-container">
                                 <RaiseHand
-                                    disableHandRaising={disableHandRaising}
+                                    disableHandRaising={creatorHasLeft}
                                     isRaiseHand={classRoomStore.users.currentUser?.isRaiseHand}
                                     onRaiseHandChange={classRoomStore.onToggleHandRaising}
                                 />

diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
@@ -1050,21 +1050,21 @@ export class ClassroomStore {
     };
 
     /** When current user (who is a joiner) raises hand */
-    public onToggleHandRaising = (): void => {
+    public onToggleHandRaising = (raise?: boolean): void => {
         if (this.isCreator || this.users.currentUser?.isSpeak) {
             return;
         }
 
         if (this.users.currentUser) {
-            const nextState = !this.users.currentUser.isRaiseHand;
+            raise ??= !this.users.currentUser.isRaiseHand;
 
             void this.rtm.sendPeerCommand(
                 "raise-hand",
-                { roomUUID: this.roomUUID, raiseHand: nextState },
+                { roomUUID: this.roomUUID, raiseHand: raise },
                 this.ownerUUID,
             );
 
-            if (nextState) {
+            if (raise) {
                 message.info(FlatI18n.t("have-raised-hand"));
             }
         }