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

Stuggling a bit to get components to rerender when a prop updates in the Friendship page, will sort out tomorrow

Browse Source
This commit is contained in:
Me
2022-12-11 08:12:22 +01:00
parent 6eeb2b5474
commit db1e269e2e
5 changed files with 108 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
srcs/requirements/nestjs/api_back/src/friendship/friendship.controller.ts
View File

@@ -12,12 +12,14 @@ export class FriendshipController {
@Get('myfriends') @Get('myfriends')
@UseGuards(AuthenticateGuard) @UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard) @UseGuards(TwoFactorGuard)
findEmpty(@Req() req) { findEmpty(@Query('username') username: string, @Req() req) {
const user = req.user; const user = req.user;
if (username === undefined) {
console.log("WHAT IS UP MY GUYS IT IS YOUR BOI THAT IDIOT YOU HATE 11111");
return this.friendshipService.findAllFriends(user.id);
} else {
console.log("WHAT IS UP MY GUYS IT IS YOUR BOI THAT IDIOT YOU HATE 11111"); }
return this.friendshipService.findAllFriends(user.id);
} }
// GET http://transcendance:8080/api/v2/network/myfriends/relationshipId // GET http://transcendance:8080/api/v2/network/myfriends/relationshipId

7
srcs/requirements/nestjs/api_back/src/friendship/friendship.service.ts
View File

