From eb6475b255420a2c983175dabf59652eae16daaa Mon Sep 17 00:00:00 2001
From: FazCodeFR <30906528+FazCodeFR@users.noreply.github.com>
Date: Wed, 17 Jul 2024 15:59:42 +0200
Subject: [PATCH] Update tchat

---
 .../tchat-message.component.html              | 44 ++++++----
 .../tchat-message/tchat-message.component.ts  | 85 ++++++++++++-------
 src/app/components/tchat/tchat.component.html | 35 ++++----
 src/app/components/tchat/tchat.component.ts   | 36 ++++++--
 src/app/interfaces/interfaces.ts              |  1 +
 5 files changed, 132 insertions(+), 69 deletions(-)

diff --git a/src/app/components/tchat/tchat-message/tchat-message.component.html b/src/app/components/tchat/tchat-message/tchat-message.component.html
index fee0f26..57b32ba 100644
--- a/src/app/components/tchat/tchat-message/tchat-message.component.html
+++ b/src/app/components/tchat/tchat-message/tchat-message.component.html
@@ -1,10 +1,16 @@
-<div *ngIf="auth.user$ | async as user">
+<div *ngIf="utilisateur">
   <!-- Chat Header -->
   <header class="bg-white p-4 text-gray-700 dark:border-t dark:border-orange-900 dark:bg-gray-800 dark:text-white">
-    <a *ngIf="!isAssociation && selectedConversation" [routerLink]="'/associations/'+selectedConversation!.id" class="hover:text-orange-800">
-      <h1 class="text-2xl font-semibold text-center">{{selectedConversation!.nom}}</h1>
-    </a>
-    <h1 *ngIf="isAssociation && selectedConversation" class="text-2xl font-semibold text-center">{{selectedConversation!.nom}}</h1>
+    <h1 *ngIf="!utilisateur!.isAssociation && selectedConversation" class="text-2xl font-semibold text-center flex items-center justify-center space-x-2">
+      <a [routerLink]="'/associations/'+selectedConversation!.id" class="hover:text-orange-800">
+        {{selectedConversation!.nom}}
+      </a>
+      <div *ngIf="!utilisateur!.isAssociation" class="flex items-center justify-center mr-2 hidden sm:flex">
+        <img alt="..." [src]="selectedConversation!.photos![0].url" class="w-16 h-16 rounded-full object-cover">
+      </div>
+    </h1>    
+    <h1 *ngIf="utilisateur!.isAssociation && selectedConversation" class="text-2xl font-semibold text-center">{{selectedConversation!.nom}}</h1>
+    <h1 *ngIf="!selectedConversation" class="text-2xl font-semibold text-center">Sélectionnez une conversation</h1>
   </header>
 
   <!-- Chat Messages -->
@@ -12,28 +18,30 @@ <h1 *ngIf="isAssociation && selectedConversation" class="text-2xl font-semibold
     <div *ngIf="messages && messages.length > 0; else noMessages">
       <div *ngFor="let msg of messages">
         <!-- Receveur -->
-        <div *ngIf="!msg.isUserSender && !isAssociation || msg.isUserSender && isAssociation" class="flex mb-4 cursor-pointer">
-          <div class="w-9 h-9 rounded-full flex items-center justify-center mr-2">
-            <img alt="..." [src]="selectedConversation?.img || selectedConversation!.photos![0].url" class="w-8 h-8 rounded-full">
+        <div *ngIf="!msg.isUserSender && !utilisateur!.isAssociation || msg.isUserSender && utilisateur!.isAssociation" class="flex mb-4 cursor-pointer items-start">
+          <div class="flex-shrink-0 mr-2 hidden sm:flex">
+            <img alt="..." [src]="selectedConversation?.img || selectedConversation!.photos![0].url" class="w-8 h-8 rounded-full object-cover">
           </div>
-          <div class="flex max-w-96 bg-white rounded-lg p-3 gap-3">
-            <p class="text-gray-700">{{ msg.contenu + ' (receveur)' }}</p>
+          <div class="flex flex-col bg-white rounded-lg p-3 gap-3 max-w-full sm:max-w-md md:max-w-lg lg:max-w-xl min-w-0">
+            <p class="text-gray-700 break-words">{{ msg.contenu }}</p>
           </div>
         </div>
         <!-- L'envoyeur -->
