From 913a81ef0a4f38c33871f5d0844f50ca968690d6 Mon Sep 17 00:00:00 2001
From: Me <me@Philip.local>
Date: Tue, 13 Dec 2022 03:26:38 +0100
Subject: [PATCH] ok so we fixed the button problem i was having, turns out i'm
 dumb, but we knew that, and i got reactive component loading, good news, not
 sprucing up the FriendPage, adding more functionality

---
 .../src/pages/profile/ProfileFriends.svelte   | 38 ++++++++++++++-----
 .../api_front/src/pieces/DisplayAUser.svelte  | 31 +++++++--------
 .../src/pieces/GenerateUserDisplay.svelte     |  3 --
 3 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
index 590a37a3..0f567db8 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 
   import { onMount } from "svelte";
-    import { binding_callbacks } from "svelte/internal";
+    import { binding_callbacks } from "svelte/internal"; // WTF is this?
   import Button from "../../pieces/Button.svelte";
   import DisplayAUser from "../../pieces/DisplayAUser.svelte";
+  import Tabs from "../../pieces/Tabs.svelte";
+
 
   // Ok so i need to test all the paths Cherif has made but a major one doesn't work yet...
   // in the mean time, i need to make some other stuff look nice
@@ -70,13 +72,13 @@ could be a list of friends and if they're active but i can't see that yet
     // console.log('got all users ' + allUsers)
 
 
-  })
+  });
 
 
   const displayAllUsers = async() => {
     allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
       .then( x => x.json() );
-    // console.log('got all users ' + allUsers)
+    console.log('got all users ' + allUsers)
   };
 
 
@@ -86,10 +88,12 @@ could be a list of friends and if they're active but i can't see that yet
     // console.log('got all friends ' + allFriends)
   };
 
-  const displayRequestsMade = async() => {
+  // will this work?
+  // const displayRequestsMade = async() => {
+  let displayRequestsMade = async() => {
     requestsMade = await fetch('http://transcendance:8080/api/v2/network/pending')
       .then( x => x.json() );
-    // console.log('got requests made ' + requestsMade)
+    console.log('got requests made ' + requestsMade)
   };
 
   let sentFriendRequest;
@@ -118,9 +122,11 @@ could be a list of friends and if they're active but i can't see that yet
     }
   };
 
-  // let sendUsername;
   const viewAUser = async(aUser) => {
+    console.log('Profile Friend updating userBeingViewed')
     userBeingViewed = aUser;
+
+
     // sendUsername = userBeingViewed.username;
 
     // prolly like fetch if you're friends or not?
@@ -141,6 +147,7 @@ could be a list of friends and if they're active but i can't see that yet
 <div class="top-grid">
 
   <div class="all-users-sidebar">
+    <!-- <Tabs items={items} {activeItem} on:tabChange={tabChange}/> -->
     <h3>All Users</h3>
     {#if allUsers === undefined}
       <div class="error">Failed to load all users</div>
@@ -160,6 +167,19 @@ could be a list of friends and if they're active but i can't see that yet
         <div class="status a-user">{aUser.status}</div>
         <br>
       {/each}
+      <Button on:click={displayAllUsers}>Get All Users</Button>
+    {/if}
+
+    <br>
+    <h3>Requests Made</h3>
+    {#if requestsMade === undefined}
+      <div class="error">Failed to load all requests made</div>
+    {:else}
+      {#each requestsMade as request }
+        <div>{request.receiverUsername}</div>
+        <br>
+      {/each}
+      <Button on:click={displayRequestsMade}>Display Requests Made</Button>
     {/if}
 
   </div>
@@ -172,9 +192,9 @@ could be a list of friends and if they're active but i can't see that yet
     <!-- use an #await here too? -->
     <!-- you can do better, like an on load sort of thing -->
     <!-- {#if userBeingViewed !== undefined && userBeingViewed === tmpUserBeingViewed} -->
-    <!-- {#if userBeingViewed !== undefined} -->
-    {#if userBeingViewed}
-      <div>{userBeingViewed.username}</div>
+    <!-- {#if userBeingViewed} -->
+    {#if userBeingViewed !== undefined}
+    <div>{userBeingViewed.username}</div>
       <DisplayAUser aUsername={userBeingViewed.username}/>
       <!-- <DisplayAUser aUsername={sendUsername}/> -->
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/DisplayAUser.svelte b/srcs/requirements/svelte/api_front/src/pieces/DisplayAUser.svelte
index 5cf7d681..01b493cc 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/DisplayAUser.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/DisplayAUser.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 
-  import { onMount } from 'svelte';
+  import { onMount, afterUpdate } from 'svelte';
   import GenerateUserDisplay from './GenerateUserDisplay.svelte';
-  // import {updateGeneratedUser} from './GenerateUserDisplay.svelte';
 
   export let aUsername;
   let user;
@@ -18,27 +17,23 @@
 
   })
 
-  // $: {
-  //   updateUser(aUsername);
-  // }
+  // sadly created an infinite loop
+  // afterUpdate( async() => {
+  //   console.log('Display Update aUser username: '+ aUsername)
+  //   // http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
+  //   user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
+  //     .then( (x) => x.json() );
+  // })
 
 
-
-  const updateUser = async(updatedUser) => {
-    console.log('Display Update aUser username: '+ updateUser)
+  export const updateUser = async() => {
+    console.log('Display Update aUser username: '+ aUsername)
     // http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
-    user = await fetch(`http://transcendance:8080/api/v2/user?username=${updateUser}`)
+    user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
       .then( (x) => x.json() );
   };
 
-  // export const updateUser = async(updatedUser) => {
-  //   console.log('Display Update aUser username: '+ updateUser)
-  //   // http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
-  //   user = await fetch(`http://transcendance:8080/api/v2/user?username=${updateUser}`)
-  //     .then( (x) => x.json() );
-  //   updateGeneratedUser(updateUser);
-
-  // };
+  $: aUsername, updateUser();
 
 
 </script>
@@ -46,7 +41,7 @@
 
 <!-- OHHHH i could use #await instead of if and have an nice loading page! -->
 {#if user !== undefined}
-  <GenerateUserDisplay bind:user={user} primary={true}/>
+  <GenerateUserDisplay user={user} primary={true}/>
   <!-- <GenerateUserDisplay user={user} primary={true}/> -->
 {:else}
   <h2>Sorry</h2>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
index 7969c6f7..db3545b8 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
@@ -24,9 +24,6 @@
 
   })
 
-  // export function updateGeneratedUser(updatedUser) {
-  //   user = updatedUser;
-  // };
 
 
   if (user.loseGame > user.winGame) {