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

@@ -3,8 +3,9 @@
   import Card from '../../pieces/Card.svelte';
   import {onMount} from 'svelte';
   import { push } from 'svelte-spa-router';
-
+  
   import Button from '../../pieces/Button.svelte';
+  import { fetchAvatar } from "../../pieces/utils";
 
   let user;
   let avatar, newAvatar;
@@ -16,40 +17,21 @@
   const errors = { username: '', checkbox: '', avatar: ''};
   let success = {username: '', avatar: '' };
 
-  onMount( async() => {
+	onMount( async() => {
-    user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
+		user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
-      .then( (x) => x.json() );
+		.then( (x) => x.json() );
-    // do a .catch?
+		// do a .catch?
 
-    if (user === undefined) {
+		if (user === undefined) {
-      console.log('User did not load, something more official should prolly happen')
+			console.log('User did not load, something more official should prolly happen')
-    }
+		}
-    // i don't unerstand why this is necessary but it really doesn't like it otherwise
+		// i don't unerstand why this is necessary but it really doesn't like it otherwise
-    nameTmp = user.username;
+		nameTmp = user.username;
-    console.log(user.username)
 
-    set.tfa = user.isEnabledTwoFactorAuth;
+		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() => {
     // I don't really care which i use at this point...
@@ -91,39 +73,33 @@
         // .then(() => console.log('successful sub of new settings'))
   };
 
-  const uploadAvatar = async() => {
+	const uploadAvatar = async() => {
-    errors.avatar = '';
+		errors.avatar = '';
-    if (newAvatar === undefined) {
+		if (newAvatar === undefined) {
-      errors.avatar = 'You need to pick a file.'
+			errors.avatar = 'You need to pick a file.'
-      return;
+			return;
-    }
+		}
-	const data = new FormData();
+		const data = new FormData();
-	data.append("file", newAvatar[0]);
+		data.append("file", newAvatar[0]);
 
-// tmp
+		// tmp
-	console.log(data);
+		console.log(data);
 
-	const responseWhenChangeAvatar = fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`,
+		const responseWhenChangeAvatar = fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`,
-	{
+		{
-		method : 'POST',
+			method : 'POST',
-		body : data,
+			body : data,
-	})
-	const responseFromServer = await responseWhenChangeAvatar;
-	if (responseFromServer.ok === true) {
-		uploadAvatarSuccess = true;
-		success.avatar = 'Your avatar has been updated';
-	}
-	else {
-		errors.avatar = responseFromServer.statusText;
-	}
-
-	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' );
+		const responseFromServer = await responseWhenChangeAvatar;
+		if (responseFromServer.ok === true) {
+			uploadAvatarSuccess = true;
+			success.avatar = 'Your avatar has been updated';
+		}
+		else {
+			errors.avatar = responseFromServer.statusText;
+		}
+
+		avatar = await fetchAvatar(user.username);
 	}
 
 </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!!!
@@ -12,28 +12,10 @@
   // add errors
   let errors = {avatar: ''};
 
-  onMount( async() => {
+	onMount( async() => {
-    // console.log('Generate User Display, on mount ' + user.username)
+		// 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' );
-    }
-  })
 
 
   /**** THIS IS BASICALLY ALL THE RANK LOGIC ERIC HAS MADE ****/

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);
+		});
+}