Wip call handling

src/app/organisms/room/JitsiRoom.jsx

@@ -10,12 +10,13 @@ import { openNavigation } from '../../../client/action/navigation';
 import { getUsername } from '../../../util/matrixUtil';
 import Button from '../../atoms/button/Button';
 
-function JitsiRoom() {
+function JitsiRoom(props) {
+  const { jitsiCallId, setJitsiCallId } = props;
+
   const [roomInfo, setRoomInfo] = useState({
     roomTimeline: null,
     eventId: null,
   });
-  const [activeCall, setActiveCall] = useState(false);
   const [roomName, setRoomName] = useState('');
   const [roomId, setRoomId] = useState('');
   const openerRef = useRef(null);
@@ -27,15 +28,23 @@ function JitsiRoom() {
       roomInfo.roomTimeline?.removeInternalListeners();
       if (mx.getRoom(rId)) {
         const roomTimeline = new RoomTimeline(rId);
+        if (
+          roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic ===
+            'd38dd491fefa1cfffc27f9c57f2bdb4a' &&
+          confirm('aaa')
+        ) {
           setRoomInfo({
             roomTimeline,
             eventId: eId ?? null,
           });
-        if (
-          roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic ===
+        } else if (
+          roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic !==
           'd38dd491fefa1cfffc27f9c57f2bdb4a'
         ) {
-          setActiveCall(true);
+          setRoomInfo({
+            roomTimeline,
+            eventId: eId ?? null,
+          });
         }
       } else {
         // TODO: add ability to join room if roomId is invalid
@@ -46,22 +55,29 @@ function JitsiRoom() {
       }
     };
 
-    navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
-    return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
-    };
+    navigation.once(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
   }, [mx, roomInfo]);
 
+  useEffect(() => {
+    if (
+      roomInfo.roomTimeline?.room.currentState.getStateEvents('m.room.topic')[0]?.getContent()
+        .topic === 'd38dd491fefa1cfffc27f9c57f2bdb4a' &&
+      !jitsiCallId
+    ) {
+      setJitsiCallId(roomInfo.roomTimeline.roomId);
+      if (roomName === '') {
+        setRoomName(roomInfo.roomTimeline.roomName);
+      }
+    }
+  }, [roomInfo.roomTimeline?.roomName]);
+
   const { roomTimeline } = roomInfo;
   if (roomTimeline === null) {
     setTimeout(() => openNavigation());
     return null;
   }
 
-  if (activeCall) {
-    if (roomName === '') {
-      setRoomName(roomTimeline.roomName);
-    }
+  if (jitsiCallId) {
     return (
       <div className="call">
         <div className="call_header" id="header" ref={openerRef}>
@@ -69,7 +85,7 @@ function JitsiRoom() {
         </div>
         <Button
           onClick={() => {
-            setActiveCall(false);
+            setJitsiCallId(null);
             setRoomName('');
           }}
         >
@@ -130,9 +146,7 @@ function JitsiRoom() {
         />
       </div>
     );
-  }
-
-  if (!activeCall) {
+  } else {
     return <div className="hiddenJitsiCall" />;
   }
 }

src/app/organisms/room/Room.jsx

@@ -14,7 +14,7 @@ import RoomSettings from './RoomSettings';
 import PeopleDrawer from './PeopleDrawer';
 import Button from '../../atoms/button/Button';
 
-function Room() {
+function Room(props) {
   const [roomInfo, setRoomInfo] = useState({
     roomTimeline: null,
     eventId: null,
@@ -27,8 +27,9 @@ function Room() {
     const handleRoomSelected = (rId, pRoomId, eId) => {
       roomInfo.roomTimeline?.removeInternalListeners();
       if (mx.getRoom(rId)) {
+        const roomTimeline = new RoomTimeline(rId);
         setRoomInfo({
-          roomTimeline: new RoomTimeline(rId),
+          roomTimeline,
           eventId: eId ?? null,
         });
       } else {
@@ -40,10 +41,7 @@ function Room() {
       }
     };
 
-    navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
-    return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
-    };
+    navigation.once(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
   }, [roomInfo]);
 
   useEffect(() => {
@@ -60,16 +58,11 @@ function Room() {
     return <Welcome />;
   }
 
-  if (
+  const isJitsiChannel =
     roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic ===
-    'd38dd491fefa1cfffc27f9c57f2bdb4a'
-  ) {
-    return (
-      <div className="room__content">
-        You are already in another call, do you want to switch to this one?
-        <Button>Join call</Button>
-        </div>
-    );
+    'd38dd491fefa1cfffc27f9c57f2bdb4a';
+  if (isJitsiChannel) {
+    return null;
   }
 
   return (

src/app/templates/client/Client.jsx

@@ -27,6 +27,7 @@ function Client() {
   const [isLoading, changeLoading] = useState(true);
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
   const [dragCounter, setDragCounter] = useState(0);
+  const [jitsiCallId, setJitsiCallId] = useState(null);
   const classNameHidden = 'client__item-hidden';
 
   const navWrapperRef = useRef(null);
@@ -45,19 +46,16 @@ function Client() {
     navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
     navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
 
-    return (() => {
+    return () => {
       navigation.removeListener(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
       navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
-    });
+    };
   }, []);
 
   useEffect(() => {
     let counter = 0;
     const iId = setInterval(() => {
-      const msgList = [
-        'Almost there...',
-        'Looks like you have a lot of stuff to heat up!',
-      ];
+      const msgList = ['Almost there...', 'Looks like you have a lot of stuff to heat up!'];
       if (counter === msgList.length - 1) {
         setLoadingMsg(msgList[msgList.length - 1]);
         clearInterval(iId);
@@ -81,22 +79,28 @@ function Client() {
         <div className="loading__menu">
           <ContextMenu
             placement="bottom"
-            content={(
+            content={
               <>
                 <MenuItem onClick={() => initMatrix.clearCacheAndReload()}>
                   Clear cache & reload
                 </MenuItem>
                 <MenuItem onClick={() => initMatrix.logout()}>Logout</MenuItem>
               </>
+            }
+            render={(toggle) => (
+              <IconButton size="extra-small" onClick={toggle} src={VerticalMenuIC} />
             )}
-            render={(toggle) => <IconButton size="extra-small" onClick={toggle} src={VerticalMenuIC} />}
           />
         </div>
         <Spinner />
-        <Text className="loading__message" variant="b2">{loadingMsg}</Text>
+        <Text className="loading__message" variant="b2">
+          {loadingMsg}
+        </Text>
 
         <div className="loading__appname">
-          <Text variant="h2" weight="medium">Cinny</Text>
+          <Text variant="h2" weight="medium">
+            Cinny
+          </Text>
         </div>
       </div>
     );
@@ -167,13 +171,13 @@ function Client() {
       onDrop={handleDrop}
     >
       <div className="jitsi_room__wrapper">
-        <JitsiRoom />
+        <JitsiRoom jitsiCallId={jitsiCallId} setJitsiCallId={setJitsiCallId} />
       </div>
       <div className="navigation__wrapper" ref={navWrapperRef}>
         <Navigation />
       </div>
       <div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}>
-        <Room />
+        <Room jitsiCallId={jitsiCallId} setJitsiCallId={setJitsiCallId} />
       </div>
       <Windows />
       <Dialogs />