[U] deleteMessage

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from "@angular/platform-browser";
 import { NgModule } from "@angular/core";
 
-import { NgbModalModule } from "@ng-bootstrap/ng-bootstrap";
+import { NgbModalModule, NgbTooltipModule } from "@ng-bootstrap/ng-bootstrap";
 import { AppRoutingModule } from './app-routing.module';
 import { FormsModule } from '@angular/forms';
 
@@ -34,13 +34,14 @@ import { InputManagerComponent } from './input-manager/input-manager.component';
     ChannelComponent,
     SidebarComponent,
     DashboardComponent,
-    InputManagerComponent
+    InputManagerComponent,
   ],
   imports: [
     BrowserModule,
     NgbModalModule,
     AppRoutingModule,
     FormsModule,
+    NgbTooltipModule,
   ],
   providers: [
     MessageService,

src/app/channel/channel.component.html

@@ -17,7 +17,7 @@
         <div class="row messageRow">
             <div class="col-12 p-0">
                 <ul class="list-group list-group-flush">
-                    <li *ngFor="let m of messages" class="list-group-item"><small class="text-muted mr-1">{{ m.created_at | date : 'HH:MM' }}</small><strong class="mr-1">{{ m.user ? m.user.username : '...' }}</strong>{{m.message}}</li>
+                    <li *ngFor="let m of messages" class="list-group-item"><small class="text-muted mr-1" placement="right" [ngbTooltip]="m.created_at | date : 'dd.MM.yy - HH:mm'">{{ m.created_at | date :  'HH:mm' }}</small><strong class="mr-1">{{ m.user ? m.user.username : '...' }}</strong>{{m.message}}<small *ngIf="(user && user.id) === m.user_id" class="ml-1 float-right text-danger deleteMessage" title="Delete this message." (click)="deleteMessage(m)"><strong>X</strong></small></li>
                 </ul>
             </div>
         </div>

src/app/channel/channel.component.scss

@@ -26,6 +26,10 @@
     &::-webkit-scrollbar-button {
         display: none;
     }
+    
+    .deleteMessage {
+        cursor: pointer;
+    }
 }
 .inputRow {
     width: 100%;

src/app/channel/channel.component.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { DomSanitizer } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
-import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { SupabaseAuthUser } from '@supabase/supabase-js';
 import { Subject } from 'rxjs';
 import { take, takeUntil, map } from 'rxjs/operators';
@@ -25,19 +23,21 @@ export class ChannelComponent implements OnInit {
   $destroy: Subject<boolean> = new Subject();
   dataUpdated: boolean = false;
   messageInput: string = '';
+  user: SupabaseAuthUser;
 
   constructor(
     private channelService: ChannelService,
-    private modalService: NgbModal,
     private supaService: SupaService,
     private route: ActivatedRoute,
-    private sanitizer: DomSanitizer,
     private userService: UserService,
     private router: Router,
     private messageService: MessageService,
    ) { }
 
   ngOnInit() {
+    this.supaService.client.auth.user()
+      .then(user => this.user = user)
+      .catch(error => console.error(error));
     this.route.params.subscribe(
       params => {
         this.reset();
@@ -90,12 +90,11 @@ export class ChannelComponent implements OnInit {
     );
   }
 
-  async sendMessage(text: string) {
+  sendMessage(text: string) {
-    if (!this.channel || !text) {
+    if (!this.channel || !text || !this.user) {
       return;
     }
-    const user: SupabaseAuthUser = await this.supaService.client.auth.user();
+    const message = new Message(this.channel.id, this.user.id, text);
-    const message = new Message(this.channel.id, user.id, text);
     this.messageService.addOne(message).pipe(take(1)).subscribe(
       data => {
         console.log('Success', data);
@@ -106,6 +105,23 @@ export class ChannelComponent implements OnInit {
     );
   }
 
+  deleteMessage(message: Message) {
+    if (!message) {
+      return;
+    }
+    const confirm = window.confirm(`Do you want to delete the message "${message.message}"?`)
+    if (confirm) {
+      this.messageService.deleteOne(message).pipe(take(1)).subscribe(
+        data => {
+          console.log('Success', data);
+        },
+        error => {
+          console.error('Failed', error);
+        }
+      );
+    }
+  }
+
   updateChannel(name:string, desc:string) {
     this.channel.name = name;
     this.channel.description = desc;