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

fixed a whole bunch of things, better logic for blocking, more reactive front, you can't double friend someone who has friended you anymore, path to display just one user other than you, cleaned up comments and commented out console.logs

Browse Source
This commit is contained in:
Me
2023-01-16 08:52:27 +01:00
parent 48d4ff3dee
commit 139703e867
8 changed files with 150 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,38 +1,30 @@
<script lang="ts">
import { onMount, afterUpdate } from 'svelte';
/* 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
out how to get a more complicated things to do 2 jobs.*/
import { onMount } from 'svelte';
import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
// export let aUsername;
export let params;
let user;
onMount( async() => {
console.log('Display One User username: '+ params.username)
//`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=NomDuUserATrouve`
// user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
// 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})
})
// export const updateUser = async() => {
// // console.log('Display Update aUser username: '+ aUsername)
// // http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
// // user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
// user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${params.username}`)
// .then( (x) => x.json() );
// };
// $: aUsername, updateUser();
// $: params.username, updateUser();
</script>
<div class="background-pages">
{#if user !== undefined}
<GenerateUserDisplay user={user}/>
{:else}
@@ -40,7 +32,7 @@
<div>Failed to load user {params.username}</div>
{/if}
<!-- This is where i might toss in an Invite to Game button ? -->
<style>
</div>
</style>

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

@@ -1,21 +1,17 @@
<script lang="ts">
import { onMount } from "svelte";
import { binding_callbacks, empty } from "svelte/internal"; // WTF is this?
import Button from "../../pieces/Button.svelte";
import DisplayAUser from "../../pieces/DisplayAUser.svelte";
import Tabs from "../../pieces/Tabs.svelte";
let errors = {friendRequest: '',};
let set = {friendUsername: ''}
let user;
let allUsers;
let myFriendships;
let requestsMade, requestsRecieved;
let blockedUsers;
let usernameBeingViewed;
let friendshipStatusFull; // id, date, senderUsername, reveiverUsername, status
let friendshipStatusFull; // date, reveiverUsername, status
/**** Layout variables ****/
let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests', 'Blocked Users']
@@ -23,7 +19,6 @@
onMount( async() => {
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
@@ -45,6 +40,16 @@
.then( x => x.json() );
console.log('got all users ')
console.log({...allUsers})
if (usernameBeingViewed !== undefined) {
let found = allUsers.find(e => e.username === usernameBeingViewed);
// console.log("SEARCHING ALL USERS: ")
// console.log({...found})
if (found === undefined) {
// console.log('none found')
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
}
}
};
// it's more like fetch friendships
@@ -52,6 +57,7 @@
const fetchMyFriendships = async() => {
myFriendships = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`)
.then( x => x.json() );
console.log('got my friends ')
console.log({...myFriendships})
};
@@ -59,6 +65,7 @@
const fetchRequestsMade = async() => {
requestsMade = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/pending`)
.then( x => x.json() );
console.log('got requests made ')
console.log({...requestsMade})
};
@@ -66,6 +73,7 @@
const fetchRequestsReceived = async() => {
requestsRecieved = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/received`)
.then( x => x.json() );
console.log('got requests received ')
console.log({...requestsRecieved})
};
@@ -73,6 +81,7 @@
const fetchBlockedUsers = async() => {
blockedUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/blocked`)
.then( x => x.json() );
console.log('got blocked users, is it empty?')
console.log({...blockedUsers})
console.log(Object.keys(blockedUsers))
@@ -83,8 +92,10 @@
const fetchFriendshipFull = async(aUsername) => {
console.log('fetch friendship from a username')
console.log(aUsername)
friendshipStatusFull = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends?username=${aUsername}`)
.then( x => x.json());
console.log({...friendshipStatusFull})
};
@@ -92,6 +103,7 @@
const sendFriendRequest = async(aUsername) => {
console.log('sending a friend request')
console.log(aUsername)
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`, {
method : "POST",
headers: { 'Content-Type': 'application/json'},
@@ -102,17 +114,14 @@
})
.then( x => x.json())
// .catch( x => console.log({...x}))
// "status": "A"
console.log({...resp})
fetchFriendshipFull(aUsername);
await fetchFriendshipFull(aUsername);
await fetchAll();
};
const viewAUser = async(aUsername) => {
console.log('Profile Friend updating userBeingViewed')
usernameBeingViewed = aUsername;
// friendshipStatusFull = undefined;
// id, date, senderUsername, reveiverUsername, status
usernameBeingViewed = aUsername;
await fetchFriendshipFull(aUsername);
console.log('Friendship Status Full')
@@ -125,39 +134,34 @@
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/accept`, {
method: "PATCH"})
.then( x => x.json());
// maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now...
console.log('accepted friend request, now response')
console.log({...resp})
await fetchFriendshipFull(usernameBeingViewed);
// will this make it reload? C'est un peu bourain... do i even need it?
await fetchAll();
activeTabItem = activeTabItem;
};
const declineFriendRequest = async(relationshipId) => {
console.log('decline friend request')
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/decline`, {
method: "PATCH"})
.then( x => x.json());
// maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now...
console.log('declined friend request, now response')
console.log({...resp})
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());
// friendshipStatusFull = undefined;
// OR
await fetchFriendshipFull(usernameBeingViewed);
if (Object.keys(friendshipStatusFull).length === 0)
friendshipStatusFull = undefined;
// will this make it reload? C'est un peu bourain... do i even need it?
await fetchAll();
activeTabItem = activeTabItem;
};
@@ -174,34 +178,37 @@
})
})
.then( x => x.json())
await fetchBlockedUsers();
await fetchAllUsers();
// await fetchBlockedUsers();
// await fetchAllUsers();
await fetchAll();
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
// will this make it reload?
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 fetchBlockedUsers();
// await fetchAllUsers();
await fetchAll();
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
// will this make it reload?
// 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) => {
@@ -214,31 +221,26 @@
await fetchRequestsReceived();
} else if (activeTabItem === 'Blocked Users') {
await fetchBlockedUsers();
console.log('blocked users: ')
console.log({...blockedUsers})
console.log('fetching blocked users')
}
if (usernameBeingViewed !== undefined)
fetchFriendshipFull(usernameBeingViewed);
};
</script>
<div class="background-pages">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="background-pages">
<div class="top-grid">
<!-- let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
let activeTabItem: string = 'All Users'; -->
<!-- maybe add numbers at the botton? like for how many of each there are? -->
<div class="sidebar-list">
<Tabs items={tabItems} activeItem={activeTabItem} size="small" on:tabChange={switchTab}/>
{#if activeTabItem === 'All Users' && allUsers !== undefined}
<h3>{activeTabItem}</h3>
<!-- problem, i can't use user.id since Cherif doesn't want to expost that to the front...
is there something else i could use? -->
<!-- add a thing so it doesn't display the current user just all the other users -->
{#if Object.keys(allUsers).length === 0}
<div class="tip">You are alone on this platform...</div>
{/if}
@@ -258,7 +260,6 @@
{#if Object.keys(myFriendships).length === 0}
<div class="tip">You don't have any Friends... Yet!</div>
{/if}
<!-- {#each myFriends as aUser (aUser.id)} -->
{#each myFriendships as aFriendship}
{#if aFriendship.senderUsername !== user.username}
<div class="sidebar-item" on:click={() => viewAUser(aFriendship.senderUsername)}>{aFriendship.senderUsername}</div>
@@ -272,7 +273,6 @@
{#if Object.keys(requestsRecieved).length === 0}
<div class="tip">You don't have any Friend Requests</div>
{/if}
<!-- {#each requestsRecieved as aUser (aUser.id)} -->
{#each requestsRecieved as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div>
<div class="status sidebar-item">{aUser.status}</div>
@@ -284,7 +284,6 @@
{#if Object.keys(blockedUsers).length === 0}
<div class="tip">You have not Blocked any Users</div>
{/if}
<!-- {#each blockedUsers as aUser (aUser.id)} -->
{#each blockedUsers as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.receiverUsername)}>{aUser.receiverUsername}</div>
<div class="status sidebar-item">{aUser.status}</div>
@@ -296,7 +295,6 @@
<div class="main-display">
{#if usernameBeingViewed !== undefined}
<!-- <DisplayAUser aUsername={usernameBeingViewed}/> -->
<DisplayAUser aUsername={usernameBeingViewed}/>
<div class="buttons-area">
@@ -305,7 +303,6 @@
{#if friendshipStatusFull.senderUsername === user.username}
<div class="tile">Friend Request Sent</div>
{:else}
<!-- <Button type="secondary" on:click={() => acceptFriendRequest(usernameBeingViewed)}>Unfriend</Button> -->
<Button type="secondary" on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>Accept Friend Request</Button>
<Button on:click={() => declineFriendRequest(friendshipStatusFull.id)}>Decline Friend Request</Button>
{/if}
@@ -331,7 +328,6 @@
<Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button>
<Button on:click={() => blockANonFriendUser(usernameBeingViewed)}>Block User</Button>
{/if}
<!-- <Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button> -->
</div>
{:else}
<div class="placeholder">
@@ -343,6 +339,8 @@
</div>
</div>
</div>
<style>
/* ok so i want a 12 column grid with a sidebar */

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

@@ -1,46 +1,32 @@
<script lang="ts">
import { onMount, afterUpdate } from 'svelte';
import { onMount } from 'svelte';
import GenerateUserDisplay from './GenerateUserDisplay.svelte';
// export let aUsername;
export let aUsername;
let user;
onMount( async() => {
// console.log('Display aUser username: '+ aUsername)
console.log('Display aUser username: '+ aUsername)
//`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=NomDuUserATrouve`
// user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
.then( (x) => x.json() );
// console.log('in display a user')
// console.log({...user})
})
export const updateUser = async() => {
// console.log('Display Update aUser username: '+ aUsername)
// http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
// user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
.then( (x) => x.json() );
};
// $: aUsername, updateUser();
$: aUsername, updateUser();
</script>
<div class="background-pages">
{#if user !== undefined}
<GenerateUserDisplay user={user}/>
{:else}
<h2>Sorry</h2>
<div>Failed to load user {aUsername}</div>
{/if}
<style>
</style>
</div>

40
srcs/requirements/svelte/api_front/src/routes/profileRoutes.js
View File

@@ -3,9 +3,9 @@ import NotFound from "../pages/NotFound.svelte";
import ProfileDisplay from '../pages/profile/ProfileDisplay.svelte';
import ProfileSettings from '../pages/profile/ProfileSettings.svelte';
import ProfileUsers from '../pages/profile/ProfileUsers.svelte';
import DisplayAUser from '../pieces/DisplayAUser.svelte';
import ProfileDisplayOneUser from "../pages/profile/ProfileDisplayOneUser.svelte";
import { wrap } from 'svelte-spa-router/wrap'
import DisplayAUser from '../pieces/DisplayAUser.svelte';
// establishing the prefix here very clearly so we can have a coherent repeatable structure
export const prefix = '/profile';
@@ -13,42 +13,8 @@ export const prefix = '/profile';
export const profileRoutes = {
'/': ProfileDisplay,
'/settings': ProfileSettings,
// '/friends': ProfileFriends,
'/users': ProfileUsers,
'/users/:username': ProfileDisplayOneUser,
// '/friends/:username': AProfile,
// '/users/:username': DisplayAUser,
'*': NotFound
};
// I think the conditions of access like are you authenticated work best when they are on the parent routes not the nested routes cuz i don't want my header showing up
// export const profileRoutes = {
// '/': wrap({
// component: ProfileDisplay,
// conditions: [
// (detail) => {
// const { fortyTwo, tfa } = get(loginStatus);
// console.log(fortyTwo);
// console.log(tfa);
// console.log('in Profile Display');
// // return true;
// return (fortyTwo && tfa);
// }
// ]
// }),
// '/settings': wrap({
// component: ProfileSettings,
// conditions: [
// (detail) => {
// const { fortyTwo, tfa } = get(loginStatus);
// // console.log(fortyTwo);
// // console.log(tfa);
// // return true;
// return (fortyTwo && tfa);
// }
// ]
// }),
// '*': NotFound
// };
// what if i did /#/profile/:id for like not the user? and then based on that did a fetch?