feat: enhance chat module with material badge and user model, update channel entry component for alerts

src/app/chat/chat.module.ts

@@ -9,7 +9,7 @@ import { ChannelEntryComponent } from './chat/channel-list/channel-entry/channel
 import { MessageComponent } from './chat/feed/message/message.component';
 import { ProfilePictureComponent } from './chat/feed/message/profile-picture/profile-picture.component';
 import { ToolbarComponent } from '../common/toolbar/toolbar.component';
-
+import { MatBadgeModule } from '@angular/material/badge';
 
 @NgModule({
   declarations: [
@@ -23,7 +23,8 @@ import { ToolbarComponent } from '../common/toolbar/toolbar.component';
   imports: [
     CommonModule,
     ChatRoutingModule,
-    ToolbarComponent
+    ToolbarComponent,
+    MatBadgeModule
   ]
 })
 export class ChatModule { }

src/app/chat/chat/channel-list/channel-entry/channel-entry.component.html

@@ -1 +1,7 @@
-<div [title]="channel.description" [class.selected]="selected">{{channel.name}}</div>
+<div [title]="channel.description" [class.selected]="selected">
+  
+  <span [matBadge]="this.hasAlert ? '1' : ''" matBadgeSize="small">
+    {{channel.name}}
+  </span>
+    
+</div>

src/app/chat/chat/channel-list/channel-entry/channel-entry.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Channel } from '../../../../models/channel';
 
 @Component({
@@ -7,7 +7,18 @@ import { Channel } from '../../../../models/channel';
   templateUrl: './channel-entry.component.html',
   styleUrl: './channel-entry.component.scss'
 })
-export class ChannelEntryComponent {
+export class ChannelEntryComponent implements OnChanges {
   @Input("channel") public channel!: Channel;
   @Input("selected") public selected!: boolean;
+
+  public hasAlert: boolean = false;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.selected) {
+      this.hasAlert = false;
+    }
+  }
+
+  // TODO: subsribe to message alerts and display them
+  //       unsubscirbe when leaving
 }

src/app/models/user.ts

@@ -0,0 +1,6 @@
+export class User {
+  public username!: string;
+  public status!: string;
+  public picture!: string;
+  public bio!: string;
+}

src/app/services/chat.service.ts

@@ -10,6 +10,7 @@ export class ChatService {
 
   constructor() { }
 
+  // TODO: implement
   public ListChannels(): Observable<Channel[]> {
     return new Observable<Channel[]>(subscriber => {
       subscriber.next([
@@ -28,6 +29,9 @@ export class ChatService {
     });
   }
 
+  // TODO: implement
+  // TODO: refactor this so it first returns the n last messages,
+  //       then listens for incoming messages and forwards them as they come 
   public GetMessages(channelID: number): Observable<Message[]> {
     return new Observable<Message[]>(subscriber => {
       subscriber.next([

src/app/services/user.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+import { User } from '../models/user';
 
 @Injectable({
   providedIn: 'root'
@@ -7,10 +8,16 @@ import { Observable } from 'rxjs';
 export class UserService {
   constructor() { }
 
+  // TODO: implement
   public GetProfilePictureURL(username: string): Observable<string> {
     return new Observable<string>(subscriber => {
       subscriber.next("https://i.pinimg.com/736x/00/70/16/00701602b0eac0390b3107b9e2a665e0.jpg");
       subscriber.complete();
     });
   }
+
+  // TODO: implement
+  public GetUser(username: string): Observable<User> {
+    throw new Error('Not implemented');
+  }
 }