working on friendships in teh frontend but having to do some debuging in the backend

srcs/requirements/svelte/api_front/src/pages/GamePage.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 
-  import { initDom } from "../game/client/pong.js";
+  // import { initDom } from "../game/client/pong.js";
   import {onMount} from 'svelte';
 
   onMount(() => {
-    initDom();
+    // initDom();
   })
 
 

srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+
+  import { onMount } from "svelte";
+  import Button from "../../pieces/Button.svelte";
+
+  let errors = {friendRequest: '',};
+  let set = {friendUsername: '',}
+
+  let user;
+  let myFriends;
+  let requestsMade, requestsRecieved;
+ // http://transcendance:8080/api/v2/network/received the ones you have recieved
+  // http://transcendance:8080/api/v2/network/pending the ones you have sent
+
+
+  onMount( async() => {
+    // yea no idea what 
+    // i mean do i fetch user? i will for now 
+    user = await fetch('http://transcendance:8080/api/v2/user')
+      .then( (x) => x.json() );
+
+    console.log('user is ')
+    console.log(user)
+    console.log(user.username)
+
+    myFriends = await fetch("http://transcendance:8080/api/v2/network/myfriends")
+      .then( (x) => x.json() );
+
+    console.log('my friends')
+    console.log(myFriends)
+
+    requestsMade = await fetch('http://transcendance:8080/api/v2/network/pending')
+      .then( x => x.json() );
+
+    console.log('Requests pending ');
+    console.log(requestsMade);
+
+
+    requestsRecieved = await fetch('http://transcendance:8080/api/v2/network/received')
+      .then( x => x.json() );
+
+    console.log('Requests received ');
+    console.log(requestsRecieved);
+
+  })
+
+  let allUsers;
+  const displayAllUsers = async() => {
+    allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
+      .then( x => x.json() );
+    console.log('got all users ' + allUsers)
+  };
+
+  let allFriends;
+  const displayAllFriends = async() => {
+    allFriends = await fetch('http://transcendance:8080/api/v2/network/myfriends')
+      .then( x => x.json() );    
+    console.log('got all friends ' + allFriends)
+  };
+
+  const displayRequestsMade = async() => {
+    requestsMade = await fetch('http://transcendance:8080/api/v2/network/pending')
+      .then( x => x.json() );    
+    console.log('got requests made ' + requestsMade)
+  };
+
+
+  let sentFriendRequest;
+  const friendUserByUsername = async(potenticalFriendUsername) => {
+    let valid = false;
+
+    if (potenticalFriendUsername === '' || potenticalFriendUsername.trim() === '') {
+      errors.friendRequest = "You have to put a friend's name in.";
+      valid = false;
+    } else if (potenticalFriendUsername === user.username) {
+      errors.friendRequest = "You can't friend yourself."
+      valid = false;
+    } else {
+      valid = true;
+    }
+    if (!user || !user.username) {
+      valid = false;
+    }
+
+    // should i be checking if a Friend request has already been made ?
+
+    if (valid) {
+      let r = "R";
+
+      console.log('user is ')
+      console.log(user)
+      console.log(user.username)
+      console.log('friend is ')
+      console.log(set.friendUsername)
+
+      // ok this version works
+      // ok not really, requesterId and all that is good but...
+      sentFriendRequest = await fetch("http://transcendance:8080/api/v2/network/myfriends", {
+          method : "POST",
+          headers: { 'Content-Type': 'application/json'},
+            body: JSON.stringify({
+            "requesterId": user.username,
+            "addresseeId": set.friendUsername,
+            "status": r
+          })
+        })
+        .then( x => x.json())
+        .then (x => console.log({...x}));
+
+      // should i then update requtestsMade with another fetch?
+
+
+    }
+
+    // body: JSON.stringify({
+    //         "requesterUsername": user.username,
+    //         "addresseeUsername": set.friendUsername,
+    //         "status": r
+
+    // "requesterId": user.username,
+    // "addresseeId": set.friendUsername,
+
+
+  };
+
+</script>
+
+<h1>Friendship page</h1>
+
+{#if user && user.username}
+  <div>You are {user.username}</div>
+{/if}
+
+<!-- <div>My friends obj</div> -->
+<!-- <div>{myFriends}</div> -->
+<!-- <br> -->
+<Button on:click={displayAllUsers}>Get All Users</Button>
+{#if allUsers !== undefined}
+  {#each allUsers as user}
+    <div>{user.username}</div>
+  {/each}
+{/if}
+
+<br>
+
+<Button on:click={displayAllFriends}>Get All Friends</Button>
+{#if allFriends !== undefined}
+  <div>{allFriends}</div>
+  {#each allFriends as friend}
+    <div>{friend}{friend.username}</div>
+  {/each}
+{/if}
+
+<br>
+
+<div>Make a Friend!</div>
+<form on:submit|preventDefault={() => friendUserByUsername(set.friendUsername)}>
+  <input type="text" placeholder="friend's username" bind:value={set.friendUsername}>
+  <div class="error">{errors.friendRequest}</div>
+  <Button type="secondary">Send Friend Request</Button>
+</form>
+
+<br> <br>
+<!-- here i want to list all the requests you and have an accept and a decline button -->
+
+<!-- {#each requestsRecieved as request} -->
+
+<br> <br>
+<!-- I want to list all the requests made by this user -->
+
+<Button on:click={displayRequestsMade}>Display Requests Made</Button>
+
+{#if requestsMade !== undefined}
+  {#each requestsMade as requestMade}
+    <div>{requestMade}</div>
+  {/each}
+{/if}
+
+
+
+<style>
+
+  .error{
+    font-size: 0.8em;
+    font-weight: bold;
+    color: red;
+  }
+</style>

srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte

@@ -130,7 +130,7 @@
           <!-- it really hates {user.username} and ${user.username} -->
           <!-- <input type="text" placeholder="current username: ${user.username}" bind:value={set.username}> -->
           <input type="text" placeholder="current username: {nameTmp}" bind:value={set.username}>
-		  <div class="success">{success.username}</div>
+		      <div class="success">{success.username}</div>
           <div class="error">{errors.username}</div>
         </div>
         <div class="form-field">

srcs/requirements/svelte/api_front/src/pieces/Header.svelte

@@ -34,6 +34,7 @@
     <!-- <button on:click={() => (push('/chat'))}>Chat</button> -->
 
     <!-- tmp -->
+    <button on:click={() => (push('/profile/friends'))}>Friends</button>
     <button on:click={() => (push('/test'))}>test</button>
     <button on:click={handleClickLogout}>Log Out</button>
   </nav>

srcs/requirements/svelte/api_front/src/routes/profileRoutes.js

@@ -2,6 +2,7 @@
 import NotFound from "../pages/NotFound.svelte";
 import ProfileDisplay from '../pages/profile/ProfileDisplay.svelte';
 import ProfileSettings from '../pages/profile/ProfileSettings.svelte';
+import ProfileFriends from '../pages/profile/ProfileFriends.svelte';
 import { wrap } from 'svelte-spa-router/wrap'
 
 // establishing the prefix here very clearly so we can have a coherent repeatable structure
@@ -10,6 +11,7 @@ export const prefix = '/profile';
 export const profileRoutes = {
   '/': ProfileDisplay,
   '/settings': ProfileSettings,
+  '/friends': ProfileFriends,
   '*': NotFound
 };