Fix app stuck on welcome screen in small device

diff --git a/src/app/organisms/invite-list/InviteList.jsx b/src/app/organisms/invite-list/InviteList.jsx
index 03a94d69070b8e2dd78a55f21db1559b432e9ae7..65920704a4a0abbcd18b236858995e8c006812e8 100644 (file)
--- a/src/app/organisms/invite-list/InviteList.jsx
+++ b/src/app/organisms/invite-list/InviteList.jsx
@@ -5,7 +5,7 @@ import './InviteList.scss';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import * as roomActions from '../../../client/action/room';
-import { selectRoom, selectTab, openNavigation } from '../../../client/action/navigation';
+import { selectRoom, selectTab } from '../../../client/action/navigation';
 
 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
@@ -28,7 +28,6 @@ function InviteList({ isOpen, onRequestClose }) {
     procInvite.add(roomId);
     changeProcInvite(new Set(Array.from(procInvite)));
     roomActions.leave(roomId, isDM);
-    openNavigation();
   }
   function updateInviteList(roomId) {
     if (procInvite.has(roomId)) procInvite.delete(roomId);

diff --git a/src/app/organisms/room/Room.jsx b/src/app/organisms/room/Room.jsx
index 4a1a969d6e7f737ce6718faa69424e6b6785b9a5..447686af820990a76a566ad06640c184b87d5bfb 100644 (file)
--- a/src/app/organisms/room/Room.jsx
+++ b/src/app/organisms/room/Room.jsx
@@ -6,6 +6,7 @@ import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import RoomTimeline from '../../../client/state/RoomTimeline';
 import navigation from '../../../client/state/navigation';
+import { openNavigation } from '../../../client/action/navigation';
 
 import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
@@ -53,7 +54,10 @@ function Room() {
   }, []);
 
   const { roomTimeline, eventId } = roomInfo;