-        <div *ngIf="msg.isUserSender && !isAssociation || !msg.isUserSender && isAssociation" class="flex justify-end mb-4 cursor-pointer">
-          <div class="flex max-w-96 bg-orange-600 text-white rounded-lg p-3 gap-3">
-            <p>{{ msg.contenu + ' (envoyeur)' }}</p>
-          </div>
-          <div class="w-9 h-9 rounded-full flex items-center justify-center ml-2">
-            <img *ngIf="isAssociation" alt="..." [src]='user.picture' loading="lazy" decoding="async" referrerpolicy="no-referrer" class="w-8 h-8 rounded-full">
-            <img *ngIf="!isAssociation" alt="..." [src]='user.picture' loading="lazy" decoding="async" referrerpolicy="no-referrer" class="w-8 h-8 rounded-full">
+        <div *ngIf="msg.isUserSender && !utilisateur!.isAssociation || !msg.isUserSender && utilisateur!.isAssociation" class="flex justify-end mb-4 cursor-pointer items-start">
+          <div class="flex flex-col bg-orange-600 text-white rounded-lg p-3 gap-3 max-w-full sm:max-w-md md:max-w-lg lg:max-w-xl min-w-0">
+            <p class="break-words">{{ msg.contenu }}</p>
           </div>
+          <!-- <div class="flex-shrink-0 ml-2 hidden sm:flex">
+            <img *ngIf="utilisateur!.isAssociation" alt="..." [src]="user.picture" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="w-8 h-8 rounded-full object-cover">
+            <img *ngIf="!utilisateur!.isAssociation" alt="..." [src]="user.picture" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="w-8 h-8 rounded-full object-cover">
+          </div> -->
         </div>
       </div>
     </div>
     <ng-template #noMessages>
-      <p class="text-center text-gray-500 dark:text-gray-300">Merci d'écrire votre message</p>
+      <div class="flex items-center justify-center h-full">
+        <h1 class="text-center text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Vous pouvez commencer une conversation</h1>
+      </div>
     </ng-template>
   </div>
 
diff --git a/src/app/components/tchat/tchat-message/tchat-message.component.ts b/src/app/components/tchat/tchat-message/tchat-message.component.ts
index 56c6f5e..a3b7358 100644
--- a/src/app/components/tchat/tchat-message/tchat-message.component.ts
+++ b/src/app/components/tchat/tchat-message/tchat-message.component.ts
@@ -2,9 +2,8 @@ import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/cor
 import { AppService } from '../../../services/app.service';
 import { AuthService } from '@auth0/auth0-angular';
 import { WebSocketService } from '../../../services/web-socket.service';
-import { Message } from '../../../interfaces/interfaces';
+import { Message, Utilisateur } from '../../../interfaces/interfaces';
 import { Conversation } from '../../../interfaces/interfaces';
-import { UserService } from '../../../services/user.service';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
@@ -15,59 +14,83 @@ import { ActivatedRoute } from '@angular/router';
 export class TchatMessageComponent implements OnInit, OnChanges {
 
   @Input() selectedConversation: Conversation | null = null;
-  associationId: number = 1; // Remplacez par l'ID de l'association appropriée
-  idFromUrl: number | null = null;
-  isAssociation = false;
-  utilisateurId: number = 1; // Remplacez par l'ID de l'utilisateur approprié
+  @Input() utilisateur: Utilisateur | null = null;
+  @Input() idFromUrl: number | null = null;
+
+  associationId: number | undefined = undefined;
+  utilisateurId: number | undefined = undefined;
   message = '';
   messages: Message[] = [];
 
   constructor(
     public auth: AuthService,
     private appService: AppService,
-    private webSocketService: WebSocketService,
-    private route: ActivatedRoute
+    private webSocketService: WebSocketService
   ) {}
 
   ngOnInit(): void {
-    this.route.params.subscribe(params => {
-      const idFromUrl = params['id'];
-      if (idFromUrl) {
-        this.idFromUrl = +idFromUrl;
-        this.associationId = this.idFromUrl;
+    this.messages = [];
+    if (this.idFromUrl) {
+      this.associationId = this.idFromUrl;
+      this.appService.getByIdAsso(this.idFromUrl).subscribe((association) => {
+        this.selectedConversation = association as unknown as Conversation;
+        this.associationId = this.selectedConversation!.id;
+        this.utilisateurId = this.utilisateur!.id;
         this.loadMessages();
-        this.appService.getByIdAsso(this.idFromUrl).subscribe((association) => {
-          this.selectedConversation = association as unknown as Conversation;
-        });
-      }
-    });
+      });
+    }else {
+      this.calculateIds();
+      this.loadMessages();
+    }
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['selectedConversation'] && this.selectedConversation) {
-      this.isAssociation = !!this.selectedConversation.img ? true : false;
-      console.log('🚀 ~ TchatMessageComponent ~ ngOnChanges ~ this.isAssociation:', this.isAssociation);
-      this.associationId = this.selectedConversation.id;
+      this.messages = [];
+      this.calculateIds();
       this.loadMessages();
     }
   }
 
