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

fetch() changes in all svelte

Browse Source 
+ miscs front refactoring
This commit is contained in:
LuckyLaszlo
2023-01-16 18:03:08 +01:00
parent 36f13cb5af
commit 314fa10cff
9 changed files with 522 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
View File

@@ -1,30 +1,36 @@
<script lang="ts"> <script lang="ts">
import Canvas from "../pieces/Canvas.svelte"; import { push } from "svelte-spa-router";
import { push } from "svelte-spa-router"; import { onMount } from 'svelte';
import { onMount } from 'svelte';
let user; import { fetchUser } from "../pieces/utils";
let user;
onMount(async () => { onMount(async () => {
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`) user = await fetchUser();
.then((resp) => resp.json())
if (user && user.statusCode && user.statusCode === 403) {
console.log('on mount no user, returned status code 403 so logging out of userStore')
}
}); });
const login = async() => { const login = async() => {
window.location.href = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth`; window.location.href = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth`;
console.log('you are now logged in'); console.log('you are now logged in');
} }
const logout = async() => { const logout = async() => {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, { await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`,
method: 'POST', {
}); method: 'POST'
user = undefined; }
)
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch logout: ", error);
});
user = null;
}; };
</script> </script>

87
srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
View File

@@ -1,44 +1,59 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { push } from "svelte-spa-router"; import { push } from "svelte-spa-router";
let qrCodeImg;
let qrCode = "";
let wrongCode = "";
const fetchQrCodeImg = (async () => {
qrCodeImg = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/2fa/generate`,
{
method: "POST",
}
)
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
return response.blob();
})
.then((blob) => {
return URL.createObjectURL(blob);
})
.catch((error) => {
console.log("catch fetchQrCodeImg: ", error);
});
let qrCodeImg; })();
let qrCode = "";
let wrongCode = "";
const fetchQrCodeImg = (async() => {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/2fa/generate`,
{
method: 'POST',
})
.then(response => {return response.blob()})
.then(blob => {
const url = URL.createObjectURL(blob);
qrCodeImg = url;
});
})()
const submitCode = async() => { const submitCode = async () => {
const response = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/2fa/check`, await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/2fa/check`,
{ {
method : 'POST', method: "POST",
headers : { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body : JSON.stringify({ body: JSON.stringify({
"twoFaCode" : qrCode, twoFaCode: qrCode,
}), }),
}); }
if (response.status === 401) { )
qrCode = ""; .then((response) => {
wrongCode = `Wrong code`; if (!response.ok) {
} if (response.status === 401) {
if (response.status === 200) { qrCode = "";
push('/profile'); wrongCode = `Wrong code`;
console.log('valid Code for 2FA') }
} throw new Error("HTTP " + response.status);
}; }
push("/profile");
console.log("valid Code for 2FA");
})
.catch((error) => {
console.log("catch submitCode: ", error);
});
};
</script> </script>

53
srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
View File

