logique de creation de discussions

src/app/core/chat/discussion.service.ts

@@ -24,4 +24,8 @@ export class discussionsService {
     getMessages(discussionId: string): Observable<Message[]> {
         return this.http.get<Message[]>(`${this.apiUrl}/discussions/${discussionId}/messages`);
     }
+
+    createPrivateDiscussion(username: string): Observable<Discussion> {
+        return this.http.post<Discussion>(`${this.apiUrl}/discussions/private`, { username });
+    }
 }

src/app/pages/menu/menu-nav/menu-nav.component.html

@@ -21,17 +21,17 @@
                 <div class="input-wrapper">
                     <ion-item class="custom-item">
                         <ion-input
+                                [formControl]="username"
                                 label="Nom d'utilisateur"
                                 labelPlacement="floating"
                                 placeholder="ex: jean_dupont"
                         />
                     </ion-item>
-                    <!-- message d'erreur — affiché plus tard via logique -->
-                    <!-- <p class="error-msg">Utilisateur introuvable.</p> -->
+                    <p class="error-msg" *ngIf="errorMsg()">{{ errorMsg() }}</p>
                 </div>
 
-                <button class="submit-btn">
-                    Démarrer la conversation
+                <button class="submit-btn" (click)="startConversation()" [disabled]="isLoading()">
+                    {{ isLoading() ? 'Création...' : 'Démarrer la conversation' }}
                 </button>
             </div>
 

src/app/pages/menu/menu-nav/menu-nav.component.ts

@@ -1,31 +1,59 @@
 import { Component, inject, signal } from '@angular/core';
 import { Router } from "@angular/router";
+import { ReactiveFormsModule, FormControl } from "@angular/forms";
 import { addIcons } from "ionicons";
 import { closeOutline } from "ionicons/icons";
-import {
-  IonButton,
-  IonButtons,
-  IonContent,
-  IonHeader, IonIcon, IonInput,
-  IonItem,
-  IonModal,
-  IonTitle,
-  IonToolbar
-} from "@ionic/angular/standalone";
+import { IonIcon, IonInput, IonItem, IonModal } from "@ionic/angular/standalone";
+import { discussionsService } from "../../../core/chat/discussion.service";
 
 @Component({
   selector: 'app-menu-nav',
-  imports: [IonModal, IonItem, IonInput, IonIcon],
+  imports: [IonModal, IonItem, IonInput, IonIcon, ReactiveFormsModule],
   templateUrl: './menu-nav.component.html',
   styleUrl: './menu-nav.component.css'
 })
 export class MenuNav {
+
+  private router = inject(Router);
+  private discussionService = inject(discussionsService);
+
   isModalOpen = signal(false);
+  isLoading = signal(false);
+  errorMsg = signal<string | null>(null);
+
+  username = new FormControl('');
 
   constructor() {
     addIcons({ closeOutline });
   }
 
   openNav() { this.isModalOpen.set(true); }
-  closeNav() { this.isModalOpen.set(false); }
+
+  closeNav() {
+    this.isModalOpen.set(false);
+    this.username.reset();
+    this.errorMsg.set(null);
+  }
+
+  startConversation() {
+    const name = this.username.value?.trim();
+    if (!name || this.isLoading()) return;
+
+    this.isLoading.set(true);
+    this.errorMsg.set(null);
+
+    this.discussionService.createPrivateDiscussion(name).subscribe({
+      next: (discussion) => {
+        this.isLoading.set(false);
+        this.closeNav();
+        this.router.navigate(['/main/messages', discussion.id]);
+      },
+      error: (err) => {
+        this.isLoading.set(false);
+        this.errorMsg.set(
+            err.status === 404 ? 'Utilisateur introuvable.' : 'Une erreur est survenue.'
+        );
+      }
+    });
+  }
 }