+  calculateIds(): void {
+    if (this.utilisateur) {
+      if (this.utilisateur.isAssociation) {
+        if (this.selectedConversation?.id) {
+          this.utilisateurId = this.selectedConversation.id;
+        }
+        this.associationId = this.utilisateur.associationId;
+      } else {
+        this.utilisateurId = this.utilisateur.id;
+        if (this.selectedConversation?.id) {
+          this.associationId = this.selectedConversation.id;
+        }
+      }
+    }
+  }
+
   loadMessages(): void {
-    if (this.selectedConversation || this.idFromUrl) {
-      this.appService.getMessages(this.utilisateurId, this.associationId).subscribe((messages: Message[]) => {
+    if (this.utilisateur && this.utilisateurId && this.associationId) {
+      this.appService.getMessages(this.utilisateurId!, this.associationId).subscribe((messages: Message[]) => {
         this.messages = messages;
-        console.log('🚀 ~ TchatMessageComponent ~ this.appService.getMessages ~ this.messages:', this.messages);
-      });
-      // Subscribe to WebSocket messages
-      this.webSocketService.subscribeToChannel(`association-${this.associationId}-user-${this.utilisateurId}`, 'new-message', (data: Message) => {
-        this.messages.push(data);
       });
+      this.listenForNewMessages();
     }
   }
 
+  listenForNewMessages(): void {
+    this.webSocketService.subscribeToChannel(`association-${this.associationId}-user-${this.utilisateurId}`, 'new-message', (data: Message) => {
+      if (!this.messages.some(message => message.id === data.id)) {
+        this.messages.push(data);
+      }
+    })
+  };
+    
+
   submit(): void {
-    this.appService.sendMessage(this.utilisateurId, this.associationId, this.message, !this.isAssociation).subscribe(() => {
-      this.message = '';
-    });
+    if (this.utilisateurId && this.associationId) {
+      this.appService.sendMessage(this.utilisateurId, this.associationId, this.message, !this.utilisateur?.isAssociation).subscribe(() => {
+        this.message = '';
+      });
+    }
   }
 }
diff --git a/src/app/components/tchat/tchat.component.html b/src/app/components/tchat/tchat.component.html
index 9b04352..4d40142 100644
--- a/src/app/components/tchat/tchat.component.html
+++ b/src/app/components/tchat/tchat.component.html
@@ -16,29 +16,34 @@ <h1 class="text-2xl font-semibold">Messages</h1>
 
     <!-- Contact List -->
     <div class="overflow-y-auto h-screen p-3 mb-9 pb-20 dark:bg-gray-700 dark:text-white">
-      <div *ngFor="let conversation of conversations"
-           (click)="onSelectConversation(conversation)"
-           class="flex items-center mb-4 cursor-pointer p-2 rounded-md dark:hover:bg-gray-600"
-           [ngClass]="{
-             'bg-gray-100 dark:bg-gray-600': selectedConversation?.id === conversation.id,
-             'hover:bg-gray-100': selectedConversation?.id !== conversation.id
-           }">
-      <div *ngIf="conversation.img || conversation?.photos" class="w-12 h-12 bg-gray-300 rounded-full mr-3">
-        <!-- lazy -->
-        <img [src]="conversation?.img || conversation!.photos![0].url" alt="User Avatar" class="w-12 h-12 rounded-full" loading="lazy">
-      </div>
+      <div *ngIf="conversations.length > 0; else noConversations">
+        <div *ngFor="let conversation of conversations"
+             (click)="onSelectConversation(conversation)"
+             class="flex items-center mb-4 cursor-pointer p-2 rounded-md dark:hover:bg-gray-600"
+             [ngClass]="{
+               'bg-gray-100 dark:bg-gray-600': selectedConversation?.id === conversation.id,
+               'hover:bg-gray-100': selectedConversation?.id !== conversation.id
+             }">
+          <div *ngIf="conversation.img || conversation?.photos" class="w-12 h-12 bg-gray-300 rounded-full mr-3">
+            <!-- lazy -->
+            <img [src]="conversation?.img || conversation!.photos![0].url" alt="User Avatar" class="w-12 h-12 rounded-full" loading="lazy">
+          </div>
 
