42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fetchAvatar() generic function

Browse Source
This commit is contained in:
LuckyLaszlo
2023-01-11 20:52:15 +01:00
parent 708aadf868
commit 8856c46fb6
6 changed files with 64 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
View File

@@ -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 />

18
srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
View File

@@ -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>
<!-- -->

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

@@ -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"

100
srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
View File

@@ -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);
}
</script>

28
srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
View File

@@ -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 ****/

17
srcs/requirements/svelte/api_front/src/pieces/utils.ts Normal file
View File

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