tab: Rename index to order.

After introducing id field to the server object, index was just an
indicator of the ordering of tabs in the tab list. This commit changes
the name to accurately represent the field's function. This commit
should make it easier to change the order of tabs in the future.

Since order is not the same as index anymore, we add an additional
function called getTabByOrder to replace the leftover instances of us
fetching a tab by it's index when it meant to fetch a tab by it's id.

After this commit, we should not have any instances of accessing tabs
directly by their index in the server list or the tab list.

Author: shubham-padia

app/common/types.ts

@@ -29,6 +29,6 @@ export type TabData = {
   role: TabRole;
   page?: TabPage;
   label: string;
-  index: number;
+  order: number;
   id: string;
 };

app/main/menu.ts

@@ -323,7 +323,7 @@ function getWindowSubmenu(
       initialSubmenu.push({
         label: tab.label,
         accelerator:
-          tab.role === "function" ? "" : `${shortcutKey} + ${tab.index + 1}`,
+          tab.role === "function" ? "" : `${shortcutKey} + ${tab.order + 1}`,
         checked: tab.id === activeTabId,
         click(_item, focusedWindow) {
           if (focusedWindow) {
@@ -699,24 +699,28 @@ async function checkForUpdate(): Promise<void> {
   await appUpdater(true);
 }
 
+function getTabByOrder(tabs: TabData[], order: number): TabData | undefined {
+  return tabs.find((tab) => tab.order === order);
+}
+
 function getNextServer(tabs: TabData[], activeTabId: string): string {
   const activeTab = tabs.find((tab) => tab.id === activeTabId)!;
-  let {index} = activeTab;
+  let {order} = activeTab;
   do {
-    index = (index + 1) % tabs.length;
-  } while (tabs[index]?.role !== "server");
+    order = (order + 1) % tabs.length;
+  } while (getTabByOrder(tabs, order)?.role !== "server");
 
-  return tabs[index].id;
+  return getTabByOrder(tabs, order)!.id;
 }
 
 function getPreviousServer(tabs: TabData[], activeTabId: string): string {
   const activeTab = tabs.find((tab) => tab.id === activeTabId)!;
-  let {index} = activeTab;
+  let {order} = activeTab;
   do {
-    index = (index - 1 + tabs.length) % tabs.length;
-  } while (tabs[index]?.role !== "server");
+    order = (order - 1) % tabs.length;
+  } while (getTabByOrder(tabs, order)?.role !== "server");
 
-  return tabs[index].id;
+  return getTabByOrder(tabs, order)!.id;
 }
 
 export function setMenu(properties: MenuProperties): void {

app/renderer/js/components/server-tab.ts

@@ -77,13 +77,13 @@ export default class ServerTab extends Tab {
 
   generateShortcutText(): string {
     // Only provide shortcuts for server [0..9]
-    if (this.properties.index >= 9) {
+    if (this.properties.order >= 9) {
       return "";
     }
 
-    const shownIndex = this.properties.index + 1;
+    const shownIndex = this.properties.order + 1;
 
-    // Array index == Shown index - 1
+    // Array order == Shown order - 1
     ipcRenderer.send("switch-server-tab", this.properties.tabId);
 
     return process.platform === "darwin"

app/renderer/js/components/tab.ts

@@ -7,7 +7,7 @@ export type TabProperties = {
   label: string;
   $root: Element;
   onClick: () => void;
-  index: number;
+  order: number;
   tabId: string;
   onHover?: () => void;
   onHoverOut?: () => void;

app/renderer/js/main.ts

@@ -333,7 +333,7 @@ export class ServerManagerView {
       }
 
       // Open last active tab
-      const firstTab = this.tabs[0];
+      const firstTab = this.getTabByOrder(this.tabs, 0)!;
       let lastActiveTabId = ConfigUtil.getConfigItem(
         "lastActiveTabId",
         firstTab.properties.tabId,
@@ -343,22 +343,22 @@ export class ServerManagerView {
       // It will be undefined if user disconnected the server for lastActiveTab.
       if (
         lastActiveTab === undefined ||
-        lastActiveTab.properties.index >= servers.length
+        lastActiveTab.properties.order >= servers.length
       ) {
         lastActiveTabId = firstTab.properties.tabId;
       }
 
       // `webview.load()` for lastActiveTabId before the others
       await this.activateTab(lastActiveTabId);
       await Promise.all(
-        servers.map(async (server, i) => {
+        servers.map(async (server) => {
           // After the lastActiveTabId is activated, we load the others in the background
           // without activating them, to prevent flashing of server icons
           if (server.id === lastActiveTabId) {
             return;
           }
 
-          const tab = this.tabs[i];
+          const tab = this.getTabById(server.id);
           if (tab instanceof ServerTab) (await tab.webview).load();
         }),
       );
@@ -372,15 +372,15 @@ export class ServerManagerView {
     }
   }
 
-  initServer(server: ServerConfig, index: number): ServerTab {
+  initServer(server: ServerConfig, order: number): ServerTab {
     const tabId = server.id;
     const tab: ServerTab = new ServerTab({
       role: "server",
       icon: DomainUtil.iconAsUrl(server.icon),
       label: server.alias,
       $root: this.$tabsContainer,
       onClick: this.activateLastTab.bind(this, tabId),
-      index,
+      order,
       tabId,
       onHover: this.onHover.bind(this, tabId),
       onHoverOut: this.onHoverOut.bind(this, tabId),
@@ -560,7 +560,7 @@ export class ServerManagerView {
       return;
     }
 
-    const index = this.tabs.length;
+    const order = this.tabs.length;
     const tabId = this.generateTabId();
     this.functionalTabs.set(tabProperties.page, tabId);
     const $view = await tabProperties.makeView();
@@ -573,7 +573,7 @@ export class ServerManagerView {
         label: tabProperties.label,
         page: tabProperties.page,
         $root: this.$tabsContainer,
-        index,
+        order,
         tabId,
         onClick: this.activateTab.bind(this, tabId),
         onDestroy: async () => {
@@ -656,11 +656,18 @@ export class ServerManagerView {
       role: tab.properties.role,
       page: tab.properties.page,
       label: tab.properties.label,
-      index: tab.properties.index,
+      order: tab.properties.order,
       id: tab.properties.tabId,
     }));
   }
 
+  getTabByOrder(
+    tabs: ServerOrFunctionalTab[],
+    order: number,
+  ): ServerOrFunctionalTab | undefined {
+    return tabs.find((tab) => tab.properties.order === order);
+  }
+
   async activateTab(id: string, hideOldTab = true): Promise<void> {
     const tab = this.getTabById(id);
     if (!tab) {
@@ -735,7 +742,10 @@ export class ServerManagerView {
 
     // Issue #188: If the functional tab was not focused, do not activate another tab.
     if (this.activeTabId === tabId) {
-      await this.activateTab(this.tabs[0].properties.tabId, false);
+      await this.activateTab(
+        this.getTabByOrder(this.tabs, 0)!.properties.tabId,
+        false,
+      );
     }
   }