Refactor loadAllMembers

src/pages/chat/chat.ts

@@ -423,106 +423,123 @@ class ChatElement extends HTMLElement {
 
         const service = await Services.getInstance();
         const members = await service.getAllMembers();
-        const database = await Database.getInstance();
+        const processes = await service.getProcesses();
-        const db = database.db;
 
         const memberList = document.createElement('ul');
         memberList.className = 'member-list active';
 
-        const prioritizedMembers: [string, any][] = [];
+        // Partition members into prioritized and remaining arrays.
-        const remainingMembers: [string, any][] = [];
+        const prioritizedMembers: [string, Member][] = [];
-
+        const remainingMembers: [string, Member][] = [];
         for (const [processId, member] of Object.entries(members)) {
             if (this.dmMembersSet.has(processId)) {
-              prioritizedMembers.push([processId, member]);
+                prioritizedMembers.push([processId, member]);
             } else {
-              remainingMembers.push([processId, member]);
+                remainingMembers.push([processId, member]);
             }
         }
-
         const sortedMembers = prioritizedMembers.concat(remainingMembers);
 
-        for (const [processId, member] of sortedMembers) { 
+        // Process each member.
+        for (const [processId, member] of sortedMembers) {
             const memberItem = document.createElement('li');
             memberItem.className = 'member-item';
 
+            // Apply special styling if the member is prioritized.
             if (this.dmMembersSet.has(processId)) {
-                memberItem.style.cssText = `
+            memberItem.style.cssText = `
-                  background-color: var(--accent-color);
+                background-color: var(--accent-color);
-                  transition: background-color 0.3s ease;
+                transition: background-color 0.3s ease;
-                  cursor: pointer;
+                cursor: pointer;
-                `;
+            `;
-                memberItem.onmouseover = () => {
+            memberItem.addEventListener('mouseover', () => {
-                  memberItem.style.backgroundColor = 'var(--accent-color-hover)';
+                memberItem.style.backgroundColor = 'var(--accent-color-hover)';
-                };
+            });
-                memberItem.onmouseout = () => {
+            memberItem.addEventListener('mouseout', () => {
-                  memberItem.style.backgroundColor = 'var(--accent-color)';
+                memberItem.style.backgroundColor = 'var(--accent-color)';
-                };
+            });
             }
-            
+
+            // Create a container for the member content.
             const memberContainer = document.createElement('div');
             memberContainer.className = 'member-container';
 
+            // Create the emoji span and load its label.
             const emojiSpan = document.createElement('span');
             emojiSpan.className = 'member-emoji';
-            
             const emojis = await addressToEmoji(processId);
             emojiSpan.dataset.emojis = emojis;
-    
+
-            const transaction = db.transaction("labels", "readonly");
+            // Get the member name, if any, and add it to the display
-            const store = transaction.objectStore("labels");
+            const process = processes[processId];
-            const request = store.get(emojis);
+            let memberPublicName;
-    
+            if (process) {
-            request.onsuccess = () => {
+                const publicMemberData = service.getPublicData(process);
-                const label = request.result;
+                if (publicMemberData) {
-                emojiSpan.textContent = label ? `${label.label} (${emojis})` : `Member (${emojis})`;
+                    const extractedName = publicMemberData['memberPublicName'];
-            };
+                    if (extractedName !== undefined && extractedName !== null) { 
-    
+                        memberPublicName = extractedName; 
-            request.onerror = () => {
+                    }
-                emojiSpan.textContent = `Member (${emojis})`;
+                }
-            };
+            }
+            if (!memberPublicName) {
+                memberPublicName = 'Unnamed Member';
+            }
+
+            emojiSpan.textContent = `${memberPublicName} (${emojis})`
 
             memberContainer.appendChild(emojiSpan);
             memberItem.appendChild(memberContainer);
 
+            // Add click handler to load member chat.
             memberItem.addEventListener('click', async () => {
-                    await this.loadMemberChat(processId);
+                await this.loadMemberChat(processId);
             });
-    
+
+            // Create and configure the edit label button.
             const editLabelButton = document.createElement('button');
             editLabelButton.className = 'edit-label-button';
             editLabelButton.textContent = "✏️";
-
             editLabelButton.addEventListener("click", (event) => {
                 event.stopPropagation();
             });
-    
             editLabelButton.addEventListener("dblclick", async (event) => {
                 event.stopPropagation();
                 event.preventDefault();
-    
+
                 const newLabel = prompt("Set a new name for the member:");
                 if (!newLabel) return;
-    
+
-                const editTransaction = db.transaction("labels", "readwrite");
+                const db = await Database.getInstance();
-                const editStore = editTransaction.objectStore("labels");
+                this.updateLabelForEmoji(emojis, newLabel, db, emojiSpan, processId);
-    
-                const labelObject = { emoji: emojis, label: newLabel };
-                const putRequest = editStore.put(labelObject);
-    
-                putRequest.onsuccess = () => {
-                    emojiSpan.textContent = `${newLabel} : ${emojis}`;
-                    this.reloadMemberChat(processId);
-                };
             });
-    
-            memberList.appendChild(memberItem);
             memberContainer.appendChild(editLabelButton);
+
+            memberList.appendChild(memberItem);
         }
 
         groupList.appendChild(memberList);
     }
 
+    // Helper function to update a label in IndexedDB.
+    private updateLabelForEmoji(
+        emojis: string,
+        newLabel: string,
+        db: IDBDatabase,
+        emojiSpan: HTMLElement,
+        processId: string
+    ) {
+        const transaction = db.transaction("labels", "readwrite");
+        const store = transaction.objectStore("labels");
+        const labelObject = { emoji: emojis, label: newLabel };
+        const request = store.put(labelObject);
+
+        request.onsuccess = () => {
+            emojiSpan.textContent = `${newLabel} : ${emojis}`;
+            this.reloadMemberChat(processId);
+        };
+    }
+
     private async lookForDmProcess(): Promise<string | null> {
         const service = await Services.getInstance();
         const processes = await service.getMyProcesses();