fetchAvatar() generic function

srcs/requirements/svelte/api_front/src/pages/game/Game.svelte

@@ -1,9 +1,10 @@
 
 <script lang="ts">
 	import { onMount, onDestroy } from "svelte";
-	import Header from '../../pieces/Header.svelte';
 	import { fade, fly } from 'svelte/transition';
 	
+	import Header from '../../pieces/Header.svelte';
+	import { fetchAvatar } from "../../pieces/utils";
 
 	import * as pong from "./client/pong";
 	import { gameState } from "./client/ws";
@@ -196,23 +197,6 @@
 		resetPage();
 	};
 
-	async function fetchAvatar(username: string) // TODO: Could be shared with others components
-	{
-		return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar?username=${username}`)
-			.then((response) => {
-				if (!response.ok) {
-					throw new Error("Avatar not retrieved");
-				}
-				return response.blob();
-			})
-			.then((blob) => {
-				return URL.createObjectURL(blob);
-			})
-			.catch((error) => { 
-				console.log("catch fetchAvatar: ", error);
-			});
-	}
-
 </script>
 
 <Header />

srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte

@@ -6,6 +6,7 @@
 	import Header from '../../pieces/Header.svelte';
 	import MatchListElem from "../../pieces/MatchListElem.svelte";
 	import type { Match } from "../../pieces/Match";
+	import { fetchAvatar } from "../../pieces/utils";
 
 	import * as pongSpectator from "./client/pongSpectator";
 	import { gameState } from "./client/ws";
@@ -89,23 +90,6 @@
 		.then( x => x.json() );
 	};
 
-	async function fetchAvatar(username: string) // TODO: Could be shared with others components
-	{
-		return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar?username=${username}`)
-			.then((response) => {
-				if (!response.ok) {
-					throw new Error("Avatar not retrieved");
-				}
-				return response.blob();
-			})
-			.then((blob) => {
-				return URL.createObjectURL(blob);
-			})
-			.catch((error) => { 
-				console.log("catch fetchAvatar: ", error);
-			});
-	}
-
 </script>
 <!--  -->
 

srcs/requirements/svelte/api_front/src/pages/game/client/pongSpectator.ts

@@ -8,7 +8,6 @@ import { initBase, destroyBase, computeMatchOptions } from "./init.js";
 export { computeMatchOptions } from "./init.js";
 export { MatchOptions } from "../shared_js/enums.js"
 
-/* TODO: A way to delay the init of variables, but still use "const" not "let" ? */
 import { pong, gc } from "./global.js"
 import { setStartFunction } from "./global.js"
 

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

@@ -5,6 +5,7 @@
   import { push } from 'svelte-spa-router';
   
   import Button from '../../pieces/Button.svelte';
+  import { fetchAvatar } from "../../pieces/utils";
 
   let user;
   let avatar, newAvatar;
@@ -26,29 +27,10 @@
 		}
 		// i don't unerstand why this is necessary but it really doesn't like it otherwise
 		nameTmp = user.username;
-    console.log(user.username)
 
 		set.tfa = user.isEnabledTwoFactorAuth;
 
-    // tmp
+		avatar = await fetchAvatar(user.username);
-    // console.log('this is what is in the avatar before fetch')
-    // console.log(avatar)
-
-    await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, {method: "GET"})
-		  .then(response => {return response.blob()})
-		  .then(data => {
-		  	const url = URL.createObjectURL(data);
-		  	avatar = url;
-	  	})
-      .catch(() => errors.avatar = 'Sorry your avatar could not be loaded' );
-
-      // .then(() => errors.avatar = '' ) // unnecessary i think cuz in on mount...
-
-      // tmp
-      // console.log('this is what is in the avatar')
-      // console.log(avatar)
-      // console.log('this is what is in the NEW Avatar')
-      // console.log(newAvatar)
 	})
 
   const settingsHandler = async() => {
@@ -100,7 +82,7 @@
 		const data = new FormData();
 		data.append("file", newAvatar[0]);
 
-// tmp
+		// tmp
 		console.log(data);
 
 		const responseWhenChangeAvatar = fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`,
@@ -117,13 +99,7 @@
 			errors.avatar = responseFromServer.statusText;
 		}
 
-	await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, {method: "GET"})
+		avatar = await fetchAvatar(user.username);
-		.then(response => {return response.blob()})
-		.then(data => {
-			const url = URL.createObjectURL(data);
-			avatar = url;
-		})
-	.catch(() => errors.avatar = 'Sorry your avatar could not be loaded' );
 	}
 
 </script>

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

@@ -2,9 +2,9 @@
 
   import { onMount } from 'svelte';
 
+  import { fetchAvatar } from "./utils";
 
   export let user;
-  export let primary; // kinda useless, not sure what i was going for... Might be userful after all
   let rank = '';
   let avatar;
   // avatar needs to be updated!!!
@@ -14,25 +14,7 @@
 
 	onMount( async() => {
 		// console.log('Generate User Display, on mount ' + user.username)
-    if (primary) {
+		avatar = await fetchAvatar(user.username);
-      await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, {method: "GET"})
-        .then(response => {return response.blob()})
-        .then(data => {
-          const url = URL.createObjectURL(data);
-          avatar = url;
-        })
-        .catch(() => errors.avatar = 'Sorry your avatar could not be loaded' );
-      // console.log('avatar: ')
-      // console.log(avatar)
-    } else {
-      await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar?username=${user.username}`, {method: "GET"})
-        .then(response => {return response.blob()})
-        .then(data => {
-          const url = URL.createObjectURL(data);
-          avatar = url;
-        })
-        .catch(() => errors.avatar = 'Sorry your avatar could not be loaded' );
-    }
 	})
 
 

srcs/requirements/svelte/api_front/src/pieces/utils.ts

@@ -0,0 +1,17 @@
+
+export async function fetchAvatar(username: string)
+{
+	return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar?username=${username}`)
+		.then((response) => {
+			if (!response.ok) {
+				throw new Error("Avatar not retrieved");
+			}
+			return response.blob();
+		})
+		.then((blob) => {
+			return URL.createObjectURL(blob);
+		})
+		.catch((error) => { 
+			console.log("catch fetchAvatar: ", error);
+		});
+}