feat: Implement Unit of Work - Part II

- Add confirmation service to Angular app (initial implementation)
- Extend confirmation service in Angular app (part 2)
- Refactor member message component for cleaner structure
- Fix bug in reading messages

Back/FinanceTracker.API/Data/MessageRepository.cs

@@ -73,7 +73,7 @@ public async Task<PagedList<MessageDto>> GetMessagesForUser(MessageParams messag
 
     public async Task<IEnumerable<MessageDto>> GetMessageThread(string currentUsername, string recipientUsername)
     {
-        var messages = await context.Messages
+        var query = context.Messages
             .Where(x =>
                 x.RecipientUsername == currentUsername
                     && x.RecipientDeleted == false
@@ -83,18 +83,17 @@ public async Task<IEnumerable<MessageDto>> GetMessageThread(string currentUserna
                     && x.RecipientUsername == recipientUsername
             )
             .OrderBy(x => x.MessageSent)
-            .ProjectTo<MessageDto>(mapper.ConfigurationProvider)
-            .ToListAsync();
+            .AsQueryable();
 
-        var unreadMessages = messages.Where(x => x.DateRead == null &&
+        var unreadMessages = query.Where(x => x.DateRead == null &&
             x.RecipientUsername == currentUsername).ToList();
 
         if (unreadMessages.Count != 0)
         {
             unreadMessages.ForEach(x => x.DateRead = DateTime.UtcNow);
         }
 
-        return messages;
+        return await query.ProjectTo<MessageDto>(mapper.ConfigurationProvider).ToListAsync();
     }
 
     public void RemoveConnection(Connection connection)

Front/FinanceTracker.Client/src/app/_guards/prevent-unsaved-changes.guard.ts

@@ -1,9 +1,14 @@
 import { CanDeactivateFn } from '@angular/router';
 import { MemberEditComponent } from '../members/member-edit/member-edit.component';
+import { inject } from '@angular/core';
+import { ConfirmService } from '../_services/confirm.service';
 
-export const preventUnsavedChangesGuard: CanDeactivateFn<MemberEditComponent> = (component) => {
+export const preventUnsavedChangesGuard: CanDeactivateFn<
+  MemberEditComponent
+> = (component) => {
+  const confirmService = inject(ConfirmService);
   if (component.editForm?.dirty) {
-    return confirm('Are you sure you want to continue? Any unsaved changes will be lost')
+    return confirmService.confirm() ?? false;
   }
   return true;
 };

Front/FinanceTracker.Client/src/app/_services/confirm.service.ts

@@ -0,0 +1,36 @@
+import { inject, Injectable } from '@angular/core';
+import { BsModalRef, BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
+import { ConfirmDialogComponent } from '../modals/confirm-dialog/confirm-dialog.component';
+import { map } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfirmService {
+  bsModalRed?: BsModalRef;
+  private modalService = inject(BsModalService);
+
+  confirm(
+    title = 'Confirmation',
+    message = 'Are you sure you want to do this',
+    btnOkText = 'Ok',
+    btnCancelText = 'Cancel'
+  ) {
+    const config: ModalOptions = {
+      initialState: {
+        title,
+        message,
+        btnOkText,
+        btnCancelText,
+      },
+    };
+    this.bsModalRed = this.modalService.show(ConfirmDialogComponent, config);
+    return this.bsModalRed.onHidden?.pipe(
+      map(() => {
+        if (this.bsModalRed?.content) {
+          return this.bsModalRed.content.result;
+        } else return false;
+      })
+    );
+  }
+}

Front/FinanceTracker.Client/src/app/members/member-messages/member-messages.component.html

@@ -3,7 +3,7 @@
     @if (messageService.messageThread().length === 0) {
     <p>No messages yet</p>
     } @else {
-    <ul class="chat">
+    <ul class="chat" #scrollMe style="overflow: scroll; max-height: 500px; scroll-behavior: smooth;">
       @for (message of messageService.messageThread(); track message.id) {
       <li>
         <div>

Front/FinanceTracker.Client/src/app/members/member-messages/member-messages.component.ts

@@ -1,4 +1,11 @@
-import { Component, inject, input, ViewChild } from '@angular/core';
+import {
+  AfterViewChecked,
+  Component,
+  inject,
+  input,
+  viewChild,
+  ViewChild,
+} from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { TimeagoModule } from 'ngx-timeago';
 import { MessageService } from '../../_services/message.service';
@@ -9,17 +16,30 @@ import { MessageService } from '../../_services/message.service';
   templateUrl: './member-messages.component.html',
   styleUrl: './member-messages.component.css',
 })
-export class MemberMessagesComponent {
+export class MemberMessagesComponent implements AfterViewChecked {
   @ViewChild('messageForm') messageForm?: NgForm;
+  @ViewChild('scrollMe') scrollContainer?: any;
   messageService = inject(MessageService);
   username = input.required<string>();
   messageContent = '';
 
+  ngAfterViewChecked(): void {
+    this.scrollToBottom();
+  }
+
   sendMessage() {
     this.messageService
       .sendMessage(this.username(), this.messageContent)
       .then(() => {
         this.messageForm?.reset();
+        this.scrollToBottom();
       });
   }
+
+  private scrollToBottom() {
+    if (this.scrollContainer) {
+      this.scrollContainer.nativeElement.scrollTop =
+        this.scrollContainer.nativeElement.scrollHeight;
+    }
+  }
 }

Front/FinanceTracker.Client/src/app/modals/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,12 @@
+<div class="modal-header">
+  <h4 class="modal-title pull-left">
+    {{title}}
+  </h4>
+</div>
+<div class="modal-body">
+  <p>{{message}}</p>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-success" (click)="confirm()">{{btnOkText}}</button>
+  <button type="button" class="btn btn-danger" (click)="decline()">{{btnCancelText}}</button>
+</div>

Front/FinanceTracker.Client/src/app/modals/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,27 @@
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { Component, inject, model } from '@angular/core';
+
+@Component({
+  selector: 'app-confim-dialog',
+  standalone: true,
+  imports: [],
+  templateUrl: './confirm-dialog.component.html',
+  styleUrl: './confirm-dialog.component.css',
+})
+export class ConfirmDialogComponent {
+  bsModalRef = inject(BsModalRef);
+  title = '';
+  message = '';
+  btnOkText = '';
+  btnCancelText = '';
+  result = false;
+
+  confirm() {
+    this.result = true;
+    this.bsModalRef.hide();
+  }
+
+  decline() {
+    this.bsModalRef.hide();
+  }
+}