From ed577220867d411f8718ea1aa866ed34a0ebafba Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Thu, 9 Sep 2021 09:10:16 -0400
Subject: [PATCH] Show topbar regardless of whether there are servers or not
 (#1723)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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          | 21 +++++++++++--------
 src/renderer/components/TabBar.tsx            |  6 +++---
 .../components/TeamDropdownButton.tsx         |  4 ++--
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/MainPage.tsx b/src/renderer/components/MainPage.tsx
index 8a008fc3..952d18a7 100644
--- a/src/renderer/components/MainPage.tsx
+++ b/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
diff --git a/src/renderer/components/TabBar.tsx b/src/renderer/components/TabBar.tsx
index 29cfe767..3b9aedcc 100644
--- a/src/renderer/components/TabBar.tsx
+++ b/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];
diff --git a/src/renderer/components/TeamDropdownButton.tsx b/src/renderer/components/TeamDropdownButton.tsx
index a35c6ce8..ba28d9aa 100644
--- a/src/renderer/components/TeamDropdownButton.tsx
+++ b/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>
     );