send message frontend fixes

Author: kolosovpetro

MangoAPI.Application/Services/MailgunSettings.cs

@@ -96,16 +96,22 @@ public async Task<Result<SendMessageResponse>> Handle(
 
         await dbContext.SaveChangesAsync(cancellationToken);
 
+        var authorPictureUrl = $"{blobServiceSettings.MangoBlobAccess}/{user.Image}";
+
+        var attachmentUrl = attachmentUniqueFileName == null
+            ? null
+            : $"{blobServiceSettings.MangoBlobAccess}/{attachmentUniqueFileName}";
+
         var messageDto = messageEntity.ToMessage(
             user.DisplayName,
             user.Id,
-            user.Image,
-            blobServiceSettings.MangoBlobAccess,
-            user.DisplayNameColour);
+            user.DisplayNameColour,
+            authorPictureUrl,
+            attachmentUrl);
 
         await hubContext.Clients.Group(request.ChatId.ToString()).BroadcastMessageAsync(messageDto);
 
-        return responseFactory.SuccessResponse(SendMessageResponse.FromSuccess(messageEntity.Id));
+        return responseFactory.SuccessResponse(SendMessageResponse.FromSuccess(messageEntity.Id, attachmentUrl));
     }
 
     private async Task<string> UploadAttachmentIfExistsAsync(SendMessageCommand request)

MangoAPI.BusinessLogic/ApiCommands/Messages/SendMessageCommandHandler.cs

@@ -10,13 +10,17 @@ public record SendMessageResponse : ResponseBase
     [DefaultValue("01108b4a-27f0-4be4-a9bd-e6e71feccd46")]
     public Guid MessageId { get; init; }
 
-    public static SendMessageResponse FromSuccess(Guid messageId)
+    [DefaultValue("http://127.0.0.1:10000/devstoreaccount1/testcontainer/image.jpg")]
+    public string AttachmentUrl { get; init; }
+
+    public static SendMessageResponse FromSuccess(Guid messageId, string attachmentUrl)
     {
         return new SendMessageResponse
         {
             Success = true,
             Message = ResponseMessageCodes.Success,
             MessageId = messageId,
+            AttachmentUrl = attachmentUrl
         };
     }
 }

MangoAPI.BusinessLogic/ApiCommands/Messages/SendMessageResponse.cs

@@ -19,35 +19,27 @@ public record Message
     [DefaultValue("11aed827-db8a-47de-bc81-13337703091f")]
     public Guid UserId { get; init; }
 
-    [DefaultValue("Amelit")]
-    public string UserDisplayName { get; init; }
+    [DefaultValue("Amelit")] public string UserDisplayName { get; init; }
 
-    [DefaultValue(5)]
-    public DisplayNameColour UserDisplayNameColour { get; init; }
+    [DefaultValue(5)] public DisplayNameColour UserDisplayNameColour { get; init; }
 
-    [DefaultValue("Hello World!")]
-    public string MessageText { get; init; }
+    [DefaultValue("Hello World!")] public string MessageText { get; init; }
 
-    [DefaultValue("12:56")]
-    public DateTime CreatedAt { get; init; }
+    [DefaultValue("12:56")] public DateTime CreatedAt { get; init; }
 
-    [DefaultValue("12:57")]
-    public DateTime? UpdatedAt { get; init; }
+    [DefaultValue("12:57")] public DateTime? UpdatedAt { get; init; }
 
-    [DefaultValue(false)]
-    public bool Self { get; init; }
+    [DefaultValue(false)] public bool Self { get; init; }
 
     [DefaultValue("https://localhost:5001/Uploads/amelit_picture.jpg")]
     public string MessageAuthorPictureUrl { get; init; }
 
     [DefaultValue("https://localhost:5001/Uploads/message_attachment.pdf")]
     public string MessageAttachmentUrl { get; init; }
 
-    [DefaultValue("John Doe")]
-    public string InReplayToAuthor { get; init; }
+    [DefaultValue("John Doe")] public string InReplayToAuthor { get; init; }
 
-    [DefaultValue("Hello world!")]
-    public string InReplayToText { get; init; }
+    [DefaultValue("Hello world!")] public string InReplayToText { get; init; }
 }
 
 public static class MessageMapper
@@ -56,9 +48,9 @@ public static Message ToMessage(
         this MessageEntity message,
         string displayName,
         Guid userId,
-        string image,
-        string mangoBlobAccess,
-        DisplayNameColour displayNameColour)
+        DisplayNameColour displayNameColour,
+        string authorPictureUrl,
+        string attachmentUrl)
     {
         var messageDto = new Message
         {
@@ -73,16 +65,10 @@ public static Message ToMessage(
             Self = message.UserId == userId,
             InReplayToAuthor = message.InReplayToAuthor,
             InReplayToText = message.InReplayToText,
-
-            MessageAuthorPictureUrl = image != null
-                ? $"{mangoBlobAccess}/{image}"
-                : null,
-
-            MessageAttachmentUrl = message.AttachmentFileName != null
-                ? $"{mangoBlobAccess}/{message.AttachmentFileName}"
-                : null,
+            MessageAuthorPictureUrl = authorPictureUrl,
+            MessageAttachmentUrl = attachmentUrl
         };
 
         return messageDto;
     }
-}
+}

