a temporary solution to displaying just a user

srcs/requirements/svelte/api_front/.env

@@ -1,2 +1,2 @@
-WEBSITE_HOST=localhost
+WEBSITE_HOST=transcendance
 WEBSITE_PORT=8080

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+
+  import { onMount, afterUpdate } from 'svelte';
+  import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
+
+  // export let aUsername;
+  export let params;
+  let user;
+
+  onMount( async() => {
+
+    console.log('Display One User username: '+ params.username)
+    //`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=NomDuUserATrouve`
+    // user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
+    user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${params.username}`)
+      .then( (x) => x.json() );
+    console.log('in display ONE user')
+    console.log({...user})
+  })
+
+  // 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=${aUsername}`)
+  //   user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${params.username}`)
+  //     .then( (x) => x.json() );
+  // };
+
+  // $: aUsername, updateUser();
+  // $: params.username, updateUser();
+
+
+</script>
+
+
+{#if user !== undefined}
+  <GenerateUserDisplay user={user}/>
+{:else}
+  <h2>Sorry</h2>
+  <div>Failed to load user {params.username}</div>
+{/if}
+
+
+<style>
+
+</style>

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

@@ -8,21 +8,16 @@
   let user;
 
   onMount( async() => {
+
     console.log('Display aUser username: '+ aUsername)
     //`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=NomDuUserATrouve`
+    // user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
     user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
       .then( (x) => x.json() );
+    // console.log('in display a user')
+    // console.log({...user})
   })
 
-  // 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() );
-  // })
-
-
   export const updateUser = async() => {
     // console.log('Display Update aUser username: '+ aUsername)
     // http://transcendance:8080/api/v2/user?username=NomDuUserATrouver

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

@@ -9,11 +9,12 @@
   let avatar;
   // avatar needs to be updated!!!
   console.log('Generate User Display, BEFORE on mount ' + avatar)
-  // add errors
+  console.log('user:')
+  console.log({...user})
+  // console.log(user)
   let errors = {avatar: ''};
 
 	onMount( async() => {
-		// console.log('Generate User Display, on mount ' + user.username)
 		avatar = await fetchAvatar(user.username);
 	})
 
@@ -142,6 +143,7 @@
     font-size: 1.5em;
     font-weight: bold;
     padding-bottom: 5px;
+    /* color: white; */
   }
 
   div.rank {

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

@@ -28,7 +28,7 @@
 	  <button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
 	  <button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
     <button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
-    <button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button> 
+    <button class:selected="{current === '/profile/users'}" on:click={() => (push('/profile/users'))}>Users</button> 
   </div>
   <button class="logout" on:click={handleClickLogout}>Log Out</button>
 </div>

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

@@ -2,7 +2,9 @@
 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 ProfileUsers from '../pages/profile/ProfileUsers.svelte';
+import DisplayAUser from '../pieces/DisplayAUser.svelte';
+import ProfileDisplayOneUser from "../pages/profile/ProfileDisplayOneUser.svelte";
 import { wrap } from 'svelte-spa-router/wrap'
 
 // establishing the prefix here very clearly so we can have a coherent repeatable structure
@@ -11,7 +13,9 @@ export const prefix = '/profile';
 export const profileRoutes = {
   '/': ProfileDisplay,
   '/settings': ProfileSettings,
-  '/friends': ProfileFriends,
+  // '/friends': ProfileFriends,
+  '/users': ProfileUsers,
+  '/users/:username': ProfileDisplayOneUser,
   // '/friends/:username': AProfile,
   '*': NotFound
 };