diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte index 3d6f2a9f..d2d39d21 100644 --- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte +++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte @@ -1,9 +1,10 @@
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte b/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte index 5eb53eb4..557b35ae 100644 --- a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte +++ b/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); - }); - } - diff --git a/srcs/requirements/svelte/api_front/src/pages/game/client/pongSpectator.ts b/srcs/requirements/svelte/api_front/src/pages/game/client/pongSpectator.ts index 0b2fbeea..eb3637b5 100644 --- a/srcs/requirements/svelte/api_front/src/pages/game/client/pongSpectator.ts +++ b/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" diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte index 35a71898..e2bd0626 100644 --- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte +++ b/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() => { - user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`) - .then( (x) => x.json() ); - // do a .catch? + onMount( async() => { + user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`) + .then( (x) => x.json() ); + // do a .catch? - if (user === undefined) { - 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 - nameTmp = user.username; - console.log(user.username) + if (user === undefined) { + 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 + nameTmp = user.username; - set.tfa = user.isEnabledTwoFactorAuth; + set.tfa = user.isEnabledTwoFactorAuth; - // tmp - // 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) - }) + avatar = await fetchAvatar(user.username); + }) 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() => { - errors.avatar = ''; - if (newAvatar === undefined) { - errors.avatar = 'You need to pick a file.' - return; - } - const data = new FormData(); - data.append("file", newAvatar[0]); + const uploadAvatar = async() => { + errors.avatar = ''; + if (newAvatar === undefined) { + errors.avatar = 'You need to pick a file.' + return; + } + const data = new FormData(); + data.append("file", newAvatar[0]); -// tmp - console.log(data); + // tmp + console.log(data); - const responseWhenChangeAvatar = fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, - { - method : 'POST', - 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; + const responseWhenChangeAvatar = fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, + { + method : 'POST', + body : data, }) - .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); } diff --git a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte index 4c33e9f7..dbb58624 100644 --- a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte +++ b/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() => { - // console.log('Generate User Display, on mount ' + user.username) - if (primary) { - 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' ); - } - }) + onMount( async() => { + // console.log('Generate User Display, on mount ' + user.username) + avatar = await fetchAvatar(user.username); + }) /**** THIS IS BASICALLY ALL THE RANK LOGIC ERIC HAS MADE ****/ diff --git a/srcs/requirements/svelte/api_front/src/pieces/utils.ts b/srcs/requirements/svelte/api_front/src/pieces/utils.ts new file mode 100644 index 00000000..4003d8ca --- /dev/null +++ b/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); + }); +}