add accept/deny and delete friend

src/app/components/friend-page/friend-page.component.html

@@ -48,25 +48,42 @@
     </div>
 
     <div class="p-4 space-y-3">
+      <p>Mes Amis</p>
       <div *ngFor="let friend of listFriend" class="friend flex items-center justify-between space-x-3">
-        <div class="friend flex items-center space-x-3">
-          <img class="w-10 h-10 rounded-full" src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png" alt="Friend 2">
-          <span class="text-gray-900 dark:text-white">{{ friend.username }}</span>
-        </div>
-        <div *ngIf="friend.status == 'pending'" class="flex space-x-2">
-          <button (click)="onAcceptOrDeny(friend.friend_user_id, 'accept')" class="p-2 bg-green-500 text-white rounded-full">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-            </svg>
-          </button>
-          <button (click)="onAcceptOrDeny(friend.friend_user_id, 'deny')" class="p-2 bg-red-500 text-white rounded-full">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        <div *ngIf="friend.status == 'accepted'" class="flex justify-between items-center w-full space-x-2">
+          <div class="friend flex items-center space-x-3">
+            <img class="w-10 h-10 rounded-full" src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png" alt="Friend 2">
+            <span class="text-gray-900 dark:text-white">{{ friend.username }}</span>
+          </div>
+          <button (click)="deleteFriend(friend.id)" class="p-2 bg-red-500 text-white rounded-full">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6h16zM10 11v6m4-6v6"/>
             </svg>
-          </button>
+          </button>    
         </div>
       </div>
-
+      <hr class="border-gray-300 my-3">
+      <p>Mes demandes d'amis</p>
+      <div *ngFor="let friend of listFriend">
+        <div *ngIf="friend.status == 'pending'" class="flex justify-between items-center w-full">
+          <div class="friend flex items-center space-x-3">
+            <img class="w-10 h-10 rounded-full" src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png" alt="Friend 2">
+            <span class="text-gray-900 dark:text-white">{{ friend.username }}</span>
+          </div>
+          <div class="flex space-x-2">
+            <button (click)="onAcceptOrDeny(friend.id, 'accept')" class="p-2 bg-green-500 text-white rounded-full">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+              </svg>
+            </button>
+            <button (click)="onAcceptOrDeny(friend.id, 'deny')" class="p-2 bg-red-500 text-white rounded-full">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>      
     </div>    
 
     
@@ -74,7 +91,7 @@
     <!-- Pied du modal -->
     <div class="flex justify-end p-4 border-t dark:border-gray-700">
       <button
-        data-modal-toggle="friends-modal"
+      (click)="closeFriendModal()"
         class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
       >
         Fermer

src/app/components/friend-page/friend-page.component.ts

@@ -9,30 +9,35 @@ import { CommonModule } from '@angular/common';
   styleUrls: ['./friend-page.component.css']
 })
 export class FriendPageComponent implements OnInit {
-  protected listFriend: {username: string, status: string, friend_user_id: string}[] = [];
+  protected listFriend: {username: string, status: string, friend_user_id: string, id: string}[] = [];
   userId: string = "";
   status: string = "";
   isFriendModalOpen: boolean = false;
+  hasAcceptedFriends: boolean = false ;
+  hasPendingFriends: boolean = false;
+
 
   constructor(private friendService: FriendsService) {
   }
 
   ngOnInit(): void {
     this.getFriendData();
-    console.log(this.listFriend)
   }
 
   private getFriendData(): void {
     this.friendService.getFriend().subscribe((data: any[]) => {
       if (data.length > 0) {
         data.forEach(friend => {
+          console.log(friend)
           let status = friend['status'];
           let userId = friend['friend_user_id'];
+          let id = friend['id'];
           this.friendService.getFriendById(userId).subscribe((friendData: any) => {
             this.listFriend.push({
               username: friendData.username,
               status: status,
-              friend_user_id: userId
+              friend_user_id: userId,
+              id: id
             });
           });
         });
@@ -40,8 +45,13 @@ export class FriendPageComponent implements OnInit {
     });
   }
 
-  onAcceptOrDeny(friend_user_id: string, choice: string){
-    this.friendService.acceptOrDenyFriendById(friend_user_id,choice).subscribe()
+  onAcceptOrDeny(id: string, choice: string){
+    if (choice == "accept"){
+      this.friendService.acceptFriendById(id).subscribe()
+    }
+    else {
+      this.friendService.denyFriendById(id).subscribe()
+    }
   }
   
   openFriendModal() {
@@ -51,4 +61,8 @@ export class FriendPageComponent implements OnInit {
   closeFriendModal() {
     this.isFriendModalOpen = false;
   }
+
+  deleteFriend(id: string){
+    this.friendService.deleteFriend(id).subscribe();
+  }
 }

src/app/services/friends/friends.service.ts

@@ -1,21 +1,22 @@
-import { Injectable } from '@angular/core';
+import { Injectable, OnInit } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { environment } from '../../../environments/environment';
 
 @Injectable({
   providedIn: 'root'
 })
-export class FriendsService {
+export class FriendsService  {
 
   private apiURL = environment.apiURL;
-  private token = localStorage.getItem('auth_token');
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+   }
 
   getFriend() {
+    console.log("getFriends");
     const url = `${this.apiURL}/friends`;
     const headers = new HttpHeaders({
       'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + this.token,
+      Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
     });
     return this.http.get<any[]>(url, { headers });
   }
@@ -24,17 +25,35 @@ export class FriendsService {
     const url = `${this.apiURL}/user/${id}`;
     const headers = new HttpHeaders({
       'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + this.token,
+      Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
     });
     return this.http.get<any>(url, { headers });
   }
 
-  acceptOrDenyFriendById(id: string,choice: string){
-    const url = `${this.apiURL}/friend/${id}/${choice}`;
+  acceptFriendById(id: string){
+    const url = `${this.apiURL}/friend/${id}/accept`;
     const headers = new HttpHeaders({
       'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + this.token,
+      Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
     });
-    return this.http.get<any>(url, { headers });
+    return this.http.patch<any>(url, [], { headers });
+  }
+
+  denyFriendById(id: string){
+    const url = `${this.apiURL}/friend/${id}/deny`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
+    });
+    return this.http.post<any>(url, [], { headers });
+  }
+
+  deleteFriend(id: string){
+    const url = `${this.apiURL}/friend/${id}/delete`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + localStorage.getItem('auth_token'),
+    });
+    return this.http.delete<any>(url, { headers });
   }
 }