fix: resolve error display (#379)

client/src/components/Messaging/UserStatusInfo.tsx

@@ -4,6 +4,7 @@ import ThemeToggle from "../ThemeToggle/index";
 import imageRetryIcon from "./assets/image-retry.png";
 import DeleteChatLink from "../DeleteChatLink";
 import Button from "../Button";
+import ShowError from "../ShowError";
 import { IChatE2EE, IE2ECall } from "@chat-e2ee/service";
 
 export const UserStatusInfo = ({
@@ -17,47 +18,50 @@ export const UserStatusInfo = ({
   getSetUsers: any;
   channelID: any;
   handleDeleteLink: any;
-  chate2ee: IChatE2EE
+  chate2ee: IChatE2EE;
 }) => {
-  const [ call, setCall ] = useState<IE2ECall>(null);
+  const [call, setCall] = useState<IE2ECall>(null);
   const [loading, setLoading] = useState(false);
-  const [ callState, setCallState ] = useState<RTCPeerConnectionState>(undefined);
+  const [callState, setCallState] = useState<RTCPeerConnectionState>(undefined);
+  const [showError, setShowError] = useState(false);
+  const [error, setError] = useState("");
 
   useEffect(() => {
-    chate2ee.on('call-added', (call) => {
+    chate2ee.on("call-added", (call) => {
       setCall(call);
     });
 
-    chate2ee.on('call-removed', () => {
+    chate2ee.on("call-removed", () => {
       setCall(null);
     });
   }, [chate2ee]);
 
   useEffect(() => {
-    if(call) {
-      call.on('state-changed', () => {
+    if (call) {
+      call.on("state-changed", () => {
         setCallState(call.state);
-      })
+      });
     }
-  }, [call])
+  }, [call]);
   const makeCall = async () => {
-    if(call) {
-      console.error('call is already active');
+    if (call) {
+      console.error("call is already active");
       return;
     }
 
     try {
       const newCall = await chate2ee.startCall();
       setCall(newCall);
-    }catch(err) {
-      alert('Not supported.');
+    } catch (err: any) {
+      setError(err.message);
+      setShowError(true);
     }
-  }
+  };
 
-  const stopCall = async() => {
+  const stopCall = async () => {
     chate2ee.endCall();
     setCall(null);
-  }
+  };
 
   const fetchKeyAgain = async () => {
     if (loading) return;
@@ -69,7 +73,7 @@ export const UserStatusInfo = ({
 
   return (
     <>
-      { call && (<CallStatus state={callState}/>) }
+      {call && <CallStatus state={callState} />}
       <div className={styles.userInfo}>
         {online ? (
           <span className={styles.userInfoOnline}>
@@ -88,34 +92,30 @@ export const UserStatusInfo = ({
             />
           </div>
         )}
-        {
-          online && <CallButton makeCall={makeCall} stopCall={stopCall} call={call}/>
-        }
+        {online && <CallButton makeCall={makeCall} stopCall={stopCall} call={call} />}
         <DeleteChatLink handleDeleteLink={handleDeleteLink} />
         <ThemeToggle />
       </div>
+      {showError && <ShowError errorMessage={error} onClose={() => setShowError(false)} />}
     </>
   );
 };
 
+const CallStatus = ({ state }: { state: any }) => {
+  return <div className={styles.callStatusBar}>Call Status: {state}</div>;
+};
 
-const CallStatus = ({state}: {state:any}) => {
-  return(
-    <div className={styles.callStatusBar}>Call Status: {state}</div>
-  )
-}
-
-const CallButton = ({ makeCall, stopCall, call }: { makeCall: any, stopCall: any, call: any }) => {
+const CallButton = ({ makeCall, stopCall, call }: { makeCall: any; stopCall: any; call: any }) => {
   const callButtonHandler = () => {
-    if(call) {
+    if (call) {
       stopCall();
-    }else {
+    } else {
       makeCall();
     }
-  }
+  };
   return (
     <div>
-      <Button  onClick={callButtonHandler} label = { call ? 'Stop' : 'Call' } type="primary"/>
+      <Button onClick={callButtonHandler} label={call ? "Stop" : "Call"} type="primary" />
     </div>
-  )
-}
+  );
+};

client/src/components/ShowError/Style.module.css

@@ -0,0 +1,43 @@
+.bg{
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.6);
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 50;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.err{
+    background-color: red;
+    color: white; 
+    display: flex; 
+    flex-direction: column;
+    border-radius: 0.375rem; 
+    padding: 0.35rem;
+    margin: 0; 
+    position: relative; 
+    width: 16rem; 
+    font-size: 20px;
+    text-align: center;  
+}
+
+.heading{
+    color: white;
+    padding: 0;
+    margin: 0;
+    margin-top: 0.5rem; 
+
+}
+
+.closeIcon{
+    margin: 0.25rem;
+    position:absolute;
+    cursor: pointer;
+    top: 0.1em;
+    right: 0.1em;
+}

client/src/components/ShowError/index.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import styles from "./Style.module.css";
+import { MdClose } from "react-icons/md";
+
+type ShowErrorProps = {
+  errorMessage: string;
+  onClose: (
+    event: React.MouseEvent<HTMLDivElement | HTMLSpanElement> | React.KeyboardEvent<HTMLDivElement>
+  ) => void;
+};
+
+const ShowError = (props: ShowErrorProps) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Enter" || e.key === " ") {
+      props.onClose(e);
+      e.stopPropagation();
+    }
+  };
+
+  return (
+    <div
+      className={styles.bg}
+      onClick={props.onClose}
+      tabIndex={-1}
+      onKeyDown={handleKeyDown}
+      role="button"
+    >
+      <div
+        role="button"
+        tabIndex={0}
+        className={styles.err}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onKeyDown={handleKeyDown}
+      >
+        <h3 className={styles.heading}>Error</h3>
+        <span onClick={props.onClose} role="button" tabIndex={0} onKeyDown={handleKeyDown}>
+          <MdClose className={styles.closeIcon} title="close" size={25} />
+        </span>
+        <p>{props.errorMessage}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ShowError;