Fix re-enter + Cleanup

src/app/organisms/room/JitsiRoom.jsx

@@ -12,8 +12,8 @@ import Button from '../../atoms/button/Button';
 
 const TOPIC_JITSI_CALL = 'd38dd491fefa1cfffc27f9c57f2bdb4a'
 
-function JitsiRoom(props) {
-  const { jitsiCallId, setJitsiCallId } = props;
+function JitsiRoom() {
+  const [jitsiCallId, setJitsiCallId] = useState(null);
 
   const [roomInfo, setRoomInfo] = useState({
     roomTimeline: null,
@@ -31,12 +31,15 @@ function JitsiRoom(props) {
       const roomTimeline = new RoomTimeline(rId);
       const topic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic
 
-      if (mx.getRoom(rId) && topic === TOPIC_JITSI_CALL) {
+      if (mx.getRoom(rId) && topic === TOPIC_JITSI_CALL && jitsiCallId !== rId) {
         if (confirm('Do you want to join this call?')) {
+          setJitsiCallId(rId);
+          setRoomName(roomTimeline.roomName);
           setRoomInfo({
             roomTimeline,
             eventId: eId ?? null,
           });
+          setCounter(counter + 1);
         } else if (!jitsiCallId) {
           setRoomInfo({
             roomTimeline: null,
@@ -50,14 +53,6 @@ function JitsiRoom(props) {
     return () => {
       navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
     };
-  }, [mx, roomInfo]);
-
-  useEffect(() => {
-    if (roomInfo?.roomTimeline) {
-      setJitsiCallId(roomInfo.roomTimeline.roomId);
-      setRoomName(roomInfo.roomTimeline.roomName);
-      setCounter(counter + 1);
-    }
   }, [roomInfo]);
 
   const { roomTimeline } = roomInfo;

src/app/organisms/room/Room.jsx

@@ -12,9 +12,8 @@ import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
 import RoomSettings from './RoomSettings';
 import PeopleDrawer from './PeopleDrawer';
-import Button from '../../atoms/button/Button';
 
-function Room(props) {
+function Room() {
   const [roomInfo, setRoomInfo] = useState({
     roomTimeline: null,
     eventId: null,

src/app/templates/client/Client.jsx

@@ -27,7 +27,6 @@ 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);
@@ -171,13 +170,13 @@ function Client() {
       onDrop={handleDrop}
     >
       <div className="jitsi_room__wrapper">
-        <JitsiRoom jitsiCallId={jitsiCallId} setJitsiCallId={setJitsiCallId} />
+        <JitsiRoom />
       </div>
       <div className="navigation__wrapper" ref={navWrapperRef}>
         <Navigation />
       </div>
       <div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}>
-        <Room jitsiCallId={jitsiCallId} setJitsiCallId={setJitsiCallId} />
+        <Room />
       </div>
       <Windows />
       <Dialogs />