@@ -1,28 +1,37 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from "svelte"; import { onMount, onDestroy } from "svelte";
import { fetchUser } from "../../pieces/utils";
let user;
let allUsersRanking = [];
let fetchScoresInterval;
//user's stuff
let currentUser;
let allUsers = [];
let idInterval;
onMount( async() => { onMount( async() => {
currentUser = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`) user = await fetchUser();
.then( x => x.json() ); allUsersRanking = await fetchScores();
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ranking`)
.then( x => x.json() ); fetchScoresInterval = setInterval(fetchScores, 10000);
idInterval = setInterval(fetchScores, 10000);
}) })
onDestroy( async() => { onDestroy( async() => {
clearInterval(idInterval); clearInterval(fetchScoresInterval);
}) })
function fetchScores() { async function fetchScores()
fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ranking`) {
.then( x => x.json() ) return fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/ranking`)
.then( x => allUsers = x ); .then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
return response.json();
})
.catch((error) => {
console.log("catch fetchScores: ", error);
return [];
});
} }
</script> </script>
@@ -41,18 +50,18 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each allUsers as user, i} {#each allUsersRanking as userRanking, i}
<tr> <tr>
<th>{i + 1}</th> <th>{i + 1}</th>
{#if user.username === currentUser.username} {#if userRanking.username === user.username}
<td><b>{user.username} [You]</b></td> <td><b>{userRanking.username} [You]</b></td>
{:else} {:else}
<td>{user.username}</td> <td>{userRanking.username}</td>
{/if} {/if}
<td>{user.stats.winGame}</td> <td>{userRanking.stats.winGame}</td>
<td>{user.stats.loseGame}</td> <td>{userRanking.stats.loseGame}</td>
<td>{user.stats.drawGame}</td> <td>{userRanking.stats.drawGame}</td>
<td>{user.stats.totalGame}</td> <td>{userRanking.stats.totalGame}</td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>

18
srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
View File

@@ -1,19 +1,17 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte'; import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
import { push } from 'svelte-spa-router'; import { push } from 'svelte-spa-router';
import Chat from '../../pieces/chat/Chat.svelte'; import Chat from '../../pieces/chat/Chat.svelte';
import { fetchUser } from "../../pieces/utils";
let user; let user;
onMount( async() => {
// console.log('mounting profile display')
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
})
onMount( async() => {
user = await fetchUser();
})
</script> </script>
@@ -21,7 +19,7 @@
<div class="background-pages"> <div class="background-pages">
<div class="outer"> <div class="outer">
{#if user !== undefined} {#if user}
<GenerateUserDisplay user={user}/> <GenerateUserDisplay user={user}/>
<button on:click={() => (push('/profile/settings'))}>Profile Settings</button> <button on:click={() => (push('/profile/settings'))}>Profile Settings</button>
{:else} {:else}

34
srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplayOneUser.svelte
View File

@@ -1,32 +1,25 @@
<script lang="ts"> <script lang="ts">
/* ProfileDisplayOneUser is the same as DisplayAUser except sources the username from params from router rather than /* ProfileDisplayOneUser is the same as DisplayAUser except sources the username from params from router rather than
from a regular var. But yea it's functionally identical, seemed easier to just have a duplicate rather than figuring from a regular var. But yea it's functionally identical, seemed easier to just have a duplicate rather than figuring
out how to get a more complicated things to do 2 jobs.*/ out how to get a more complicated things to do 2 jobs.*/
import { onMount } from 'svelte';
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
import { fetchUser } from "../../pieces/utils";
import { onMount } from 'svelte'; export let params;
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte'; let oneUser;
export let params;
let user;
onMount( async() => {
// console.log('Display One User username: '+ params.username)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${params.username}`)
.then( (x) => x.json() );
console.log('in display ONE user')
console.log({...user})
})
onMount( async() => {
oneUser = await fetchUser(params.username);
})
</script> </script>
<div class="background-pages"> <div class="background-pages">
{#if user !== undefined} {#if oneUser}
<GenerateUserDisplay user={user}/> <GenerateUserDisplay user={oneUser}/>
{:else} {:else}
<h2>Sorry</h2> <h2>Sorry</h2>
<div>Failed to load user {params.username}</div> <div>Failed to load user {params.username}</div>
@@ -35,4 +28,3 @@
<!-- This is where i might toss in an Invite to Game button ? --> <!-- This is where i might toss in an Invite to Game button ? -->
</div> </div>

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

@@ -1,81 +1,89 @@
<script lang="ts"> <script lang="ts">
import Card from '../../pieces/Card.svelte'; import Card from '../../pieces/Card.svelte';
import {onMount} from 'svelte'; import {onMount} from 'svelte';
import { push } from 'svelte-spa-router'; import { push } from 'svelte-spa-router';
import Button from '../../pieces/Button.svelte'; import Button from '../../pieces/Button.svelte';
import { fetchAvatar } from "../../pieces/utils"; import { fetchUser, fetchAvatar } from "../../pieces/utils";
let user; let user;
let avatar, newAvatar; let avatar, newAvatar;
let uploadAvatarSuccess = false; let uploadAvatarSuccess = false;
// tbh i might not need this... // tbh i might not need this...
let set = { username: '', tfa: false }; let set = { username: '', tfa: false };
let nameTmp; // annoying... let nameTmp; // annoying...
const errors = { username: '', checkbox: '', avatar: ''}; const errors = { username: '', checkbox: '', avatar: ''};
let success = {username: '', 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 fetchUser();
.then( (x) => x.json() ); avatar = await fetchAvatar();
// do a .catch?
if (user === undefined) { if (!user) {
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;
set.tfa = user.isEnabledTwoFactorAuth; set.tfa = user.isEnabledTwoFactorAuth;
avatar = await fetchAvatar(user.username);
}) })
const settingsHandler = async() => { const settingsHandler = async() =>
// I don't really care which i use at this point... {
// if (set.username === nameTmp) { // TODO Luke <--> Eric : Explications
if ((set.username.trim() === '') && set.tfa === user.isEnabledTwoFactorAuth) { // I don't really care which i use at this point...
errors.username = 'Invalid new username'; // if (set.username === nameTmp) {
return; if ((set.username.trim() === '') && set.tfa === user.isEnabledTwoFactorAuth) {
} errors.username = 'Invalid new username';
else if ((set.username.trim() === '') && set.tfa !== user.isEnabledTwoFactorAuth) { return;
set.username = user.username }
} else if ((set.username.trim() === '') && set.tfa !== user.isEnabledTwoFactorAuth) {
else { set.username = user.username
errors.username = ''; }
} else {
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`, { errors.username = '';
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"username": set.username,
"isEnabledTwoFactorAuth": set.tfa
})
})
.then((response) => {
if (response.status === 200)
success.username = "Your changes have been saved"
else if (response.status === 201)
push("/2fa");
else if (response.status === 409)
errors.username = `${set.username} is already in use, pick a different one.`;
else
errors.username = "Something went wrong";
} }
)
.catch((err) => errors.username = err)
// .then((result) => console.log(result)) await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`,
// .then(() => console.log('successful sub of new settings')) {
}; method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"username": set.username,
"isEnabledTwoFactorAuth": set.tfa
})
}
)
.then((response) => {
if (!response.ok) {
errors.username = "Something went wrong";
if (response.status === 409) {
errors.username = `${set.username} is already in use, pick a different one.`;
}
throw new Error("HTTP " + response.status);
}
else {
if (response.status === 200) {
success.username = "Your changes have been saved";
}
else if (response.status === 201) {
push("/2fa");
}
}
})
.catch((error) => {
console.log("catch settingsHandler: ", error);
});
}
const uploadAvatar = async() => { const uploadAvatar = async() => {
errors.avatar = ''; errors.avatar = '';
if (newAvatar === undefined) { if (!newAvatar) {
errors.avatar = 'You need to pick a file.' errors.avatar = 'You need to pick a file.'
return; return;
} }
@@ -85,19 +93,23 @@
// tmp // tmp
console.log(data); console.log(data);
const responseWhenChangeAvatar = fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`, await 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) { .then((response) => {
if (!response.ok) {
errors.avatar = response.statusText;
throw new Error("HTTP " + response.status);
}
uploadAvatarSuccess = true; uploadAvatarSuccess = true;
success.avatar = 'Your avatar has been updated'; success.avatar = 'Your avatar has been updated';
} })
else { .catch((error) => {
errors.avatar = responseFromServer.statusText; console.log("catch uploadAvatar: ", error);
} });
avatar = await fetchAvatar(user.username); avatar = await fetchAvatar(user.username);
} }
@@ -130,7 +142,7 @@
<Card> <Card>
<!-- ok so it can't actually show us the file we upload until we've uploaded it... --> <!-- ok so it can't actually show us the file we upload until we've uploaded it... -->
{#if avatar !== undefined} {#if avatar}
<img class="avatar" src={avatar} alt="your avatar"/> <img class="avatar" src={avatar} alt="your avatar"/>
{/if} {/if}
<form on:submit|preventDefault={uploadAvatar}> <form on:submit|preventDefault={uploadAvatar}>
@@ -141,7 +153,7 @@
<input type="file" bind:files={newAvatar}/> <input type="file" bind:files={newAvatar}/>
<div class="error">{errors.avatar}</div> <div class="error">{errors.avatar}</div>
</div> </div>
<Button type={newAvatar === undefined ? "primary" : "secondary"}>Upload Avatar</Button> <Button type={!newAvatar ? "primary" : "secondary"}>Upload Avatar</Button>
</form> </form>
</Card> </Card>
</div> </div>

470
srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
View File

@@ -1,232 +1,294 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte";
import Button from "../../pieces/Button.svelte";
import DisplayAUser from "../../pieces/DisplayAUser.svelte";
import Tabs from "../../pieces/Tabs.svelte";
import { fetchUser, fetchAllUsers, fetchAvatar } from "../../pieces/utils";
import { onMount } from "svelte"; let user;
import Button from "../../pieces/Button.svelte"; let allUsers = [];
import DisplayAUser from "../../pieces/DisplayAUser.svelte"; let myFriendships = [];
import Tabs from "../../pieces/Tabs.svelte"; let requestsMade, requestsRecieved;
let blockedUsers = [];
let usernameBeingViewed;
let friendshipStatusFull; // date, reveiverUsername, status
let user; /**** Layout variables ****/
let allUsers; let tabItems: string[] = [
let myFriendships; "All Users",
let requestsMade, requestsRecieved; "My Friends",
let blockedUsers; "Friend Requests",
let usernameBeingViewed; "Blocked Users",
let friendshipStatusFull; // date, reveiverUsername, status ];
let activeTabItem: string = "All Users";
/**** Layout variables ****/ onMount(async () => {
let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests', 'Blocked Users'] user = await fetchUser();
let activeTabItem: string = 'All Users';
fetchAll();
});
onMount( async() => { const fetchAll = async () => {
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`) // no need to await i think it can load in the background
.then( (x) => x.json() ); fetchAllUsers_Wrapper();
fetchMyFriendships();
fetchRequestsMade();
fetchRequestsReceived();
fetchBlockedUsers();
};
fetchAll(); /***** Fetch basic things *****/
}); const fetchAllUsers_Wrapper = async () => {
allUsers = await fetchAllUsers();
if (usernameBeingViewed) {
let found = allUsers.find(
(e) => e.username === usernameBeingViewed
);
if (!found) {
usernameBeingViewed = null;
friendshipStatusFull = null;
}
}
};
const fetchAll = async() => { // it's more like fetch friendships
// no need to await i think it can load in the background // then i need to extract the users
fetchAllUsers(); const fetchMyFriendships = async () => {
fetchMyFriendships(); myFriendships = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`)
fetchRequestsMade(); .then((response) => {
fetchRequestsReceived(); if (!response.ok) {
fetchBlockedUsers(); throw new Error("HTTP " + response.status);
} }
return response.json();
})
.catch((error) => {
console.log("catch fetchMyFriendships: ", error);
return [];
});
};
/***** Fetch basic things *****/ const fetchRequestsMade = async () => {
const fetchAllUsers = async() => { requestsMade = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/pending`)
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`) .then((response) => {
.then( x => x.json() ); if (!response.ok) {
console.log('got all users ') throw new Error("HTTP " + response.status);
console.log({...allUsers}) }
if (usernameBeingViewed !== undefined) { return response.json();
let found = allUsers.find(e => e.username === usernameBeingViewed); })
// console.log("SEARCHING ALL USERS: ") .catch((error) => {
// console.log({...found}) console.log("catch fetchRequestsMade: ", error);
if (found === undefined) { return [];
// console.log('none found') });
usernameBeingViewed = undefined; };
friendshipStatusFull = undefined;
}
}
};
// it's more like fetch friendships const fetchRequestsReceived = async () => {
// then i need to extract the users requestsRecieved = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/received`)
const fetchMyFriendships = async() => { .then((response) => {
myFriendships = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`) if (!response.ok) {
.then( x => x.json() ); throw new Error("HTTP " + response.status);
}
return response.json();
})
.catch((error) => {
console.log("catch fetchRequestsReceived: ", error);
return [];
});
};
console.log('got my friends ') const fetchBlockedUsers = async () => {
console.log({...myFriendships}) blockedUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/blocked`)
}; .then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
return response.json();
})
.catch((error) => {
console.log("catch fetchBlockedUsers: ", error);
return [];
});
};
/**** END OF MAIN FETCH ****/
const fetchRequestsMade = async() => { // returns everything but BLOCKED
requestsMade = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/pending`) const fetchFriendshipFull = async (aUsername) => {
.then( x => x.json() ); friendshipStatusFull = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends?username=${aUsername}`)
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
return response.json();
})
.catch((error) => {
console.log("catch fetchFriendshipFull: ", error);
return [];
});
};
console.log('got requests made ') const sendFriendRequest = async (aUsername) => {
console.log({...requestsMade}) await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`,
}; {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
receiverUsername: aUsername,
status: "R",
}),
}
)
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch sendFriendRequest: ", error);
});
const fetchRequestsReceived = async() => { await fetchFriendshipFull(aUsername);
requestsRecieved = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/received`) await fetchAll();
.then( x => x.json() ); };
console.log('got requests received ') const viewAUser = async (aUsername) => {
console.log({...requestsRecieved}) usernameBeingViewed = aUsername;
}; await fetchFriendshipFull(aUsername);
};
const fetchBlockedUsers = async() => { const acceptFriendRequest = async (relationshipId) => {
blockedUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/blocked`) await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/accept`,
.then( x => x.json() ); {
method: "PATCH",
}
)
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch acceptFriendRequest: ", error);
});
console.log('got blocked users, is it empty?') await fetchFriendshipFull(usernameBeingViewed);
console.log({...blockedUsers}) await fetchAll();
console.log(Object.keys(blockedUsers)) activeTabItem = activeTabItem;
}; };
/**** END OF MAIN FETCH ****/
// returns everything but BLOCKED const declineFriendRequest = async (relationshipId) => {
const fetchFriendshipFull = async(aUsername) => { await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/decline`,
console.log('fetch friendship from a username') {
console.log(aUsername) method: "PATCH",
}
)
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch declineFriendRequest: ", error);
});
friendshipStatusFull = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends?username=${aUsername}`) await fetchFriendshipFull(usernameBeingViewed);
.then( x => x.json()); await fetchAll();
activeTabItem = activeTabItem;
};
console.log({...friendshipStatusFull}) const unfriend = async (relationshipId) => {
}; await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}`,
{
method: "DELETE",
}
)
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch unfriend: ", error);
});
await fetchFriendshipFull(usernameBeingViewed);
if (Object.keys(friendshipStatusFull).length === 0) {
friendshipStatusFull = null;
}
const sendFriendRequest = async(aUsername) => { await fetchAll();
console.log('sending a friend request') activeTabItem = activeTabItem;
console.log(aUsername) };
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`, { const blockANonFriendUser = async (aUsername) => {
method : "POST", await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`,
headers: { 'Content-Type': 'application/json'}, {
body: JSON.stringify({ method: "POST",
"receiverUsername": aUsername, headers: { "Content-Type": "application/json" },
"status": "R" body: JSON.stringify({
}) receiverUsername: aUsername,
}) status: "B",
.then( x => x.json()) }),
// .catch( x => console.log({...x})) }
await fetchFriendshipFull(aUsername); )
await fetchAll(); .then((response) => {
}; if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch blockANonFriendUser: ", error);
});
const viewAUser = async(aUsername) => { await fetchAll();
console.log('Profile Friend updating userBeingViewed') usernameBeingViewed = null;
friendshipStatusFull = null;
usernameBeingViewed = aUsername; activeTabItem = activeTabItem;
await fetchFriendshipFull(aUsername); };
console.log('Friendship Status Full') const blockAFriend = async (relationshipId) => {
console.log({...friendshipStatusFull}) await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/block`,
}; {
method: "PATCH"
}
)
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch blockAFriend: ", error);
});
const acceptFriendRequest = async(relationshipId) => { await fetchAll();
console.log('accept friend request') usernameBeingViewed = null;
friendshipStatusFull = null;
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/accept`, { // reloads active tab so you get blocked users for example
method: "PATCH"}) activeTabItem = activeTabItem;
.then( x => x.json()); };
await fetchFriendshipFull(usernameBeingViewed);
await fetchAll();
activeTabItem = activeTabItem;
};
const declineFriendRequest = async(relationshipId) => { const unblockAUser = async (relationshipId) => {
console.log('decline friend request') // it's basically the same as unfriending someone cuz unfriending them means the relationship is deleted
await unfriend(relationshipId);
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/decline`, { activeTabItem = activeTabItem;
method: "PATCH"}) };
.then( x => x.json());
await fetchFriendshipFull(usernameBeingViewed);
await fetchAll();
activeTabItem = activeTabItem;
};
const unfriend = async(relationshipId) => {
console.log('Unfriend')
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}`, {
method: "DELETE"})
.then( x => x.json());
await fetchFriendshipFull(usernameBeingViewed);
if (Object.keys(friendshipStatusFull).length === 0)
friendshipStatusFull = undefined;
await fetchAll();
activeTabItem = activeTabItem;
};
const blockANonFriendUser = async(aUsername) => {
console.log('Block a non friend user, their username')
console.log(aUsername)
let sentFriendRequest = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`, {
method : "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
"receiverUsername": aUsername,
"status": "B"
})
})
.then( x => x.json())
// await fetchBlockedUsers();
// await fetchAllUsers();
await fetchAll();
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
activeTabItem = activeTabItem;
};
const blockAFriend = async(relationshipId) => {
console.log('blocking a friend, the relationshipID')
console.log(relationshipId)
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/block`, {method: "PATCH"})
.then( x => x.json() );
console.log('blocked a user response')
console.log({...resp})
// await fetchBlockedUsers();
// await fetchAllUsers();
await fetchAll();
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
// reloads active tab so you get blocked users for example
activeTabItem = activeTabItem;
};
const unblockAUser = async(relationshipId) => {
// it's basically the same as unfriending someone cuz unfriending them means the relationship is deleted
await unfriend(relationshipId);
activeTabItem = activeTabItem;
};
const switchTab = async(e) => {
activeTabItem = e.detail;
if (activeTabItem === 'All Users') {
await fetchAllUsers();
} else if (activeTabItem === 'My Friends') {
await fetchMyFriendships();
} else if (activeTabItem === 'Friend Requests') {
await fetchRequestsReceived();
} else if (activeTabItem === 'Blocked Users') {
await fetchBlockedUsers();
console.log('fetching blocked users')
}
if (usernameBeingViewed !== undefined)
fetchFriendshipFull(usernameBeingViewed);
};
const switchTab = async (e) => {
activeTabItem = e.detail;
if (activeTabItem === "All Users") {
await fetchAllUsers_Wrapper();
} else if (activeTabItem === "My Friends") {
await fetchMyFriendships();
} else if (activeTabItem === "Friend Requests") {
await fetchRequestsReceived();
} else if (activeTabItem === "Blocked Users") {
await fetchBlockedUsers();
console.log("fetching blocked users");
}
if (usernameBeingViewed)
fetchFriendshipFull(usernameBeingViewed);
};
</script> </script>
@@ -239,7 +301,7 @@
<div class="sidebar-list"> <div class="sidebar-list">
<Tabs items={tabItems} activeItem={activeTabItem} size="small" on:tabChange={switchTab}/> <Tabs items={tabItems} activeItem={activeTabItem} size="small" on:tabChange={switchTab}/>
{#if activeTabItem === 'All Users' && allUsers !== undefined} {#if activeTabItem === 'All Users' && allUsers}
<h3>{activeTabItem}</h3> <h3>{activeTabItem}</h3>
{#if Object.keys(allUsers).length === 0} {#if Object.keys(allUsers).length === 0}
<div class="tip">You are alone on this platform...</div> <div class="tip">You are alone on this platform...</div>
@@ -255,7 +317,7 @@
<div class="status sidebar-item">{aUser.status}</div> <div class="status sidebar-item">{aUser.status}</div>
<br> <br>
{/each} {/each}
{:else if activeTabItem === 'My Friends' && myFriendships !== undefined} {:else if activeTabItem === 'My Friends' && myFriendships}
<h3>{activeTabItem}</h3> <h3>{activeTabItem}</h3>
{#if Object.keys(myFriendships).length === 0} {#if Object.keys(myFriendships).length === 0}
<div class="tip">You don't have any Friends... Yet!</div> <div class="tip">You don't have any Friends... Yet!</div>
@@ -268,7 +330,7 @@
{/if} {/if}
<br> <br>
{/each} {/each}
{:else if activeTabItem === 'Friend Requests' && requestsRecieved !== undefined} {:else if activeTabItem === 'Friend Requests' && requestsRecieved}
<h3>{activeTabItem}</h3> <h3>{activeTabItem}</h3>
{#if Object.keys(requestsRecieved).length === 0} {#if Object.keys(requestsRecieved).length === 0}
<div class="tip">You don't have any Friend Requests</div> <div class="tip">You don't have any Friend Requests</div>
@@ -278,7 +340,7 @@
<div class="status sidebar-item">{aUser.status}</div> <div class="status sidebar-item">{aUser.status}</div>
<br> <br>
{/each} {/each}
{:else if activeTabItem === 'Blocked Users' && blockedUsers !== undefined} {:else if activeTabItem === 'Blocked Users' && blockedUsers}
<h3>{activeTabItem}</h3> <h3>{activeTabItem}</h3>
<!-- seems a little excessive... maybe a lighter way of doing this? doesn't seem like it, i hate it but at least only happens sometimes.default... --> <!-- seems a little excessive... maybe a lighter way of doing this? doesn't seem like it, i hate it but at least only happens sometimes.default... -->
{#if Object.keys(blockedUsers).length === 0} {#if Object.keys(blockedUsers).length === 0}
@@ -294,7 +356,7 @@
<div class="main-display"> <div class="main-display">
{#if usernameBeingViewed !== undefined} {#if usernameBeingViewed}
<DisplayAUser aUsername={usernameBeingViewed}/> <DisplayAUser aUsername={usernameBeingViewed}/>
<div class="buttons-area"> <div class="buttons-area">

29
srcs/requirements/svelte/api_front/src/pieces/DisplayAUser.svelte
View File

@@ -1,30 +1,23 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import GenerateUserDisplay from './GenerateUserDisplay.svelte'; import GenerateUserDisplay from './GenerateUserDisplay.svelte';
import { fetchUser } from "../pieces/utils";
export let aUsername; export let aUsername;
let user; let aUser;
onMount( async() => { onMount( async() => {
// console.log('Display aUser username: '+ aUsername) aUser = await fetchUser(aUsername);
})
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`) $: aUsername, fetchUser(aUsername);
.then( (x) => x.json() );
})
export const updateUser = async() => {
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
.then( (x) => x.json() );
};
$: aUsername, updateUser();
</script> </script>
<div class="background-pages"> <div class="background-pages">
{#if user !== undefined} {#if aUser}
<GenerateUserDisplay user={user}/> <GenerateUserDisplay user={aUser}/>
{:else} {:else}
<h2>Sorry</h2> <h2>Sorry</h2>
<div>Failed to load user {aUsername}</div> <div>Failed to load user {aUsername}</div>

55
srcs/requirements/svelte/api_front/src/pieces/Header.svelte
View File

@@ -1,36 +1,47 @@
<script lang="ts"> <script lang="ts">
import { push } from "svelte-spa-router"; import { push } from "svelte-spa-router";
import { location } from 'svelte-spa-router'; import { location } from 'svelte-spa-router';
// no need, it's just for links // no need, it's just for links
import active from 'svelte-spa-router/active' import active from 'svelte-spa-router/active'
// or i could leave them all and not display if they're active? // or i could leave them all and not display if they're active?
$: current = $location; $: current = $location;
let handleClickLogout = async () => { let handleClickLogout = async () =>
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, { {
method: 'POST', await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`,
}) {
.then( () => push('/') ) method: 'POST',
console.log('clicked logout header') }
}; )
.then((response) => {
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
})
.catch((error) => {
console.log("catch handleClickLogout: ", error);
});
push('/');
};
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="header"> <div class="header">
<img src="/img/logo_potato.png" alt="Potato Pong Logo" on:click={() => (push('/'))}> <img src="/img/logo_potato.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<div class="center"> <div class="center">
<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button> <button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button> <button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button> <button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
<button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button> <button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
<button class:selected="{current === '/profile/users'}" on:click={() => (push('/profile/users'))}>Users</button> <button class:selected="{current === '/profile/users'}" on:click={() => (push('/profile/users'))}>Users</button>
</div> </div>
<button class="logout" on:click={handleClickLogout}>Log Out</button> <button class="logout" on:click={handleClickLogout}>Log Out</button>
</div> </div>
<style> <style>