-        <div class="flex-1">
-          <h3 class="text-lg font-semibold">{{ conversation.nom }}</h3>
-          <p class="text-gray-600 dark:text-white">{{ conversation.messages[0].contenu || 'No message yet' }}</p>
+          <div class="flex-1">
+            <h3 class="text-lg font-semibold">{{ conversation.nom }}</h3>
+            <p class="text-gray-600 dark:text-white">{{ conversation.messages[0].contenu || 'No message yet' }}</p>
+          </div>
         </div>
       </div>
+      <ng-template #noConversations>
+        <p class="text-center text-gray-600 dark:text-gray-300">No conversations available.</p>
+      </ng-template>
     </div>
   </div>
 
   <!-- Main Content -->
   <div class="flex-1 relative">
-    <app-tchat-message [selectedConversation]="selectedConversation"></app-tchat-message>
+    <app-tchat-message *ngIf="utilisateur" [selectedConversation]="selectedConversation" [utilisateur]="utilisateur"></app-tchat-message>
     <button id="menuButton" (click)="toggleMenu()" class="absolute top-4 left-4 focus:outline-none bg-orange-600 text-white p-2 rounded-md">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pointer-events-none" viewBox="0 0 20 20" fill="currentColor">
         <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
diff --git a/src/app/components/tchat/tchat.component.ts b/src/app/components/tchat/tchat.component.ts
index 8acbf4d..d65160a 100644
--- a/src/app/components/tchat/tchat.component.ts
+++ b/src/app/components/tchat/tchat.component.ts
@@ -1,6 +1,9 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { UserService } from '../../services/user.service';
-import { Conversation } from '../../interfaces/interfaces';
+import { AppService } from '../../services/app.service';
+
+import { Conversation, Utilisateur } from '../../interfaces/interfaces';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-tchat',
@@ -11,13 +14,33 @@ export class TchatComponent implements OnInit {
   conversations: Conversation[] = [];
   menuVisible = true;
   selectedConversation: Conversation | null = null;
+  utilisateur: Utilisateur | null = null;
+  idFromUrl: number | null = null;
 
-  constructor(private userService: UserService) {}
+    constructor(private appService: AppService, private userService: UserService, private route: ActivatedRoute, ) {}
 
   ngOnInit() {
+    this.userService.getMeInfo().subscribe((res) => {
+      this.utilisateur = res;
+      // Ensure conversations are loaded after utilisateur is set
+      this.loadConversations();
+    });
+
+    this.route.params.subscribe(params => {
+      const idFromUrl = params['id'];
+      if (idFromUrl) {
+        console.log('🚀 ~ TchatComponent ~ ngOnInit ~ idFromUrl:', idFromUrl);
+        this.idFromUrl = +idFromUrl;
+        this.appService.getByIdAsso(this.idFromUrl).subscribe((association) => {
+          this.selectedConversation = association as unknown as Conversation;
+        });
+      }
+    });
+  }
+
+  loadConversations() {
     this.userService.getConversations().subscribe(conversations => {
       this.conversations = conversations;
-      console.log('🚀 ~ TchatComponent ~ this.userService.getConversations ~ this.conversations:', this.conversations);
     });
   }
 
@@ -27,5 +50,8 @@ export class TchatComponent implements OnInit {
 
   onSelectConversation(conversation: any) {
     this.selectedConversation = conversation;
+    if (window.innerWidth < 640) {
+      this.menuVisible = false;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/interfaces/interfaces.ts b/src/app/interfaces/interfaces.ts
index 7142711..15f6ef3 100644
--- a/src/app/interfaces/interfaces.ts
+++ b/src/app/interfaces/interfaces.ts
@@ -61,6 +61,7 @@ export interface Utilisateur {
   role: Role;
   favoris: Favori[];
   association?: Association;
+  isAssociation?: boolean;
 }
 
 export interface Association {