Added group permissions. Added some global styles. Made groups rely on services' data.

src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.ts

@@ -74,7 +74,7 @@ export class TwitchUserItemAddComponent implements OnInit {
             error: () => this.responseError = 'Something went wrong.',
             complete: () => this.waitForResponse = false,
           });
-        this.client.createGroupChatter(this.data.group.id, response.user.id, response.user.login)
+        this.client.createGroupChatter(this.data.group.id, response.user.id, response.user.login);
       });
   }
 }

src/app/twitch-users/twitch-user-item/twitch-user-item.component.html

@@ -1,5 +1,6 @@
 <div>
   <button mat-icon-button
+          [disabled]="waitForResponse"
           (click)="delete()">
     <mat-icon>remove</mat-icon>
   </button>

src/app/twitch-users/twitch-user-item/twitch-user-item.component.ts

@@ -21,18 +21,28 @@ export class TwitchUserItemComponent {
 
   private readonly _client = inject(HermesClientService);
   private readonly _events = inject(EventService);
-  private _deleted = false;
+
+  waitForResponse = false;
+  responseError: string | undefined;
 
   delete() {
-    if (this._deleted)
+    if (this.waitForResponse)
       return;
 
-    this._deleted = true;
+    this.waitForResponse = true;
+    this.responseError = undefined;
 
     this._client.first(d => d.d.request.type == 'delete_group_chatter' && d.d.request.data.group == this.user.group_id && d.d.request.data.chatter == this.user.chatter_id)
-      .subscribe(async (response) => {
-        console.log('delete group chatter', response)
-        this._events.emit('delete_group_chatter', this.user);
+      .subscribe({
+        next: (d) => {
+          if (d.d.error) {
+            this.responseError = d.d.error;
+          } else {
+            this._events.emit('delete_group_chatter', this.user);
+          }
+        },
+        error: () => this.responseError = 'Something went wrong.',
+        complete: () => this.waitForResponse = false,
       });
     this._client.deleteGroupChatter(this.user.group_id, this.user.chatter_id.toString());
   }

src/app/twitch-users/twitch-user-list/twitch-user-list.component.ts

@@ -8,10 +8,8 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { containsLettersInOrder } from '../../shared/utils/string-compare';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
-import { HermesClientService } from '../../hermes-client.service';
 import { Group } from '../../shared/models/group';
 import { TwitchUserItemAddComponent } from '../twitch-user-item-add/twitch-user-item-add.component';
-import EventService from '../../shared/services/EventService';
 
 @Component({
   selector: 'twitch-user-list',
@@ -31,17 +29,10 @@ export class TwitchUserListComponent {
   @Input() group: Group | undefined;
 
   readonly dialog = inject(MatDialog);
-  readonly client = inject(HermesClientService);
-  readonly events = inject(EventService);
   readonly searchControl: FormControl = new FormControl('');
 
   opened = false;
 
-  constructor() {
-    this.events.listen('delete_group_chatter', (chatter: GroupChatter) => {
-      this.twitchUsers.splice(this.twitchUsers.findIndex(c => c.group_id == chatter.group_id && c.chatter_id == chatter.chatter_id), 1);
-    });
-  }
 
   get users(): GroupChatter[] {
     return this.twitchUsers.filter(u => containsLettersInOrder(u.chatter_label, this.searchControl.value));
@@ -57,12 +48,6 @@ export class TwitchUserListComponent {
       data: { username: this.searchControl.value, group: this.group },
     });
 
-    dialogRef.afterClosed().subscribe((chatter: GroupChatter) => {
-      this.opened = false;
-      if (!chatter)
-        return;
-
-      this.twitchUsers.push(chatter);
-    });
+    dialogRef.afterClosed().subscribe((chatter: GroupChatter) => this.opened = false);
   }
 }