re-implement chat sorting

src/Model/Utility/utility.ts

@@ -28,6 +28,37 @@ export class HandlerManager<T> {
   };
 }
 
+// sorting
+export class IndexManager<T> {
+  private itemToString: (item: T) => string;
+
+  sortedStrings: string[] = [];
+
+  // methods
+  update = (items: T[]): void => {
+    this.sortedStrings = [];
+
+    let strings: string[] = [];
+    for (const item of items) {
+      const string: string = this.itemToString(item);
+      strings.push(string);
+    }
+
+    this.sortedStrings = strings.sort(localeCompare);
+  };
+
+  getIndex = (item: T): number => {
+    const string: string = this.itemToString(item);
+    const index: number = this.sortedStrings.indexOf(string);
+    return index;
+  };
+
+  // init
+  constructor(itemToString: (item: T) => string) {
+    this.itemToString = itemToString;
+  }
+}
+
 // string
 export function stringify(data: any): string {
   return JSON.stringify(data, null, 4);

src/ViewModel/Chat/chatListViewModel.ts

@@ -3,6 +3,7 @@ import * as React from "bloatless-react";
 import ChatListModel from "../../Model/Chat/chatListModel";
 import ChatModel from "../../Model/Chat/chatModel";
 import ChatViewModel from "./chatViewModel";
+import { IndexManager } from "../../Model/Utility/utility";
 import SettingsViewModel from "../Global/settingsViewModel";
 import StorageModel from "../../Model/Global/storageModel";
 
@@ -14,6 +15,10 @@ export default class ChatListViewModel {
   // state
   newChatPrimaryChannel: React.State<string> = new React.State("");
   chatViewModels: React.ListState<ChatViewModel> = new React.ListState();
+  indexManager: IndexManager<ChatViewModel> = new IndexManager(
+    (chatViewModel: ChatViewModel) =>
+      chatViewModel.settingsPageViewModel.primaryChannel.value
+  );
 
   selectedChat: React.State<ChatViewModel | undefined> = new React.State<
     ChatViewModel | undefined
@@ -33,6 +38,11 @@ export default class ChatListViewModel {
     this.newChatPrimaryChannel.value = "";
 
     const chatViewModel: ChatViewModel = this.createChatViewModel(chatModel);
+    this.trackChat(chatViewModel);
+    this.updateIndices();
+  };
+
+  trackChat = (chatViewModel: ChatViewModel): void => {
     this.chatViewModels.add(chatViewModel);
   };
 
@@ -50,6 +60,13 @@ export default class ChatListViewModel {
     );
   };
 
+  updateIndices = (): void => {
+    this.indexManager.update([...this.chatViewModels.value.values()]);
+    for (const chatViewModel of this.chatViewModels.value) {
+      chatViewModel.updateIndex();
+    }
+  };
+
   // view
   openChat = (chatViewModel: ChatViewModel): void => {
     this.selectedChat.value = chatViewModel;
@@ -64,8 +81,9 @@ export default class ChatListViewModel {
     this.chatViewModels.clear();
     for (const chatModel of this.chatListModel.chatModels.values()) {
       const chatViewModel = this.createChatViewModel(chatModel);
-      this.chatViewModels.add(chatViewModel);
+      this.trackChat(chatViewModel);
     }
+    this.updateIndices();
   };
 
   // init

src/ViewModel/Chat/chatViewModel.ts

@@ -54,6 +54,11 @@ export default class ChatViewModel {
     this.displayedColor.value = this.settingsPageViewModel.color.value;
   };
 
+  updateIndex = (): void => {
+    const index: number = this.chatListViewModel.indexManager.getIndex(this);
+    this.index.value = index;
+  };
+
   // load
   loadPageSelection = (): void => {
     const path: string[] = StorageModel.getPath(

src/ViewModel/Pages/settingsPageViewModel.ts

@@ -42,6 +42,8 @@ export default class SettingsPageViewModel {
     );
     this.primaryChannel.value =
       this.chatViewModel.chatModel.info.primaryChannel;
+
+    this.chatViewModel.chatListViewModel.updateIndices();
   };
 
   addSecondaryChannel = (): void => {