<script lang="ts">

  import { onMount, afterUpdate } from 'svelte';
  import GenerateUserDisplay from './GenerateUserDisplay.svelte';

  // export let aUsername;
  export let aUsername;
  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}`)
      .then( (x) => x.json() );
  })

  // 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
    // 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=${aUsername}`)
      .then( (x) => x.json() );
  };

  // $: aUsername, updateUser();
  $: aUsername, updateUser();


</script>


{#if user !== undefined}
  <GenerateUserDisplay user={user} primary={false}/>
  <!-- <GenerateUserDisplay user={user} primary={true}/> -->
{:else}
  <h2>Sorry</h2>
  <div>Failed to load user {aUsername}</div>
{/if}


<style>

</style>
