sort users

src/app/components/contacts/contacts.component.html

@@ -7,10 +7,10 @@
       </div>
     </button>
     <div class="content">
-      @for (sortLetter of this.sortAllUsers(); track sortLetter) {
+      @for (sortLetter of this.checkUsersFirstLetter(); track sortLetter) {
-      <div class="first-letter">{{ sortLetter.firstName }}</div>
+      <div class="first-letter">{{ sortLetter }}</div>
       <div class="line"></div>
-      @for (user of this.sortUsersFirstLetter(sortLetter.id); track user; let
+      @for (user of this.sortUsersByFirstLetter(sortLetter); track user; let
       index = $index) {
       <div class="contact" routerLink="/contacts/{{ user.id }}">
         <div

src/app/components/contacts/contacts.component.ts

@@ -36,18 +36,21 @@ export class ContactsComponent {
     return this.userService.getUsers().filter((user) => user.initials !== 'G');
   }
 
-  sortAllUsers() {
+  sortUsersByFirstLetter(sortLetter: string) {
-    return [...this.loadAllUserWithoutGuest()].sort((a, b) =>
+    return this.loadAllUserWithoutGuest().filter(
-      (a.initials?.toLowerCase() ?? '').localeCompare(
+      (user) => user.initials.substring(0, 1) === sortLetter
-        b.initials?.toLowerCase() ?? ''
-      )
     );
   }
 
-  sortUsersFirstLetter(userId: string) {
+  checkUsersFirstLetter() {
-    const filteredUsers = this.loadAllUserWithoutGuest().filter(
+    let usersFirstLetter = [];
-      (user) => user.id === userId
+    usersFirstLetter = Array.from(
+      new Set(
+        this.loadAllUserWithoutGuest().map((user) =>
+          user.firstName[0].toUpperCase()
+        )
+      )
     );
-    return filteredUsers;
+    return usersFirstLetter;
   }
 }