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,11 +72,11 @@ 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>

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;
@@ -69,18 +69,32 @@ function Home({ spaceId }) {
   return (
     <>
       {!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 && (
-        <RoomsCategory name="Rooms" roomIds={roomIds.sort(roomIdByAtoZ)} drawerPostie={drawerPostie} />
+        <RoomsCategory
+          name="Rooms"
+          roomIds={roomIds.sort(roomIdByAtoZ)}
+          drawerPostie={drawerPostie}
+          jitsiCallId={jitsiCallId}
+        />
       )}
 
       {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 &&
+        [...categories.keys()].sort(roomIdByAtoZ).map((catId) => {
           const rms = [];
           const dms = [];
           categories.get(catId).forEach((id) => {

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,7 +36,6 @@ 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);
         setRoomName(roomTimeline.roomName);
         setRoomInfo({
@@ -45,13 +43,14 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom }) {
           eventId: eId ?? null,
         });
         setCounter(counter + 1);
-        } else if (!jitsiCallId) {
+      }
+      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} />