so i implemented user blocking but something about the flow in the frontend is broken now, will investigate
This commit is contained in:
Me
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
|
||||
import { onMount } from "svelte";
|
||||
import { binding_callbacks } from "svelte/internal"; // WTF is this?
|
||||
import { binding_callbacks, empty } from "svelte/internal"; // WTF is this?
|
||||
import App from "../../App.svelte";
|
||||
import Button from "../../pieces/Button.svelte";
|
||||
import DisplayAUser from "../../pieces/DisplayAUser.svelte";
|
||||
@@ -14,12 +14,12 @@
|
||||
let allUsers;
|
||||
let myFriends;
|
||||
let requestsMade, requestsRecieved;
|
||||
let blockedUsers;
|
||||
let usernameBeingViewed;
|
||||
let friendshipStatusFull; // id, date, senderUsername, reveiverUsername, status
|
||||
let friendshipFetch; // like a generic var for any friendship fetch actions that might happen
|
||||
|
||||
/**** Layout variables ****/
|
||||
let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
|
||||
let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests', 'Blocked Users']
|
||||
let activeTabItem: string = 'All Users';
|
||||
|
||||
|
||||
@@ -34,42 +34,25 @@
|
||||
user = await fetch('http://transcendance:8080/api/v2/user')
|
||||
.then( (x) => x.json() );
|
||||
|
||||
fetchAll();
|
||||
// ok this shit works!
|
||||
// const interval = setInterval(() => {
|
||||
// fetchAll();
|
||||
// }, 1000);
|
||||
|
||||
// return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
const fetchAll = async() => {
|
||||
// no need to await i think it can load in the background
|
||||
fetchAllUsers();
|
||||
fetchMyFriends();
|
||||
fetchRequestsMade();
|
||||
fetchRequestsReceived();
|
||||
fetchAllUsers();
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
/* TMP for Testing */
|
||||
let cherifFetch;
|
||||
const fetchCherif = async() => {
|
||||
cherifFetch = await fetch('http://transcendance:8080/api/v2/network/myfriends/chbadad')
|
||||
.then( x => x.json() );
|
||||
console.log('Cherif Fetched ')
|
||||
console.log({...cherifFetch})
|
||||
};
|
||||
|
||||
let ericFetch;
|
||||
const fetchEric = async() => {
|
||||
ericFetch = await fetch('http://transcendance:8080/api/v2/network/myfriends/erlazo')
|
||||
.then( x => x.json() );
|
||||
console.log('Eric Fetched ')
|
||||
console.log({...ericFetch})
|
||||
};
|
||||
|
||||
let tmpTest;
|
||||
const testBack = async(relationshipId) => {
|
||||
console.log('test back request')
|
||||
tmpTest = undefined;
|
||||
// PATCH http://transcendance:8080/api/v2/network/myfriends/:relationshipId/test
|
||||
tmpTest = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}/test`)
|
||||
.then( x => x.json());
|
||||
};
|
||||
/* End of Tests */
|
||||
fetchBlockedUsers();
|
||||
}
|
||||
|
||||
/***** Fetch basic things *****/
|
||||
const fetchAllUsers = async() => {
|
||||
allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
|
||||
.then( x => x.json() );
|
||||
@@ -98,95 +81,128 @@
|
||||
console.log({...requestsRecieved})
|
||||
};
|
||||
|
||||
let sentFriendRequest;
|
||||
const sendFriendRequest = async(potentialFriendUsername) => {
|
||||
set.friendUsername = '';
|
||||
errors.friendRequest = '';
|
||||
let valid = false;
|
||||
if (potentialFriendUsername === user.username) {
|
||||
errors.friendRequest = "You can't friend yourself."
|
||||
valid = false;
|
||||
} else {
|
||||
set.friendUsername = potentialFriendUsername;
|
||||
valid = true;
|
||||
}
|
||||
|
||||
if (valid) {
|
||||
sentFriendRequest = await fetch("http://transcendance:8080/api/v2/network/myfriends", {
|
||||
method : "POST",
|
||||
headers: { 'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
"receiverUsername": set.friendUsername,
|
||||
"status": "R"
|
||||
})
|
||||
})
|
||||
.then( x => x.json())
|
||||
areWeFriends(usernameBeingViewed);
|
||||
}
|
||||
const fetchBlockedUsers = async() => {
|
||||
blockedUsers = await fetch('http://transcendance:8080/api/v2/network/blocked')
|
||||
.then( x => x.json() );
|
||||
console.log('got blocked users, is it empty?')
|
||||
console.log({...blockedUsers})
|
||||
console.log(Object.keys(blockedUsers))
|
||||
};
|
||||
/**** END OF MAIN FETCH ****/
|
||||
|
||||
const areWeFriends = async(aUsername) => {
|
||||
console.log("Are We Friends?")
|
||||
friendshipStatusFull = undefined;
|
||||
const fetchFriendshipFull = async(aUsername) => {
|
||||
friendshipStatusFull = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${aUsername}`)
|
||||
.then( x => x.json());
|
||||
console.log({...friendshipStatusFull})
|
||||
};
|
||||
|
||||
|
||||
const sendFriendRequest = async(aUsername) => {
|
||||
const resp = await fetch("http://transcendance:8080/api/v2/network/myfriends", {
|
||||
method : "POST",
|
||||
headers: { 'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
"receiverUsername": aUsername,
|
||||
"status": "R"
|
||||
})
|
||||
})
|
||||
.then( x => x.json())
|
||||
};
|
||||
|
||||
const viewAUser = async(aUsername) => {
|
||||
console.log('Profile Friend updating userBeingViewed')
|
||||
usernameBeingViewed = aUsername;
|
||||
|
||||
friendshipStatusFull = undefined;
|
||||
// friendshipStatusFull = undefined;
|
||||
// id, date, senderUsername, reveiverUsername, status
|
||||
friendshipStatusFull = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${aUsername}`)
|
||||
.then( x => x.json());
|
||||
await fetchFriendshipFull(aUsername);
|
||||
|
||||
console.log('Friendship Status Full')
|
||||
console.log({...friendshipStatusFull})
|
||||
|
||||
};
|
||||
|
||||
|
||||
const acceptFriendRequest = async(relationshipId) => {
|
||||
console.log('accept friend request')
|
||||
friendshipFetch = undefined;
|
||||
// PATCH http://transcendance:8080/api/v2/network/myfriends/:relationshipId/accept
|
||||
friendshipFetch = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}/accept`, {
|
||||
const resp = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${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({...friendshipFetch})
|
||||
await areWeFriends(usernameBeingViewed);
|
||||
console.log({...resp})
|
||||
await fetchFriendshipFull(usernameBeingViewed);
|
||||
|
||||
// will this make it reload? C'est un peu bourain... do i even need it?
|
||||
activeTabItem = activeTabItem;
|
||||
};
|
||||
|
||||
const declineFriendRequest = async(relationshipId) => {
|
||||
console.log('decline friend request')
|
||||
friendshipFetch = undefined;
|
||||
// PATCH http://transcendance:8080/api/v2/network/myfriends/:relationshipId/decline
|
||||
friendshipFetch = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}/decline`, {
|
||||
const resp = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${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({...friendshipFetch})
|
||||
await areWeFriends(usernameBeingViewed);
|
||||
console.log({...resp})
|
||||
await fetchFriendshipFull(usernameBeingViewed);
|
||||
};
|
||||
|
||||
|
||||
const unfriend = async(relationshipId) => {
|
||||
console.log('Unfriend')
|
||||
friendshipFetch = undefined;
|
||||
friendshipFetch = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}`, {
|
||||
const resp = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}`, {
|
||||
method: "DELETE"})
|
||||
.then( x => x.json());
|
||||
await areWeFriends(usernameBeingViewed);
|
||||
|
||||
// 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?
|
||||
activeTabItem = activeTabItem;
|
||||
};
|
||||
|
||||
const blockANonFriendUser = async(aUsername) => {
|
||||
console.log('Block someone username')
|
||||
console.log({...aUsername})
|
||||
|
||||
const blockAUser = async(friendshipId) => {
|
||||
const blockResp = await fetch("http://transcendance:8080/api/v2/network/myfriends", {
|
||||
method : "POST",
|
||||
headers: { 'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
"receiverUsername": aUsername,
|
||||
"status": "B"
|
||||
})
|
||||
})
|
||||
.then( x => x.json())
|
||||
await fetchBlockedUsers();
|
||||
await fetchAllUsers();
|
||||
usernameBeingViewed = undefined;
|
||||
friendshipStatusFull = undefined;
|
||||
|
||||
// will this make it reload?
|
||||
activeTabItem = activeTabItem;
|
||||
};
|
||||
|
||||
const blockAFriend = async(relationshipId) => {
|
||||
const resp = await fetch(`http://transcendance:8080/api/v2/network/myfriends/${relationshipId}/block`, {method: "PATCH"})
|
||||
.then( x => x.json() );
|
||||
console.log('blocked a user response')
|
||||
console.log({...resp})
|
||||
await fetchBlockedUsers();
|
||||
await fetchAllUsers();
|
||||
usernameBeingViewed = undefined;
|
||||
friendshipStatusFull = undefined;
|
||||
|
||||
// will this make it reload?
|
||||
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);
|
||||
};
|
||||
|
||||
const switchTab = async(e) => {
|
||||
@@ -197,10 +213,13 @@
|
||||
await fetchMyFriends();
|
||||
} else if (activeTabItem === 'Friend Requests') {
|
||||
await fetchRequestsReceived();
|
||||
} else if (activeTabItem === 'Blocked Users') {
|
||||
await fetchBlockedUsers();
|
||||
console.log('blocked users: ')
|
||||
console.log({...blockedUsers})
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -210,6 +229,7 @@
|
||||
<!-- 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}/>
|
||||
@@ -219,20 +239,24 @@
|
||||
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}
|
||||
<!-- does this work? -->
|
||||
<!-- {#each allUsers as aUser (aUser.username)} -->
|
||||
{#each allUsers as aUser}
|
||||
<!-- {#if aUser.username !== user.username} -->
|
||||
<div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
|
||||
<!-- i could make an indicator component? like green for connected or something?
|
||||
i could use words but color them?
|
||||
i could make it so if they're in a game -->
|
||||
<div class="status sidebar-item">{aUser.status}</div>
|
||||
<br>
|
||||
<!-- {/if} -->
|
||||
<div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
|
||||
<!-- i could make an indicator component? like green for connected or something?
|
||||
i could use words but color them?
|
||||
i could make it so if they're in a game -->
|
||||
<div class="status sidebar-item">{aUser.status}</div>
|
||||
<br>
|
||||
{/each}
|
||||
{:else if activeTabItem === 'My Friends' && myFriends !== undefined}
|
||||
<h3>{activeTabItem}</h3>
|
||||
{#if Object.keys(myFriends).length === 0}
|
||||
<div class="tip">You don't have any Friends... Yet!</div>
|
||||
{/if}
|
||||
{#each myFriends as aUser}
|
||||
<div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
|
||||
<div class="status sidebar-item">{aUser.status}</div>
|
||||
@@ -240,10 +264,23 @@
|
||||
{/each}
|
||||
{:else if activeTabItem === 'Friend Requests' && requestsRecieved !== undefined}
|
||||
<h3>{activeTabItem}</h3>
|
||||
{#if Object.keys(requestsRecieved).length === 0}
|
||||
<div class="tip">You don't have any Friend Requests</div>
|
||||
{/if}
|
||||
{#each requestsRecieved as aUser}
|
||||
<div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div>
|
||||
<div class="status sidebar-item">{aUser.status}</div>
|
||||
<!-- yea not sure if status makes sense here, it's not the user's status it's the friendrequest status -->
|
||||
<br>
|
||||
{/each}
|
||||
{:else if activeTabItem === 'Blocked Users' && blockedUsers !== undefined}
|
||||
<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... -->
|
||||
{#if Object.keys(blockedUsers).length === 0}
|
||||
<div class="tip">You have not Blocked any Users</div>
|
||||
{/if}
|
||||
{#each blockedUsers as aUser}
|
||||
<div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div>
|
||||
<div class="status sidebar-item">{aUser.status}</div>
|
||||
<br>
|
||||
{/each}
|
||||
{/if}
|
||||
@@ -251,50 +288,41 @@
|
||||
|
||||
|
||||
<div class="main-display">
|
||||
<!-- use an #await here too? -->
|
||||
<!-- you can do better, like an on load sort of thing -->
|
||||
<!-- {#if userBeingViewed !== undefined && userBeingViewed === tmpUserBeingViewed} -->
|
||||
<!-- {#if userBeingViewed} -->
|
||||
{#if usernameBeingViewed !== undefined}
|
||||
<DisplayAUser aUsername={usernameBeingViewed}/>
|
||||
|
||||
<div class="buttons-area">
|
||||
<!-- so far not dealing with Blocked people -->
|
||||
{#if usernameBeingViewed !== user.username}
|
||||
<!-- uhhhg why can't it be simple... -->
|
||||
<!-- {#if friendshipStatusFull === undefined} -->
|
||||
{#if friendshipStatusFull && friendshipStatusFull.id}
|
||||
{#if friendshipStatusFull.status === 'R'}
|
||||
{#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}
|
||||
{:else if friendshipStatusFull.status === 'A'}
|
||||
<div class="tile">You are Friends</div>
|
||||
<Button on:click={() => unfriend(friendshipStatusFull.id)}>Unfriend</Button>
|
||||
{:else if friendshipStatusFull.status === 'D'}
|
||||
{#if friendshipStatusFull.senderUsername === user.username}
|
||||
<div class="tile">Your friend request was denied, hang in there bud.</div>
|
||||
{:else}
|
||||
<div class="tile">You declined the friend request but you could still change your mind</div>
|
||||
<Button on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>acceptFriendRequest</Button>
|
||||
{/if}
|
||||
{#if friendshipStatusFull && friendshipStatusFull.id}
|
||||
{#if friendshipStatusFull.status === 'R'}
|
||||
{#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}
|
||||
<Button on:click={() => blockAFriend(friendshipStatusFull.id)}>Block User</Button>
|
||||
{:else if friendshipStatusFull.status === 'A'}
|
||||
<div class="tile">You are Friends</div>
|
||||
<Button on:click={() => unfriend(friendshipStatusFull.id)}>Unfriend</Button>
|
||||
<Button on:click={() => blockAFriend(friendshipStatusFull.id)}>Block User</Button>
|
||||
{:else if friendshipStatusFull.status === 'D'}
|
||||
{#if friendshipStatusFull.senderUsername === user.username}
|
||||
<div class="tile">Your friend request was declined, hang in there bud.</div>
|
||||
{:else}
|
||||
<div class="tile">You declined the friend request, but you could still change your mind</div>
|
||||
<Button on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>Accept Friend Request</Button>
|
||||
{/if}
|
||||
<Button on:click={() => blockAFriend(friendshipStatusFull.id)}>Block User</Button>
|
||||
{:else if friendshipStatusFull.status === 'B'}
|
||||
{#if friendshipStatusFull.senderUsername === user.username}
|
||||
<Button on:click={() => unblockAUser(friendshipStatusFull.id)}>Unblock User</Button>
|
||||
{/if}
|
||||
{:else}
|
||||
<Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button>
|
||||
{/if}
|
||||
{:else}
|
||||
<Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button>
|
||||
<Button on:click={() => blockANonFriendUser(usernameBeingViewed)}>Block User</Button>
|
||||
{/if}
|
||||
|
||||
<!-- {#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} -->
|
||||
</div>
|
||||
{:else}
|
||||
<div class="placeholder">
|
||||
@@ -303,29 +331,6 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- {#await userBeingViewed}
|
||||
<p>... waiting</p>
|
||||
{: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={() => testBack(1)}>Test Friendship Back</Button>
|
||||
<Button on:click={fetchCherif}>Fetch Cherif</Button>
|
||||
<Button on:click={fetchEric}>Fetch Eric</Button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -376,6 +381,13 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.tip{
|
||||
color: darkgray;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.error{
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
|
||||
Reference in New Issue
Block a user