Added notifications for unread messages

src/app/components/groups/groups.component.html

@@ -101,7 +101,7 @@
             {{ group.name }}
           </span>
           <div class="group-buttons-container"
-               *ngIf="groupId === group.id">
+               *ngIf="groupId === group.id; else notSelectedGroup">
             <button class="round-button group-button">
               <span class="material-icons"
                     [ngbPopover]="popContentUser"
@@ -120,6 +120,11 @@
               </span>
             </button>
           </div>
+          <ng-template #notSelectedGroup>
+            <div *ngIf="groupNotifications.get(group.id) as count" class="notifications-counter inset-shadow">
+              {{ count <= 99 ? count : '99+' }}
+            </div>
+          </ng-template>
         </button>
       </div>
     </ng-container>

src/app/components/groups/groups.component.scss

@@ -61,6 +61,19 @@
                         background-color: #44444448;
                     }
                 }
+
+                .notifications-counter {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-weight: 500;
+                    height: 30px;
+                    width: 30px;
+                    margin-right: 10px;
+                    border-radius: 50%;
+                    background-color: white;
+                    color: black;
+                }
             }
 
             .button:hover {

src/app/components/groups/groups.component.ts

@@ -1,6 +1,9 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
+import { RxStompService } from '@stomp/ng2-stompjs';
+import { Message } from '@stomp/stompjs';
+import { Subscription } from 'rxjs';
 import { Group } from 'src/app/data-models/group';
 import { User } from 'src/app/data-models/user';
 import { ApiService } from 'src/app/services/api.service';
@@ -28,20 +31,29 @@ export class GroupsComponent implements OnInit, OnChanges {
   userEmailInput: FormControl;
   isEmailErrorVisible = false;
 
+  topicSubscriptions: Subscription[] = [];
+  groupNotifications: Map<string, number>;
+
   selectedGroupUsers: User[] = [];
 
   constructor(
-    private apiService: ApiService
+    private apiService: ApiService,
+    private rxStompService: RxStompService
   ) { }
 
   ngOnInit(): void {
     this.groupNameInput = new FormControl('', Validators.required);
     this.userEmailInput = new FormControl('', Validators.required);
+
+    this.groupNotifications = new Map<string, number>();
   }
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.userGroups) {
       if (this.userGroups) {
+        this.initializeNotificationsMap();
+        this.connectToAllGroupsSockets();
+
         this.newGroupEvent.emit(this.userGroups[0]?.id);
       }
     }
@@ -53,7 +65,15 @@ export class GroupsComponent implements OnInit, OnChanges {
     }
   }
 
+  initializeNotificationsMap() {
+    this.groupNotifications = new Map<string, number>();
+
+    this.userGroups.forEach(group => this.groupNotifications.set(group.id, 0));
+  }
+
   changeGroup(group: string) {
+    this.groupNotifications.set(group, 0);
+
     this.newGroupEvent.emit(group);
   }
 
@@ -90,4 +110,29 @@ export class GroupsComponent implements OnInit, OnChanges {
   onGroupDeleted() {
     this.groupDeleted.emit(this.groupId);
   }
+
+  unsubscribeFromAllGroupSockets() {
+    this.topicSubscriptions.forEach(subscription => {
+      subscription?.unsubscribe();
+    });
+
+    this.topicSubscriptions = [];
+  }
+
+  connectToAllGroupsSockets() {
+    this.unsubscribeFromAllGroupSockets();
+
+    this.userGroups.forEach(group => this.connectToGroupSocket(group.id))
+  }
+
+  connectToGroupSocket(groupId: string) {
+    const topicSubscription = this.rxStompService.watch(`/topic/group.${groupId}`).subscribe(() => {
+      if (groupId !== this.groupId) {
+        const oldValue = this.groupNotifications.get(groupId);
+        this.groupNotifications.set(groupId, oldValue + 1);
+      }
+    });
+
+    this.topicSubscriptions.push(topicSubscription);
+  }
 }

target/npmlist.json