MangoAPI.BusinessLogic/Models/Message.cs

@@ -6,6 +6,7 @@ import { ChatsComponent } from './components/chats/chats.component';
 import { ContactsComponent } from './components/contacts/contacts.component';
 import { SettingsComponent } from './components/settings/settings.component';
 import { CreateGroupComponent } from './components/create-group/create-group.component';
+import { NotFoundComponent } from './components/not-found/not-found.component';
 
 const routes: Routes = [
   { path: 'register', component: RegisterComponent },
@@ -14,6 +15,8 @@ const routes: Routes = [
   { path: 'contacts', component: ContactsComponent },
   { path: 'settings', component: SettingsComponent },
   { path: 'createGroup', component: CreateGroupComponent },
+  { path: '', redirectTo: '/chats', pathMatch: 'full' },
+  { path: '**', component: NotFoundComponent }
 ];
 
 @NgModule({

MangoAPI.Client/src/app/app-routing.module.ts

@@ -3,7 +3,7 @@
     <div
       *ngIf="_modalWindowStateService.isModalWindowShowing"
       class="black-cover"
-      (click)="closeModalWindowrClick()"
+      (click)="closeModalWindowClick()"
     >
       <img
         *ngIf="_modalWindowStateService.picture"
@@ -191,7 +191,7 @@ <h5>Chats</h5>
 
                   <span *ngIf="!activeChat.isArchived; else elseBlock">Archive Chat</span>
                   <ng-template #elseBlock>
-                    <span>Unarchive Chat</span>
+                    <span>Un-Archive Chat</span>
                   </ng-template>
                 </div>
                 <div

MangoAPI.Client/src/app/components/chats/chats.component.html

@@ -1,4 +1,4 @@
-import { ModalWindowStateService } from './../../services/states/modalWindowState.service';
+import { ModalWindowStateService } from '../../services/states/modalWindowState.service';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { TokensService } from '../../services/messenger/tokens.service';
 import { Chat } from '../../types/models/Chat';
@@ -12,16 +12,15 @@ import { CommunityType } from '../../types/enums/CommunityType';
 import { RoutingConstants } from '../../types/constants/RoutingConstants';
 import { UserChatsService } from '../../services/api/user-chats.service';
 import { ValidationService } from '../../services/messenger/validation.service';
-import { SendMessageCommand } from '../../types/requests/SendMessageCommand';
 import * as signalR from '@microsoft/signalr';
 import { EditMessageNotification } from '../../types/models/EditMessageNotification';
 import { DeleteMessageNotification } from '../../types/models/DeleteMessageNotification';
-import { Subject, takeUntil } from 'rxjs';
+import { firstValueFrom, Subject, takeUntil } from 'rxjs';
 import { DisplayNameColours } from 'src/app/types/enums/DisplayNameColours';
-import { UsersService } from 'src/app/services/api/users.service';
 import { DeleteMessageCommand } from 'src/app/types/requests/DeleteMessageCommand';
 import { DocumentsService } from 'src/app/services/api/documents.service';
 import ApiBaseService from 'src/app/services/api/apiBase.service';
+import { SendMessageResponse } from '../../types/responses/SendMessageResponse';
 
 @Component({
   selector: 'app-chats',
@@ -152,25 +151,13 @@ export class ChatsComponent implements OnInit, OnDestroy {
   }
 
   onOpenImageClick(imageLink: string): void {
-    this._modalWindowStateService.setIsModalWindowShowing(true)
-    this._modalWindowStateService.setPicture(imageLink)
+    this._modalWindowStateService.setIsModalWindowShowing(true);
+    this._modalWindowStateService.setPicture(imageLink);
   }
 
-  closeModalWindowrClick(): void {
-    this._modalWindowStateService.setIsModalWindowShowing(false)
-    this._modalWindowStateService.setPictureNull()
-  }
-
-  async uploadFile(file: File) {
-    let fileName = null;
-    if (file) {
-      const formData = new FormData();
-      formData.append('formFile', file, file.name);
-      const response = await this._documentsService.uploadDocument(formData).toPromise();
-      this.messageAttachmentUrl = response?.fileUrl ?? '';
-      fileName = response?.fileName ?? '';
-    }
-    return fileName;
+  closeModalWindowClick(): void {
+    this._modalWindowStateService.setIsModalWindowShowing(false);
+    this._modalWindowStateService.setPictureNull();
   }
 
   setSignalRMethods(): void {
@@ -285,6 +272,10 @@ export class ChatsComponent implements OnInit, OnDestroy {
   }
 
   loadChat(chatId: string): void {
+    if (this.activeChatId === chatId) {
+      return;
+    }
+
     this.activeChatId = chatId;
     this.activeChat = this.chats.filter((x) => x.chatId === this.activeChatId)[0];
     this.getChatMessages(this.activeChatId);
@@ -411,7 +402,7 @@ export class ChatsComponent implements OnInit, OnDestroy {
       });
   }
 
-  async onSendMessageClick() {
+  public async onSendMessageClick() {
     const newMessageText = this.messageText.repeat(1); // deep copy
 
     const messageTextValidationResult = this._validationService.validateField(
@@ -432,7 +423,16 @@ export class ChatsComponent implements OnInit, OnDestroy {
 
     const isoString = new Date().toISOString();
     const messageId = crypto.randomUUID();
-    const sendMessageCommand = new SendMessageCommand(this.messageText, this.activeChatId);
+    const sendMessageFormData = new FormData();
+
+    sendMessageFormData.append('messageText', newMessageText);
+    sendMessageFormData.append('chatId', this.activeChatId);
+    sendMessageFormData.append('messageId', messageId);
+
+    if (this.messageAttachment) {
+      sendMessageFormData.append('Attachment', this.messageAttachment);
+    }
+
     const newMessage = new Message(
       messageId,
       tokens.userId,
@@ -447,35 +447,22 @@ export class ChatsComponent implements OnInit, OnDestroy {
 
     this.clearMessageInput();
 
-    if (this.messageAttachment) {
-      const fileName = await this.uploadFile(this.messageAttachment);
-      this.messageAttachment = null;
-      sendMessageCommand.setAttachmentUrl(fileName);
-      newMessage.setMessageAttachmentUrl(this.messageAttachmentUrl);
-    }
-
     this.messages.push(newMessage);
 
-    sendMessageCommand.setMessageId(messageId);
-    sendMessageCommand.setCreatedAt(isoString);
+    const sendMessage$ = this._messagesService.sendMessage(sendMessageFormData);
 
-    this._messagesService
-      .sendMessage(sendMessageCommand)
-      .pipe(takeUntil(this.componentDestroyed$))
-      .subscribe({
-        next: (data) => {
-          newMessage.messageId = data.messageId;
-          this.scrollToEnd();
-        },
-        error: (error) => {
-          this._errorNotificationService.notifyOnError(error);
-        }
-      });
+    const response = await firstValueFrom<SendMessageResponse>(sendMessage$);
+
+    newMessage.messageId = response.messageId;
+    newMessage.messageAttachmentUrl = response.attachmentUrl;
+
+    this.clearAttachmentInput();
+    this.scrollToEnd();
   }
 
-  onEnterClick(event: any): void {
+  async onEnterClick(event: any) {
     event.preventDefault();
-    this.onSendMessageClick().then((r) => r);
+    await this.onSendMessageClick().then((r) => r);
   }
 
   private clearMessageInput(): void {
@@ -543,4 +530,15 @@ export class ChatsComponent implements OnInit, OnDestroy {
     this.componentDestroyed$.next(true);
     this.componentDestroyed$.complete();
   }
+
+  clearAttachmentInput() {
+    const fileInput = document.getElementById('attachment') as HTMLInputElement;
+
+    if (!fileInput) {
+      return;
+    }
+
+    fileInput.value = '';
+    this.messageAttachment = null;
+  }
 }

MangoAPI.Client/src/app/components/chats/chats.component.ts

@@ -2,7 +2,6 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { GetChatMessagesResponse } from '../../types/responses/GetChatMessagesResponse';
-import { SendMessageCommand } from '../../types/requests/SendMessageCommand';
 import { SendMessageResponse } from '../../types/responses/SendMessageResponse';
 import { DeleteMessageResponse } from '../../types/responses/DeleteMessageResponse';
 import { EditMessageCommand } from '../../types/requests/EditMessageCommand';
@@ -24,17 +23,12 @@ export class MessagesService extends ApiBaseService {
 
   // GET /api/messages/{chatId}
   getChatMessages(chatId: string): Observable<GetChatMessagesResponse> {
-    return this.httpClient.get<GetChatMessagesResponse>(
-      this.baseUrl + this.messagesRoute + chatId
-    );
+    return this.httpClient.get<GetChatMessagesResponse>(this.baseUrl + this.messagesRoute + chatId);
   }
 
   // POST /api/messages
-  sendMessage(request: SendMessageCommand): Observable<SendMessageResponse> {
-    return this.httpClient.post<SendMessageResponse>(
-      this.baseUrl + this.messagesRoute,
-      request
-    );
+  sendMessage(request: FormData): Observable<SendMessageResponse> {
+    return this.httpClient.post<SendMessageResponse>(this.baseUrl + this.messagesRoute, request);
   }
 
   // DELETE /api/messages/{messageId}

MangoAPI.Client/src/app/services/api/messages.service.ts

@@ -36,8 +36,4 @@ export class Message {
     this.self = self;
     this.messageAuthorPictureUrl = messageAuthorPictureUrl;
   }
-
-  setMessageAttachmentUrl(url: string | null): void {
-    this.messageAttachmentUrl = url;
-  }
 }