Move voice channel switching logic to navigation

src/app/organisms/navigation/Drawer.jsx

@@ -36,7 +36,7 @@ function useSystemState() {
   return [systemState];
 }
 
-function Drawer() {
+function Drawer({jitsiCallId}) {
   const [systemState] = useSystemState();
   const [selectedTab] = useSelectedTab();
   const [spaceId] = useSelectedSpace();
@@ -72,16 +72,16 @@ function Drawer() {
         <div className="rooms__wrapper">
           <ScrollView ref={scrollRef} autoHide>
             <div className="rooms-container">
-              {
+              {selectedTab !== cons.tabs.DIRECTS ? (
-                selectedTab !== cons.tabs.DIRECTS
+                <Home spaceId={spaceId} jitsiCallId={jitsiCallId} />
-                  ? <Home spaceId={spaceId} />
+              ) : (
-                  : <Directs size={roomList.directs.size} />
+                <Directs size={roomList.directs.size} />
-              }
+              )}
             </div>
           </ScrollView>
         </div>
       </div>
-      { systemState !== null && (
+      {systemState !== null && (
         <div className="drawer__state">
           <Text>{systemState.status}</Text>
         </div>

src/app/organisms/navigation/Home.jsx

@@ -12,7 +12,7 @@ import RoomsCategory from './RoomsCategory';
 import { useCategorizedSpaces } from '../../hooks/useCategorizedSpaces';
 
 const drawerPostie = new Postie();
-function Home({ spaceId }) {
+function Home({ spaceId, jitsiCallId }) {
   const mx = initMatrix.matrixClient;
   const { roomList, notifications, accountData } = initMatrix;
   const { spaces, rooms, directs } = roomList;
@@ -68,37 +68,51 @@ function Home({ spaceId }) {
 
   return (
     <>
-      { !isCategorized && spaceIds.length !== 0 && (
+      {!isCategorized && spaceIds.length !== 0 && (
-        <RoomsCategory name="Spaces" roomIds={spaceIds.sort(roomIdByAtoZ)} drawerPostie={drawerPostie} />
+        <RoomsCategory
+          name="Spaces"
+          roomIds={spaceIds.sort(roomIdByAtoZ)}
+          drawerPostie={drawerPostie}
+        />
       )}
 
-      { roomIds.length !== 0 && (
+      {roomIds.length !== 0 && (
-        <RoomsCategory name="Rooms" roomIds={roomIds.sort(roomIdByAtoZ)} drawerPostie={drawerPostie} />
+        <RoomsCategory
+          name="Rooms"
+          roomIds={roomIds.sort(roomIdByAtoZ)}
+          drawerPostie={drawerPostie}
+          jitsiCallId={jitsiCallId}
+        />
       )}
 
-      { directIds.length !== 0 && (
+      {directIds.length !== 0 && (
-        <RoomsCategory name="People" roomIds={directIds.sort(roomIdByActivity)} drawerPostie={drawerPostie} />
+        <RoomsCategory
+          name="People"
+          roomIds={directIds.sort(roomIdByActivity)}
+          drawerPostie={drawerPostie}
+        />
       )}
 
-      { isCategorized && [...categories.keys()].sort(roomIdByAtoZ).map((catId) => {
+      {isCategorized &&
-        const rms = [];
+        [...categories.keys()].sort(roomIdByAtoZ).map((catId) => {
-        const dms = [];
+          const rms = [];
-        categories.get(catId).forEach((id) => {
+          const dms = [];
-          if (directs.has(id)) dms.push(id);
+          categories.get(catId).forEach((id) => {
-          else rms.push(id);
+            if (directs.has(id)) dms.push(id);
-        });
+            else rms.push(id);
-        rms.sort(roomIdByAtoZ);
+          });
-        dms.sort(roomIdByActivity);
+          rms.sort(roomIdByAtoZ);
-        return (
+          dms.sort(roomIdByActivity);
-          <RoomsCategory
+          return (
-            key={catId}
+            <RoomsCategory
-            spaceId={catId}
+              key={catId}
-            name={mx.getRoom(catId).name}
+              spaceId={catId}
-            roomIds={rms.concat(dms)}
+              name={mx.getRoom(catId).name}
-            drawerPostie={drawerPostie}
+              roomIds={rms.concat(dms)}
-          />
+              drawerPostie={drawerPostie}
-        );
+            />
-      })}
+          );
+        })}
     </>
   );
 }

src/app/organisms/navigation/Navigation.jsx

@@ -4,11 +4,11 @@ import './Navigation.scss';
 import SideBar from './SideBar';
 import Drawer from './Drawer';
 
-function Navigation() {
+function Navigation({jitsiCallId}) {
   return (
     <div className="navigation">
       <SideBar />
-      <Drawer />
+      <Drawer jitsiCallId={jitsiCallId} />
     </div>
   );
 }

src/app/organisms/navigation/RoomsCategory.jsx

@@ -19,10 +19,11 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
 import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
 
 function RoomsCategory({
-  spaceId, name, hideHeader, roomIds, drawerPostie,
+  spaceId, name, hideHeader, roomIds, drawerPostie, jitsiCallId
 }) {
   const { spaces, directs } = initMatrix.roomList;
   const [isOpen, setIsOpen] = useState(true);
+  const TOPIC_JITSI_CALL = 'd38dd491fefa1cfffc27f9c57f2bdb4a'
 
   const openSpaceOptions = (e) => {
     e.preventDefault();
@@ -45,6 +46,7 @@ function RoomsCategory({
   const renderSelector = (roomId) => {
     const isSpace = spaces.has(roomId);
     const isDM = directs.has(roomId);
+    const mx = initMatrix.matrixClient
 
     return (
       <Selector
@@ -52,7 +54,23 @@ function RoomsCategory({
         roomId={roomId}
         isDM={isDM}
         drawerPostie={drawerPostie}
-        onClick={() => (isSpace ? selectSpace(roomId) : selectRoom(roomId))}
+        onClick={() => {
+          if (isSpace) {
+            selectSpace(roomId);
+            return;
+          }
+
+          if (
+            mx.getRoom(roomId).currentState.getStateEvents('m.room.topic')[0]?.getContent()
+              .topic === TOPIC_JITSI_CALL
+          ) {
+            if (jitsiCallId !== roomId && !confirm(`Do you want to join ${mx.getRoom(roomId).name}?`)) {
+              return;
+            }
+          }
+
+          selectRoom(roomId);
+        }}
       />
     );
   };
@@ -87,6 +105,7 @@ RoomsCategory.propTypes = {
   hideHeader: PropTypes.bool,
   roomIds: PropTypes.arrayOf(PropTypes.string).isRequired,
   drawerPostie: PropTypes.shape({}).isRequired,
+  jitsiCallId: PropTypes.string
 };
 
 export default RoomsCategory;

src/app/organisms/room/JitsiRoom.jsx

@@ -15,8 +15,7 @@ import { useSelectedSpace } from '../../hooks/useSelectedSpace';
 
 const TOPIC_JITSI_CALL = 'd38dd491fefa1cfffc27f9c57f2bdb4a'
 
-function JitsiRoom({ isJitsiRoom, setIsJitsiRoom }) {
+function JitsiRoom({ isJitsiRoom, setIsJitsiRoom, jitsiCallId, setJitsiCallId }) {
-  const [jitsiCallId, setJitsiCallId] = useState(null);
   const [roomInfo, setRoomInfo] = useState({
     roomTimeline: null,
     eventId: null,
@@ -37,21 +36,21 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom }) {
         ?.getContent().topic;
 
       if (mx.getRoom(rId) && topic === TOPIC_JITSI_CALL && jitsiCallId !== rId) {
-        if (confirm('Do you want to join this call?')) {
+        setJitsiCallId(rId);
-          setJitsiCallId(rId);
+        setRoomName(roomTimeline.roomName);
-          setRoomName(roomTimeline.roomName);
+        setRoomInfo({
-          setRoomInfo({
+          roomTimeline,
-            roomTimeline,
+          eventId: eId ?? null,
-            eventId: eId ?? null,
+        });
-          });
+        setCounter(counter + 1);
-          setCounter(counter + 1);
-        } else if (!jitsiCallId) {
-          setRoomInfo({
-            roomTimeline: null,
-            eventId: null,
-          });
-        }
       }
+      else if (!jitsiCallId) {
+        setRoomInfo({
+          roomTimeline: null,
+          eventId: null,
+        });
+      }
+
 
       setIsJitsiRoom(topic === TOPIC_JITSI_CALL);
     };

src/app/templates/client/Client.jsx

@@ -28,6 +28,7 @@ function Client() {
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
   const [dragCounter, setDragCounter] = useState(0);
   const [isJitsiRoom, setIsJitsiRoom] = useState(false);
+  const [jitsiCallId, setJitsiCallId] = useState(null);
   const classNameHidden = 'client__item-hidden';
 
   const navWrapperRef = useRef(null);
@@ -174,10 +175,15 @@ function Client() {
       onDrop={handleDrop}
     >
       <div className="navigation__wrapper" ref={navWrapperRef}>
-        <Navigation />
+        <Navigation jitsiCallId={jitsiCallId} />
       </div>
       <div className={isJitsiRoom ? ROOM_CLASS : JITSI_ROOM_CLASS}>
-        <JitsiRoom isJitsiRoom={isJitsiRoom} setIsJitsiRoom={setIsJitsiRoom} />
+        <JitsiRoom
+          isJitsiRoom={isJitsiRoom}
+          setIsJitsiRoom={setIsJitsiRoom}
+          jitsiCallId={jitsiCallId}
+          setJitsiCallId={setJitsiCallId}
+        />
       </div>
       <div className={isJitsiRoom ? 'hidden' : ROOM_CLASS} ref={roomWrapperRef}>
         <Room isJitsiRoom={isJitsiRoom} />