clean code

src/app/app.routes.ts

@@ -13,6 +13,7 @@ export const routes: Routes = [
   { path: 'add-task', component: AddTaskComponent },
   { path: 'board', component: BoardComponent },
   { path: 'contacts', component: ContactsComponent },
+  { path: 'contacts/:id', component: ContactsComponent },
   { path: 'help', component: HelpComponent },
   { path: 'imprint', component: ImprintComponent },
   { path: 'privacy-policy', component: PrivacyPolicyComponent },

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

@@ -13,17 +13,26 @@
       <div class="line"></div>
       @for (count of usersByFirstLetter[sortLetter]; track usersByFirstLetter;
       let index = $index) {
-      <div class="contact">
+      <div
+        class="contact"
+        routerLink="/contacts/{{ usersByFirstLetter[sortLetter] }}"
+      >
         <div
           class="circle"
           [ngStyle]="{
-            'background-color': displayInitialsColor(
-              usersByFirstLetter[sortLetter][index]
+            'background-color': displayUserDetails(
+              usersByFirstLetter[sortLetter][index],
+              'color'
             )
           }"
         >
           <div class="initials">
-            {{ displayInitials(usersByFirstLetter[sortLetter][index]) }}
+            {{
+              displayUserDetails(
+                usersByFirstLetter[sortLetter][index],
+                "initials"
+              )
+            }}
           </div>
         </div>
         <div class="details">
@@ -34,4 +43,10 @@
       } }
     </div>
   </div>
+  @if (paramsId) {
+  <div class="right-frame">
+    <h2>Contacts</h2>
+    <p>{{ displayUserName(paramsId) }}</p>
+  </div>
+  }
 </section>

src/app/components/contacts/contacts.component.scss

@@ -102,6 +102,16 @@ section {
   }
 }
 
+.right-frame {
+  position: absolute;
+  top: -64px;
+  left: 339px;
+  width: calc(100vw - 635px);
+  min-height: calc(100vh - 128px);
+  padding: 64px 48px 48px 48px;
+  box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
+}
+
 @media screen and (max-width: 910px) {
   .left-frame {
     position: fixed;

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

@@ -2,11 +2,12 @@ import { Component } from '@angular/core';
 import { UserService } from '../../services/user.service';
 import { User } from '../../interfaces/user.interface';
 import { CommonModule } from '@angular/common';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-contacts',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterLink],
   templateUrl: './contacts.component.html',
   styleUrl: './contacts.component.scss',
 })
@@ -14,16 +15,38 @@ export class ContactsComponent {
   allUsers: User[] = [];
   usersFirstLetter: string[] = [];
   usersByFirstLetter: { [key: string]: string[] } = {};
+  userMap: { [key: string]: User } = {};
+  paramsId = '';
 
-  constructor(private userService: UserService) {
+  constructor(private userService: UserService, private route: ActivatedRoute) {
     this.userService.subUserList().subscribe(() => {
       this.allUsers = this.loadAllUser();
+      this.organizeUserData();
       this.sortAllUsers();
       this.sortUsersFirstLetter();
       this.sortUsersByFirstLetter();
     });
   }
 
+  ngOnInit(): void {
+    this.routeUserId();
+  }
+
+  routeUserId() {
+    if (this.route.params.subscribe()) {
+      this.route.params.subscribe((params) => {
+        this.paramsId = params['id'];
+      });
+    }
+  }
+
+  organizeUserData() {
+    this.userMap = {};
+    this.allUsers.forEach((user) => {
+      this.userMap[user.id] = user;
+    });
+  }
+
   loadAllUser(): User[] {
     // Without Guest
     return this.userService.allUsers.filter((user, index) => index !== 0);
@@ -55,27 +78,18 @@ export class ContactsComponent {
     });
   }
 
-  displayUser(firstLetter: string) {
-    return this.allUsers
-      .filter(
-        (user) =>
-          user.firstName.charAt(0).toUpperCase() === firstLetter.toUpperCase()
-      )
-      .map((user) => user.firstName);
-  }
-
   displayUserName(id: string) {
-    let currentUser = this.allUsers.filter((user) => user.id === id);
-    return currentUser[0].firstName + ', ' + currentUser[0].lastName;
+    if (this.userMap[id]) {
+      return this.userMap[id].firstName + ', ' + this.userMap[id].lastName;
+    }
+    return '';
   }
 
-  displayInitials(id: string) {
-    let currentUser = this.allUsers.filter((user) => user.id === id);
-    return currentUser[0].initials;
-  }
-
-  displayInitialsColor(id: string) {
-    let currentUser = this.allUsers.filter((user) => user.id === id);
-    return currentUser[0].color;
+  displayUserDetails(id: string, query: keyof User) {
+    if (this.userMap[id]) {
+      const user = this.userMap[id];
+      return user[query];
+    }
+    return '';
   }
 }