@@ -23,6 +23,13 @@ export class FriendshipService {
return friendship; return friendship;
} }
// async findOneFriendByUsername(friendUsername: string, username: string) {
// const friendship = await this.friendshipRepository.find({ where: { friendUsername: +friendshipId, requesterUsername: username, status: FriendshipStatus.ACCEPTED } });
// if (!friendship)
// throw new HttpException(`The requested friend not found.`, HttpStatus.NOT_FOUND);
// return friendship;
// }
async findOneBlocked(friendshipId: string) { async findOneBlocked(friendshipId: string) {
const friendship = await this.friendshipRepository.find({ where: { id: +friendshipId, status: FriendshipStatus.BLOCKED } }); const friendship = await this.friendshipRepository.find({ where: { id: +friendshipId, status: FriendshipStatus.BLOCKED } });
if (!friendship) if (!friendship)

118
srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { binding_callbacks } from "svelte/internal";
import Button from "../../pieces/Button.svelte"; import Button from "../../pieces/Button.svelte";
import DisplayAUser from "../../pieces/DisplayAUser.svelte"; import DisplayAUser from "../../pieces/DisplayAUser.svelte";
@@ -27,10 +28,11 @@ could be a list of friends and if they're active but i can't see that yet
let set = {friendUsername: '', friendId: Number} let set = {friendUsername: '', friendId: Number}
let user; let user;
let allUsers;
let myFriends; let myFriends;
let requestsMade, requestsRecieved; let requestsMade, requestsRecieved;
let allUsers; let userBeingViewed;
let userToDisplay;
onMount( async() => { onMount( async() => {
@@ -39,6 +41,7 @@ could be a list of friends and if they're active but i can't see that yet
user = await fetch('http://transcendance:8080/api/v2/user') user = await fetch('http://transcendance:8080/api/v2/user')
.then( (x) => x.json() ); .then( (x) => x.json() );
// userBeingViewed = user;
// console.log('user is ') // console.log('user is ')
// console.log(user) // console.log(user)
// console.log(user.username) // console.log(user.username)
@@ -69,6 +72,7 @@ could be a list of friends and if they're active but i can't see that yet
}) })
const displayAllUsers = async() => { const displayAllUsers = async() => {
allUsers = await fetch('http://transcendance:8080/api/v2/user/all') allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
.then( x => x.json() ); .then( x => x.json() );
@@ -88,46 +92,20 @@ could be a list of friends and if they're active but i can't see that yet
// console.log('got requests made ' + requestsMade) // console.log('got requests made ' + requestsMade)
}; };
// const sendFriendRequest =
let sentFriendRequest; let sentFriendRequest;
// const friendUserByUsername = async(potenticalFriendUsername) => { const sendFriendRequest = async(potentialFriendUsername) => {
const friendUserByUsername = async() => { set.friendUsername = '';
errors.friendRequest = '';
let valid = false; let valid = false;
if (potentialFriendUsername === user.username) {
if (!user || !user.username) {
valid = false;
}
// if (potenticalFriendUsername === '' || potenticalFriendUsername.trim() === '') {
if (set.friendUsername === '' || set.friendUsername.trim() === '') {
errors.friendRequest = "You have to put a friend's name in.";
valid = false;
} else if (set.friendUsername === user.username) {
errors.friendRequest = "You can't friend yourself." errors.friendRequest = "You can't friend yourself."
valid = false; valid = false;
} else { } else {
set.friendUsername = potentialFriendUsername;
valid = true; valid = true;
} }
// should i be checking if a Friend request has already been made ?
if (valid) { if (valid) {
console.log('user is ')
console.log(user)
console.log(user.username)
console.log('friend is ')
console.log(set.friendUsername)
// set.friendId = allUsers.find(f => f.username === set.friendUsername).id
// console.log('friend found: ' + set.friendId)
// ok this version works
// ok not really, requesterId and all that is good but...
// seems like i actually have to send IDs
sentFriendRequest = await fetch("http://transcendance:8080/api/v2/network/myfriends", { sentFriendRequest = await fetch("http://transcendance:8080/api/v2/network/myfriends", {
method : "POST", method : "POST",
headers: { 'Content-Type': 'application/json'}, headers: { 'Content-Type': 'application/json'},
@@ -138,15 +116,25 @@ could be a list of friends and if they're active but i can't see that yet
}) })
}) })
.then( x => x.json()) .then( x => x.json())
// .then (x => console.log({...x}));
// should i then update requtestsMade with another fetch?
// maybe also check if the request went through?
} }
};
// let sendUsername;
const viewAUser = async(aUser) => {
userBeingViewed = aUser;
// sendUsername = userBeingViewed.username;
// prolly like fetch if you're friends or not?
// GET http://transcendance:8080/api/v2/networks/myfriends?username=aUser but i need to make that as long as Cherif
// doesn't have a better option
// like i want this thing to return the Friendship ID ideally
};
const blockAUser = async(friendshipId) => {
}; };
</script> </script>
@@ -166,7 +154,7 @@ could be a list of friends and if they're active but i can't see that yet
<!-- {#each allUsers as aUser (aUser.username)} --> <!-- {#each allUsers as aUser (aUser.username)} -->
{#each allUsers as aUser } {#each allUsers as aUser }
<!-- <div class="a-user" on:click={() => displayAUser(aUser.username)}>{aUser.username}</div> --> <!-- <div class="a-user" on:click={() => displayAUser(aUser.username)}>{aUser.username}</div> -->
<div class="a-user" on:click={() => userToDisplay = aUser.username}>{aUser.username}</div> <div class="a-user" on:click={() => viewAUser(aUser)}>{aUser.username}</div>
<!-- i could make an indicator component? like green for connected or something? <!-- i could make an indicator component? like green for connected or something?
i could use words but color them? i could use words but color them?
i could make it so if they're in a game --> i could make it so if they're in a game -->
@@ -178,22 +166,49 @@ could be a list of friends and if they're active but i can't see that yet
</div> </div>
<!-- <h1>Friendship page</h1> -->
<div class="main-display"> <div class="main-display">
<h1>Main Display</h1> <h1>Main Display</h1>
<!-- use an #await here too? --> <!-- use an #await here too? -->
<!-- you can do better, like an on load sort of thing --> <!-- you can do better, like an on load sort of thing -->
{#if userToDisplay !== undefined} <!-- {#if userBeingViewed !== undefined && userBeingViewed === tmpUserBeingViewed} -->
<DisplayAUser aUsername={userToDisplay}/> <!-- {#if userBeingViewed !== undefined} -->
{#if userBeingViewed}
<div>{userBeingViewed.username}</div>
<DisplayAUser aUsername={userBeingViewed.username}/>
<!-- <DisplayAUser aUsername={sendUsername}/> -->
<Button type="secondary" on:click={() => sendFriendRequest(userBeingViewed.username)}>Add Friend</Button>
<!-- {#if user not blocked}
<Button on:click={() => blockAUser(userBeingViewed.username)}>Add Friend</Button>
does it have to be friendship IDs? can't i just use username?
i mean i guess friendship ID is more secure, and also easier in the back
but if i'm using friendshi ID i need a good way of getting them
{/if} -->
<!-- {:else if userBeingViewed !== undefined} -->
{/if} {/if}
<!-- {#if user && user.username} <!-- {#await userBeingViewed}
<div>You are {user.username}</div> <p>... waiting</p>
{/if} --> {:then}
<div>{userBeingViewed.username}</div>
<DisplayAUser aUsername={userBeingViewed.username}/>
<Button type="secondary" on:click={() => sendFriendRequest(userBeingViewed.username)}>Add Friend</Button>
{:catch}
<p>No user to view yet</p>
{/await} -->
<!-- {#if user not blocked}
<Button on:click={() => blockAUser(userBeingViewed.username)}>Add Friend</Button>
does it have to be friendship IDs? can't i just use username?
i mean i guess friendship ID is more secure, and also easier in the back
but if i'm using friendshi ID i need a good way of getting them
{/if} -->
<!-- {:else if userBeingViewed !== undefined} -->
<!-- <Button on:click={displayAllUsers}>Get All Users</Button> <!-- <Button on:click={displayAllUsers}>Get All Users</Button>
{#if allUsers !== undefined} {#if allUsers !== undefined}
@@ -212,15 +227,6 @@ could be a list of friends and if they're active but i can't see that yet
{/each} {/each}
{/if} --> {/if} -->
<br>
<div>Make a Friend!</div>
<!-- <form on:submit|preventDefault={() => friendUserByUsername(set.friendUsername)}> -->
<form on:submit|preventDefault={friendUserByUsername}>
<input type="text" placeholder="friend's username" bind:value={set.friendUsername}>
<div class="error">{errors.friendRequest}</div>
<Button type="secondary">Send Friend Request</Button>
</form>
<!-- <br> <br> --> <!-- <br> <br> -->
<!-- here i want to list all the requests you and have an accept and a decline button --> <!-- here i want to list all the requests you and have an accept and a decline button -->

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

@@ -2,6 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import GenerateUserDisplay from './GenerateUserDisplay.svelte'; import GenerateUserDisplay from './GenerateUserDisplay.svelte';
// import {updateGeneratedUser} from './GenerateUserDisplay.svelte';
export let aUsername; export let aUsername;
let user; let user;
@@ -17,12 +18,36 @@
}) })
// $: {
// updateUser(aUsername);
// }
const updateUser = async(updatedUser) => {
console.log('Display Update aUser username: '+ updateUser)
// http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
user = await fetch(`http://transcendance:8080/api/v2/user?username=${updateUser}`)
.then( (x) => x.json() );
};
// export const updateUser = async(updatedUser) => {
// console.log('Display Update aUser username: '+ updateUser)
// // http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
// user = await fetch(`http://transcendance:8080/api/v2/user?username=${updateUser}`)
// .then( (x) => x.json() );
// updateGeneratedUser(updateUser);
// };
</script> </script>
<!-- OHHHH i could use #await instead of if and have an nice loading page! --> <!-- OHHHH i could use #await instead of if and have an nice loading page! -->
{#if user !== undefined} {#if user !== undefined}
<GenerateUserDisplay {user} primary={true}/> <GenerateUserDisplay bind:user={user} primary={true}/>
<!-- <GenerateUserDisplay user={user} primary={true}/> -->
{:else} {:else}
<h2>Sorry</h2> <h2>Sorry</h2>
<div>Failed to load user {aUsername}</div> <div>Failed to load user {aUsername}</div>

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

@@ -24,6 +24,11 @@
}) })
// export function updateGeneratedUser(updatedUser) {
// user = updatedUser;
// };
if (user.loseGame > user.winGame) { if (user.loseGame > user.winGame) {
rank = 'Bitch Ass Loser!' rank = 'Bitch Ass Loser!'
} else if (user.loseGame === user.winGame) { } else if (user.loseGame === user.winGame) {