From a0edca70f9778da331194fc4c60ab0d5e4559dd7 Mon Sep 17 00:00:00 2001
From: Quan HL <quan.luuhoang8@gmail.com>
Date: Tue, 31 Oct 2023 16:08:42 +0700
Subject: [PATCH] fix review comments

---
 src/components/switch/index.tsx | 12 ++++++++----
 src/window/phone/dial-pad.tsx   | 26 ++++++++++++++++++++++----
 src/window/phone/index.tsx      | 19 ++++++++++++-------
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/components/switch/index.tsx b/src/components/switch/index.tsx
index 6b19e0a..b90af77 100644
--- a/src/components/switch/index.tsx
+++ b/src/components/switch/index.tsx
@@ -5,12 +5,14 @@ type JambonzSwitchProbs = {
   onlabel: string;
   offLabel: string;
   initialCheck: boolean;
+  isDisabled?: boolean;
   onChange: (value: boolean) => void;
 };
 function JambonzSwitch({
   onlabel,
   offLabel,
   initialCheck,
+  isDisabled = false,
   onChange,
 }: JambonzSwitchProbs) {
   const [isToggled, setToggled] = useState(initialCheck);
@@ -24,12 +26,14 @@ function JambonzSwitch({
       position="relative"
       w="90px"
       h="30px"
-      bg={isToggled ? "green.500" : "grey.500"}
+      bg={isToggled && !isDisabled ? "green.500" : "grey.500"}
       borderRadius="full"
       onClick={() => {
-        const value = !isToggled;
-        setToggled(value);
-        onChange(value);
+        if (!isDisabled) {
+          const value = !isToggled;
+          setToggled(value);
+          onChange(value);
+        }
       }}
       _hover={{ cursor: "pointer" }}
     >
diff --git a/src/window/phone/dial-pad.tsx b/src/window/phone/dial-pad.tsx
index 22fde50..4c7aae0 100644
--- a/src/window/phone/dial-pad.tsx
+++ b/src/window/phone/dial-pad.tsx
@@ -1,6 +1,6 @@
 import { Box, Button, HStack, VStack } from "@chakra-ui/react";
 import DialPadAudioElements from "./DialPadSoundElement";
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 
 type DialPadProbs = {
   handleDigitPress: (digit: string) => void;
@@ -9,6 +9,8 @@ type DialPadProbs = {
 const keySounds = new DialPadAudioElements();
 
 export const DialPad = ({ handleDigitPress }: DialPadProbs) => {
+  const selfRef = useRef<HTMLDivElement | null>(null);
+  const isVisibleRef = useRef(false);
   const buttons = [
     ["1", "2", "3"],
     ["4", "5", "6"],
@@ -22,20 +24,36 @@ export const DialPad = ({ handleDigitPress }: DialPadProbs) => {
         e.key
       )
     ) {
-      keySounds?.playKeyTone(e.key);
-      handleDigitPress(e.key);
+      if (isVisibleRef.current) {
+        keySounds?.playKeyTone(e.key);
+        handleDigitPress(e.key);
+      }
     }
   };
 
   useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        isVisibleRef.current = entry.isIntersecting;
+      },
+      {
+        threshold: 0.5,
+      }
+    );
+    if (selfRef.current) {
+      observer.observe(selfRef.current);
+    }
     document.addEventListener("keydown", handleKeyDown);
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
+      if (selfRef.current) {
+        observer.unobserve(selfRef.current);
+      }
     };
   }, []);
 
   return (
-    <Box p={2} w="full">
+    <Box p={2} w="full" ref={selfRef}>
       <VStack w="full" bg="grey.500" spacing={0.5}>
         {buttons.map((row, rowIndex) => (
           <HStack key={rowIndex} justifyContent="space-between" spacing={0.5}>
diff --git a/src/window/phone/index.tsx b/src/window/phone/index.tsx
index 8ec8698..8bbac54 100644
--- a/src/window/phone/index.tsx
+++ b/src/window/phone/index.tsx
@@ -156,7 +156,9 @@ export const Phone = ({
   }, [calledANumber]);
 
   useEffect(() => {
-    setIsForceChangeUaStatus(false);
+    if (status === "online" || status === "offline") {
+      setIsForceChangeUaStatus(false);
+    }
   }, [status]);
 
   // useEffect(() => {
@@ -236,12 +238,14 @@ export const Phone = ({
 
     sipClient.on(SipConstants.UA_DISCONNECTED, (args) => {
       setStatus("disconnected");
-      toast({
-        title: `Cannot connect to ${sipServerAddress}`,
-        status: "warning",
-        duration: DEFAULT_TOAST_DURATION,
-        isClosable: true,
-      });
+      if (args.error) {
+        toast({
+          title: `Cannot connect to ${sipServerAddress}, ${args.reason}`,
+          status: "warning",
+          duration: DEFAULT_TOAST_DURATION,
+          isClosable: true,
+        });
+      }
     });
     // Call Status
     sipClient.on(SipConstants.SESSION_RINGING, (args) => {
@@ -423,6 +427,7 @@ export const Phone = ({
                 <Circle size="8px" bg={isOnline() ? "green.500" : "gray.500"} />
                 <Spacer />
                 <JambonzSwitch
+                  isDisabled={isForceChangeUaStatus}
                   onlabel="Online"
                   offLabel="Offline"
                   initialCheck={isOnline() || isForceChangeUaStatus}