-  if (roomTimeline === null) return <Welcome />;
+  if (roomTimeline === null) {
+    setTimeout(() => openNavigation());
+    return <Welcome />;
+  }
 
   return (
     <div className="room">

diff --git a/src/app/organisms/room/RoomSettings.jsx b/src/app/organisms/room/RoomSettings.jsx
index b75ca7fcb49dd5533440461ae245520abff4ccc9..8d14c18dbdd38ea9736ac4b36a0af4fb03a2417b 100644 (file)
--- a/src/app/organisms/room/RoomSettings.jsx
+++ b/src/app/organisms/room/RoomSettings.jsx
@@ -7,7 +7,7 @@ import { blurOnBubbling } from '../../atoms/button/script';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { openInviteUser, toggleRoomSettings, openNavigation } from '../../../client/action/navigation';
+import { openInviteUser, toggleRoomSettings } from '../../../client/action/navigation';
 import * as roomActions from '../../../client/action/room';
 
 import Text from '../../atoms/text/Text';
@@ -88,7 +88,6 @@ function GeneralSettings({ roomId }) {
           onClick={() => {
             if (confirm('Are you sure that you want to leave this room?')) {
               roomActions.leave(roomId);
-              openNavigation();
             }
           }}
           iconSrc={LeaveArrowIC}

diff --git a/src/app/organisms/room/RoomViewCmdBar.jsx b/src/app/organisms/room/RoomViewCmdBar.jsx
index a20afdb706f9e8422af2d069f465eeadb210bac7..5bbc0aae781e215f3ed8d13173a95fc6b8b4af20 100644 (file)
--- a/src/app/organisms/room/RoomViewCmdBar.jsx
+++ b/src/app/organisms/room/RoomViewCmdBar.jsx
@@ -14,7 +14,6 @@ import {
   openCreateRoom,
   openPublicRooms,
   openInviteUser,
-  openNavigation,
 } from '../../../client/action/navigation';
 import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
 import AsyncSearch from '../../../util/AsyncSearch';
@@ -47,7 +46,6 @@ const commands = [{
   description: 'Leave current room',
   exe: (roomId) => {
     roomActions.leave(roomId);
-    openNavigation();
   },
 }, {
   name: 'invite',

diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx
index db1df9d8f9898d8a8278d50daa085af79f11d7f2..a4915ad5e49e4d3d07a1638d6408f0d97470865b 100644 (file)
--- a/src/app/organisms/room/RoomViewHeader.jsx
+++ b/src/app/organisms/room/RoomViewHeader.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './RoomViewHeader.scss';
 
@@ -8,7 +8,7 @@ import { blurOnBubbling } from '../../atoms/button/script';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { toggleRoomSettings, openReusableContextMenu } from '../../../client/action/navigation';
+import { toggleRoomSettings, openReusableContextMenu, openNavigation } from '../../../client/action/navigation';
 import { togglePeopleDrawer } from '../../../client/action/settings';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
@@ -78,7 +78,7 @@ function RoomViewHeader({ roomId }) {
         src={BackArrowIC}
         className="room-header__back-btn"
         tooltip="Return to navigation"
-        onClick={() => navigation.emit(cons.events.navigation.NAVIGATION_OPENED)}
+        onClick={() => openNavigation()}
       />
       <button
         ref={roomHeaderBtnRef}

diff --git a/src/app/templates/client/Client.jsx b/src/app/templates/client/Client.jsx
index 915a01f6639de4013072992ff04b86cc7423e331..8610b62ccdd4642ada1c50639b9c2e1838eb0497 100644 (file)
--- a/src/app/templates/client/Client.jsx
+++ b/src/app/templates/client/Client.jsx
@@ -19,32 +19,22 @@ import navigation from '../../../client/state/navigation';
 import cons from '../../../client/state/cons';
 import DragDrop from '../../organisms/drag-drop/DragDrop';
 
-const classNameHidden = 'client__item-hidden';
-
 function Client() {
   const [isLoading, changeLoading] = useState(true);
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
   const [dragCounter, setDragCounter] = useState(0);
+  const classNameHidden = 'client__item-hidden';
 
-  /**
-   * @type {React.MutableRefObject<HTMLDivElement>}
-   */
   const navWrapperRef = useRef(null);
-  /**
-   * @type {React.MutableRefObject<HTMLDivElement>}
-   */
   const roomWrapperRef = useRef(null);
 
-  // #region Liston on events for compact screen sizes
   function onRoomSelected() {
-    // setActiveView(viewPossibilities.room);
-    navWrapperRef.current.classList.add(classNameHidden);
-    roomWrapperRef.current.classList.remove(classNameHidden);
+    navWrapperRef.current?.classList.add(classNameHidden);
+    roomWrapperRef.current?.classList.remove(classNameHidden);
   }
   function onNavigationSelected() {
-    // setActiveView(viewPossibilities.nav);
-    navWrapperRef.current.classList.remove(classNameHidden);
-    roomWrapperRef.current.classList.add(classNameHidden);
+    navWrapperRef.current?.classList.remove(classNameHidden);
+    roomWrapperRef.current?.classList.add(classNameHidden);
   }
 
   useEffect(() => {
@@ -56,7 +46,6 @@ function Client() {
       navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
     });
   }, []);
-  // #endregion
 
   useEffect(() => {
     let counter = 0;
@@ -98,7 +87,6 @@ function Client() {
     );
   }
 
-  // #region drag and drop
   function dragContainsFiles(e) {
     if (!e.dataTransfer.types) return false;
 
@@ -154,7 +142,6 @@ function Client() {
     initMatrix.roomsInput.setAttachment(roomId, file);
     initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
   }
-  // #endregion
 
   return (
     <div

diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js
index 8876732ed6699bcbd06623aa15adab2958d5b4be..e05cf5111f745c14950a26e89df121211069355d 100644 (file)
--- a/src/client/action/navigation.js
+++ b/src/client/action/navigation.js
@@ -23,9 +23,7 @@ export function selectRoom(roomId, eventId) {
   });
 }
 
-/**
- * Open navigation on compact screen sizes
- */
+// Open navigation on compact screen sizes
 export function openNavigation() {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_NAVIGATION,