@@ -0,0 +1 @@
+{"name":"messenger","version":"0.0.0","dependencies":{"@angular/animations":{"version":"11.0.9","dependencies":{"tslib":{"version":"2.1.0"}}},"@angular/cdk":{"version":"11.2.7","dependencies":{"parse5":{"version":"5.1.1"},"tslib":{"version":"2.1.0"}}},"@angular/common":{"required":{"_requested":{"name":"@angular/common"},"author":{"name":"angular"},"dependencies":{"tslib":{"_requested":{"name":"tslib"},"author":{"name":"Microsoft Corp."},"name":"tslib","version":"2.1.0"}},"name":"@angular/common","version":"11.0.9"}},"@angular/compiler":{"version":"11.0.9","dependencies":{"tslib":{"version":"2.1.0"}}},"@angular/core":{"required":{"_requested":{"name":"@angular/core"},"author":{"name":"angular"},"dependencies":{"tslib":{"_requested":{"name":"tslib"},"name":"tslib","version":"2.1.0"}},"name":"@angular/core","version":"11.0.9"}},"@angular/forms":{"version":"11.0.9","dependencies":{"tslib":{"version":"2.1.0"}}},"@angular/localize":{"version":"11.0.9","dependencies":{"@babel/core":{"version":"7.8.3","dependencies":{"semver":{"version":"5.7.1"},"source-map":{"version":"0.5.7"},"@babel/code-frame":{"version":"7.12.13","dependencies":{"@babel/highlight":{"version":"7.13.10","dependencies":{"@babel/helper-validator-identifier":{"version":"7.12.11"},"chalk":{"version":"2.4.2","dependencies":{"ansi-styles":{"version":"3.2.1","dependencies":{"color-convert":{"version":"1.9.3","dependencies":{"color-name":{"version":"1.1.3"}}}}},"escape-string-regexp":{"version":"1.0.5"},"supports-color":{"version":"5.5.0","dependencies":{"has-flag":{"version":"3.0.0"}}}}},"js-tokens":{"version":"4.0.0"}}}}},"@babel/generator":{"version":"7.12.1","dependencies":{"source-map":{"version":"0.5.7"},"@babel/types":{"version":"7.13.14"},"jsesc":{"version":"2.5.2"}}},"@babel/helpers":{"version":"7.13.10","dependencies":{"@babel/template":{"version":"7.12.13","dependencies":{"@babel/code-frame":{"version":"7.12.13"},"@babel/parser":{"version":"7.13.13"},"@babel/types":{"version":"7.13.14"}}},"@babel/traverse":{"version":"7.13.13"},"@babel/types":{"version":"7.13.14"}}},"@babel/parser":{"version":"7.13.13"},"@babel/template":{"version":"7.10.4","dependencies":{"@babel/code-frame":{"version":"7.12.13"},"@babel/parser":{"version":"7.13.13"},"@babel/types":{"version":"7.13.14"}}},"@babel/traverse":{"version":"7.13.13","dependencies":{"@babel/code-frame":{"version":"7.12.13"},"@babel/helper-function-name":{"version":"7.12.13","dependencies":{"@babel/template":{"version":"7.12.13","dependencies":{"@babel/code-frame":{"version":"7.12.13"},"@babel/parser":{"version":"7.13.13"},"@babel/types":{"version":"7.13.14"}}},"@babel/helper-get-function-arity":{"version":"7.12.13","dependencies":{"@babel/types":{"version":"7.13.14"}}},"@babel/types":{"version":"7.13.14"}}},"@babel/helper-split-export-declaration":{"version":"7.12.13","dependencies":{"@babel/types":{"version":"7.13.14"}}},"@babel/parser":{"version":"7.13.13"},"@babel/generator":{"version":"7.13.9","dependencies":{"source-map":{"version":"0.5.7"},"@babel/types":{"version":"7.13.14"},"jsesc":{"version":"2.5.2"}}},"@babel/types":{"version":"7.13.14"},"debug":{"version":"4.3.1"},"globals":{"version":"11.12.0"}}},"@babel/types":{"version":"7.13.14","dependencies":{"@babel/helper-validator-identifier":{"version":"7.12.11"},"lodash":{"version":"4.17.21"},"to-fast-properties":{"version":"2.0.0"}}},"convert-source-map":{"version":"1.7.0","dependencies":{"safe-buffer":{"version":"5.1.2"}}},"debug":{"version":"4.3.1","dependencies":{"ms":{"version":"2.1.2"}}},"gensync":{"version":"1.0.0-beta.2"},"json5":{"version":"2.2.0","dependencies":{"minimist":{"version":"1.2.5"}}},"lodash":{"version":"4.17.21"},"resolve":{"version":"1.20.0","dependencies":{"is-core-module":{"version":"2.2.0","dependencies":{"has":{"version":"1.0.3","dependencies":{"function-bind":{"version":"1.1.1"}}}}},"path-parse":{"version":"1.0.6"}}}}},"glob":{"version":"7.1.2","dependencies":{"fs.realpath":{"version":"1.0.0"},"inflight":{"version":"1.0.6","dependencies":{"once":{"version":"1.4.0"},"wrappy":{"version":"1.0.2"}}},"inherits":{"version":"2.0.4"},"minimatch":{"version":"3.0.4","dependencies":{"brace-expansion":{"version":"1.1.11","dependencies":{"balanced-match":{"version":"1.0.0"},"concat-map":{"version":"0.0.1"}}}}},"once":{"version":"1.4.0","dependencies":{"wrappy":{"version":"1.0.2"}}},"path-is-absolute":{"version":"1.0.1"}}},"yargs":{"version":"16.2.0","dependencies":{"cliui":{"version":"7.0.4","dependencies":{"wrap-ansi":{"version":"7.0.0","dependencies":{"ansi-styles":{"version":"4.3.0","dependencies":{"color-convert":{"version":"2.0.1","dependencies":{"color-name":{"version":"1.1.4"}}}}},"string-width":{"version":"4.2.2"},"strip-ansi":{"version":"6.0.0"}}},"string-width":{"version":"4.2.2"},"strip-ansi":{"version":"6.0.0","dependencies":{"ansi-regex":{"version":"5.0.0"}}}}},"y18n":{"version":"5.0.5"},"yargs-parser":{"version":"20.2.7"},"escalade":{"version":"3.1.1"},"get-caller-file":{"version":"2.0.5"},"require-directory":{"version":"2.1.1"},"string-width":{"version":"4.2.2","dependencies":{"emoji-regex":{"version":"8.0.0"},"is-fullwidth-code-point":{"version":"3.0.0"},"strip-ansi":{"version":"6.0.0"}}}}}}},"@angular/material":{"version":"11.2.7","dependencies":{"tslib":{"version":"2.1.0"}}},"@angular/platform-browser":{"version":"11.0.9","dependencies":{"tslib":{"version":"2.1.0"}}},"@angular/platform-browser-dynamic":{"version":"11.0.9","dependencies":{"tslib":{"version":"2.1.0"}}},"@angular/router":{"version":"11.0.9","dependencies":{"tslib":{"version":"2.1.0"}}},"@ng-bootstrap/ng-bootstrap":{"version":"9.1.0","dependencies":{"tslib":{"version":"2.1.0"}}},"@stomp/ng2-stompjs":{"version":"8.0.0","dependencies":{"tslib":{"version":"1.14.1"},"@stomp/rx-stomp":{"version":"1.1.0","dependencies":{"@stomp/stompjs":{"version":"6.1.0"},"angular2-uuid":{"version":"1.1.1"}}}}},"@stomp/stompjs":{"version":"6.1.0"},"bootstrap":{"version":"4.6.0"},"ngx-emoji-picker":{"version":"0.1.6","dependencies":{"tslib":{"version":"1.14.1"}}},"ngx-infinite-scroll":{"version":"10.0.1","dependencies":{"@scarf/scarf":{"version":"1.1.0"},"opencollective-postinstall":{"version":"2.0.3"}}},"rxjs":{"version":"6.6.7","dependencies":{"tslib":{"version":"1.14.1"}}},"tslib":{"version":"2.1.0"},"twemoji":{"version":"13.0.2","dependencies":{"twemoji-parser":{"version":"13.0.0"},"fs-extra":{"version":"8.1.0","dependencies":{"graceful-fs":{"version":"4.2.6"},"jsonfile":{"version":"4.0.0","dependencies":{"graceful-fs":{"version":"4.2.6"}}},"universalify":{"version":"0.1.2"}}},"jsonfile":{"version":"5.0.0","dependencies":{"graceful-fs":{"version":"4.2.6"},"universalify":{"version":"0.1.2"}}},"universalify":{"version":"0.1.2"}}},"zone.js":{"version":"0.10.3"}}}