feature(ui) - disable call on disconnect

frontend/app/components/Assist/components/AssistActions/AassistActions.css

@@ -3,4 +3,9 @@
     fill: $red
   }
   color: $red;
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
 }

frontend/app/components/Assist/components/AssistActions/AssistActions.tsx

@@ -17,18 +17,26 @@ interface Props {
   peerConnectionStatus: ConnectionStatus
 }
 
-function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus }: Props) {
-  const [showChat, setShowChat] = useState(false)
+function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus }: Props) {  
   const [ incomeStream, setIncomeStream ] = useState<MediaStream | null>(null);
   const [ localStream, setLocalStream ] = useState<MediaStream | null>(null);
   const [ endCall, setEndCall ] = useState<()=>void>(()=>{});
+  const [ disconnected, setDisconnected ] = useState(false);
 
   useEffect(() => {
     return endCall
   }, [])
 
+  useEffect(() => {
+    console.log('peerConnectionStatus', peerConnectionStatus)
+    if (peerConnectionStatus == 4) {
+      toast.info(`Live session is closed.`);
+      setDisconnected(true)
+    }    
+  }, [peerConnectionStatus])
+
   function onClose(stream) {    
-    stream.getTracks().forEach(t=>t.stop());
+    stream.getTracks().forEach(t=>t.stop());    
   }
 
   function onReject() {
@@ -39,8 +47,6 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
     toast.error(`Something went wrong!`);
   }
 
-  console.log('peerConnectionStatus', peerConnectionStatus)
-
   function call() { 
     navigator.mediaDevices.getUserMedia({video:true, audio:true})
       .then(lStream => {
@@ -62,7 +68,13 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
       <Popup
         trigger={
           <div
-            className={cn('cursor-pointer p-2 mr-2 flex items-center', {[stl.inCall] : inCall })}
+            className={
+              cn(
+                'cursor-pointer p-2 mr-2 flex items-center',
+                {[stl.inCall] : inCall },
+                {[stl.disabled]: disconnected}
+              )
+            }
             onClick={inCall ? endCall : call}
             role="button"
           >

frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx

@@ -20,8 +20,7 @@ function LiveSessionList(props: Props) {
     props.fetchLiveList();
   }, [])
 
-  useEffect(() => {
-    console.log(filters)
+  useEffect(() => {    
     if (filters) {
       const userIdFilter = filters.filter(i => i.key === 'USERID').first()
       if (userIdFilter)