Show topbar regardless of whether there are servers or not (#1723)

* Show topbar regardless of whether there are servers or not

* Update src/renderer/components/TeamDropdownButton.tsx

Co-authored-by: Guillermo Vayá <guivaya@gmail.com>

Co-authored-by: Guillermo Vayá <guivaya@gmail.com>

src/renderer/components/MainPage.tsx

@@ -223,6 +223,16 @@ export default class MainPage extends React.PureComponent<Props, State> {
                 }
             });
         }
+
+        window.addEventListener('click', this.handleCloseTeamsDropdown);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('click', this.handleCloseTeamsDropdown);
+    }
+
+    handleCloseTeamsDropdown = () => {
+        window.ipcRenderer.send(CLOSE_TEAMS_DROPDOWN);
     }
 
     handleMaximizeState = (_: IpcRendererEvent, maximized: boolean) => {
@@ -295,18 +305,11 @@ export default class MainPage extends React.PureComponent<Props, State> {
 
     focusOnWebView = () => {
         window.ipcRenderer.send(FOCUS_BROWSERVIEW);
-        window.ipcRenderer.send(CLOSE_TEAMS_DROPDOWN);
+        this.handleCloseTeamsDropdown();
     }
 
     render() {
-        if (!this.state.activeServerName || !this.state.activeTabName) {
-            return null;
-        }
-        const currentTabs = this.props.teams.find((team) => team.name === this.state.activeServerName)?.tabs;
-        if (!currentTabs) {
-            // TODO: figure out something here
-            return null;
-        }
+        const currentTabs = this.props.teams.find((team) => team.name === this.state.activeServerName)?.tabs || [];
 
         const tabsRow = (
             <TabBar

src/renderer/components/TabBar.tsx

@@ -12,8 +12,8 @@ import {Tab} from 'types/config';
 import {getTabDisplayName, getTabViewName, TabType, canCloseTab} from 'common/tabs/TabView';
 
 type Props = {
-    activeTabName: string;
-    activeServerName: string;
+    activeTabName?: string;
+    activeServerName?: string;
     id: string;
     isDarkMode: boolean;
     onSelect: (name: string, index: number) => void;
@@ -49,7 +49,7 @@ export default class TabBar extends React.PureComponent<Props> {
         const orderedTabs = this.props.tabs.concat().sort((a, b) => a.order - b.order);
         const tabs = orderedTabs.map((tab, orderedIndex) => {
             const index = this.props.tabs.indexOf(tab);
-            const tabName = getTabViewName(this.props.activeServerName, tab.name);
+            const tabName = getTabViewName(this.props.activeServerName!, tab.name);
 
             const sessionExpired = this.props.sessionsExpired[tabName];
             const hasUnreads = this.props.unreadCounts[tabName];

src/renderer/components/TeamDropdownButton.tsx

@@ -11,7 +11,7 @@ import '../css/compass-icons.css';
 
 type Props = {
     isDisabled?: boolean;
-    activeServerName: string;
+    activeServerName?: string;
     totalMentionCount: number;
     hasUnreads: boolean;
     isMenuOpen: boolean;
@@ -65,7 +65,7 @@ const TeamDropdownButton: React.FC<Props> = (props: Props) => {
                 <i className='icon-server-variant'/>
                 {badgeDiv}
             </div>
-            <span>{activeServerName}</span>
+            <span>{activeServerName || 'No servers configured'}</span>
             <i className='icon-chevron-down'/>
         </button>
     );