From 44074af23706536e8151811c437affe1851f5d62 Mon Sep 17 00:00:00 2001
From: Me <me@Philip.local>
Date: Tue, 13 Dec 2022 07:06:08 +0100
Subject: [PATCH] Cleaned up ProfileFriends page, but i need some input about
 the backend, might need to change some things

---
 .../src/friendship/friendship.controller.ts   |   4 +
 .../src/pages/profile/ProfileFriends.svelte   | 220 ++++++++----------
 .../svelte/api_front/src/pieces/Tabs.svelte   |  41 +++-
 3 files changed, 131 insertions(+), 134 deletions(-)

diff --git a/srcs/requirements/nestjs/api_back/src/friendship/friendship.controller.ts b/srcs/requirements/nestjs/api_back/src/friendship/friendship.controller.ts
index 297be6f8..8500df60 100644
--- a/srcs/requirements/nestjs/api_back/src/friendship/friendship.controller.ts
+++ b/srcs/requirements/nestjs/api_back/src/friendship/friendship.controller.ts
@@ -17,6 +17,10 @@ export class FriendshipController {
 		return this.friendshipService.findAllFriends(user.id);
 	}
 
+	// the username may change but the relationship id will not so we need to grab the relationship id from the username
+	// ie did that username send a friendship thing, and if so what are the ids
+
+
 	// GET http://transcendance:8080/api/v2/network/myfriends/relationshipId
 	@Get('myfriend/:relationshipId')
 	@UseGuards(AuthenticateGuard)
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
index 0f567db8..977ad13e 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
@@ -6,94 +6,65 @@
   import DisplayAUser from "../../pieces/DisplayAUser.svelte";
   import Tabs from "../../pieces/Tabs.svelte";
 
-
-  // Ok so i need to test all the paths Cherif has made but a major one doesn't work yet...
-  // in the mean time, i need to make some other stuff look nice
-  // what do i want?
-
-/*
-Ideas
-- a list of all users and if they're active
-could be a list of friends and if they're active but i can't see that yet
-- I click on a thing and it lets me see all the users and i get a button that lets me add them
-  - would that be like a serachable list of all users?
-  - am i skipping optimization? i mean for now yes, but like
-
-
-
-*/
-
-
-
-
   let errors = {friendRequest: '',};
-  let set = {friendUsername: '', friendId: Number}
 
   let user;
   let allUsers;
   let myFriends;
   let requestsMade, requestsRecieved;
-  let userBeingViewed;
+  let usernameBeingViewed;
 
+  /**** Layout variables ****/
+  let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
+  let activeTabItem: string = 'All Users';
 
 
   onMount( async() => {
+
+    // DO I ACTUALLY NEED TO ON MOUNT ALL THIS STUFF?
+      // ALSO I COULD JUST USE THE FUNCITONS I MADE...
+
+
     // yea no idea what
     // i mean do i fetch user? i will for now
     user = await fetch('http://transcendance:8080/api/v2/user')
       .then( (x) => x.json() );
 
-    // userBeingViewed = user;
-    // console.log('user is ')
-    // console.log(user)
-    // console.log(user.username)
-
-    myFriends = await fetch("http://transcendance:8080/api/v2/network/myfriends")
-      .then( (x) => x.json() );
-
-    // console.log('my friends')
-    // console.log(myFriends)
-
-    requestsMade = await fetch('http://transcendance:8080/api/v2/network/pending')
-      .then( x => x.json() );
-
-    // console.log('Requests pending ');
-    // console.log(requestsMade);
-
-
-    requestsRecieved = await fetch('http://transcendance:8080/api/v2/network/received')
-      .then( x => x.json() );
-
-    // console.log('Requests received ');
-    // console.log(requestsRecieved);
-
-    allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
-      .then( x => x.json() );
-    // console.log('got all users ' + allUsers)
-
+    fetchMyFriends();
+    fetchRequestsMade();
+    fetchRequestsReceived();
+    fetchAllUsers();
 
   });
 
 
-  const displayAllUsers = async() => {
+  const fetchAllUsers = async() => {
     allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
       .then( x => x.json() );
-    console.log('got all users ' + allUsers)
+    console.log('got all users ')
+    console.log({...allUsers})
   };
 
 
-  const displayAllFriends = async() => {
+  const fetchMyFriends = async() => {
     myFriends = await fetch('http://transcendance:8080/api/v2/network/myfriends')
       .then( x => x.json() );
-    // console.log('got all friends ' + allFriends)
+    // console.log('got all friends ')
+    // console.log({...allFriends})
   };
 
-  // will this work?
-  // const displayRequestsMade = async() => {
-  let displayRequestsMade = async() => {
+  const fetchRequestsMade = async() => {
     requestsMade = await fetch('http://transcendance:8080/api/v2/network/pending')
       .then( x => x.json() );
-    console.log('got requests made ' + requestsMade)
+    console.log('got requests made ')
+    console.log({...requestsMade})
+  };
+
+  const fetchRequestsReceived = async() => {
+    requestsRecieved = await fetch('http://transcendance:8080/api/v2/network/received')
+      .then( x => x.json() );
+    console.log('got requests received ')
+    console.log({...requestsRecieved})
   };
 
   let sentFriendRequest;
@@ -122,9 +93,9 @@ could be a list of friends and if they're active but i can't see that yet
     }
   };
 
-  const viewAUser = async(aUser) => {
+  const viewAUser = async(aUsername) => {
     console.log('Profile Friend updating userBeingViewed')
-    userBeingViewed = aUser;
+    usernameBeingViewed = aUsername;
 
 
     // sendUsername = userBeingViewed.username;
@@ -139,6 +110,17 @@ could be a list of friends and if they're active but i can't see that yet
 
   };
 
+  const switchTab = async(e) => {
+    activeTabItem = e.detail;
+    if (activeTabItem === 'All Users') {
+      await fetchAllUsers();
+    } else if (activeTabItem === 'My Friends') {
+      await fetchMyFriends();
+    } else if (activeTabItem === 'Friend Requests') {
+      await fetchRequestsReceived();
+    }
+  };
+
 
 </script>
 
@@ -146,59 +128,60 @@ could be a list of friends and if they're active but i can't see that yet
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="top-grid">
 
-  <div class="all-users-sidebar">
-    <!-- <Tabs items={items} {activeItem} on:tabChange={tabChange}/> -->
-    <h3>All Users</h3>
-    {#if allUsers === undefined}
-      <div class="error">Failed to load all users</div>
-    {:else}
+  <!-- let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
+  let activeTabItem: string = 'All Users'; -->
+
+
+  <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 -->
 
       <!-- does this work? -->
       <!-- {#each allUsers as aUser (aUser.username)} -->
-      {#each allUsers as aUser }
-        <!-- <div class="a-user" on:click={() => displayAUser(aUser.username)}>{aUser.username}</div> -->
-        <div class="a-user" on:click={() => viewAUser(aUser)}>{aUser.username}</div>
+      {#each allUsers as aUser}
+        <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 a-user">{aUser.status}</div>
+        <div class="status sidebar-item">{aUser.status}</div>
         <br>
       {/each}
-      <Button on:click={displayAllUsers}>Get All Users</Button>
-    {/if}
-
-    <br>
-    <h3>Requests Made</h3>
-    {#if requestsMade === undefined}
-      <div class="error">Failed to load all requests made</div>
-    {:else}
-      {#each requestsMade as request }
-        <div>{request.receiverUsername}</div>
-        <br>
+    {:else if activeTabItem === 'My Friends' && myFriends !== undefined}
+      <h3>{activeTabItem}</h3>
+      {#each myFriends as aUser}
+        <div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
+        <div class="status sidebar-item">{aUser.status}</div>
+      {/each}
+    {:else if activeTabItem === 'Friend Requests' && requestsRecieved !== undefined}
+      <h3>{activeTabItem}</h3>
+      {#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 -->
       {/each}
-      <Button on:click={displayRequestsMade}>Display Requests Made</Button>
     {/if}
-
   </div>
 
 
   <div class="main-display">
-
-    <h1>Main Display</h1>
-
     <!-- use an #await here too? -->
     <!-- you can do better, like an on load sort of thing -->
     <!-- {#if userBeingViewed !== undefined && userBeingViewed === tmpUserBeingViewed} -->
     <!-- {#if userBeingViewed} -->
-    {#if userBeingViewed !== undefined}
-    <div>{userBeingViewed.username}</div>
-      <DisplayAUser aUsername={userBeingViewed.username}/>
-      <!-- <DisplayAUser aUsername={sendUsername}/> -->
+    {#if usernameBeingViewed !== undefined}
+      <DisplayAUser aUsername={usernameBeingViewed}/>
+
+      <div class="buttons-area">
+        <!-- Add Friend -->
+        <!-- not the current user, not blocked, not request already sent or received, basically no friendshipID -->
+        {#if usernameBeingViewed !== user.username}
+          <Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button>
+        {/if}
 
-      <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?
@@ -206,6 +189,12 @@ could be a list of friends and if they're active but i can't see that yet
         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">
+        <h1>Click on a user!</h1>
+        <h4>You'll see them displayed here</h4>
+      </div>
     {/if}
 
     <!-- {#await userBeingViewed}
@@ -228,41 +217,6 @@ could be a list of friends and if they're active but i can't see that yet
     <!-- {:else if userBeingViewed !== undefined} -->
 
 
-
-    <!-- <Button on:click={displayAllUsers}>Get All Users</Button>
-    {#if allUsers !== undefined}
-      {#each allUsers as user}
-        <div>{user.username}</div>
-      {/each}
-    {/if}
-
-    <br> -->
-
-    <!-- <Button on:click={displayMyFriends}>Get All My Friends</Button>
-    {#if myFriends !== undefined}
-      <div>{myFriends}</div>
-      {#each myFriends as friend}
-        <div>{friend}{friend.username}</div>
-      {/each}
-    {/if} -->
-
-
-    <!-- <br> <br> -->
-    <!-- here i want to list all the requests you and have an accept and a decline button -->
-
-    <!-- {#each requestsRecieved as request} -->
-
-    <!-- <br> <br> -->
-    <!-- I want to list all the requests made by this user -->
-
-    <!-- <Button on:click={displayRequestsMade}>Display Requests Made</Button>
-
-    {#if requestsMade !== undefined}
-      {#each requestsMade as requestMade}
-        <div>{requestMade}</div>
-      {/each}
-    {/if} -->
-
   </div>
 </div>
 
@@ -278,12 +232,12 @@ could be a list of friends and if they're active but i can't see that yet
     /* margin: 0; */
   }
 
-  div.all-users-sidebar{
+  div.sidebar-list{
     grid-column: 1 / span 2;
     background: white;
   }
 
-  div.a-user{
+  div.sidebar-item{
     /* yea i mean that seems fine... */
     display: inline-block;
     /* somehting about the buttons too, smaller ? */
@@ -294,7 +248,7 @@ could be a list of friends and if they're active but i can't see that yet
   }
   /* selector attributes to get only divs with .a-user */
   /* you gotta be careful with Svelte cuz it tacks classes on to the end of basically all elems! */
-  div[class^="a-user"]:hover{
+  div[class^="sidebar-item"]:hover{
     text-decoration: underline;
     font-weight: bold;
     cursor: pointer;
@@ -304,6 +258,14 @@ could be a list of friends and if they're active but i can't see that yet
     grid-column: 3 / span 10;
   }
 
+  div.placeholder{
+    color: darkgray;
+    text-align: center;
+  }
+
+  div.buttons-area{
+    text-align: center;
+  }
 
   .error{
     font-size: 0.8em;
diff --git a/srcs/requirements/svelte/api_front/src/pieces/Tabs.svelte b/srcs/requirements/svelte/api_front/src/pieces/Tabs.svelte
index 5d33f123..a91f903e 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/Tabs.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/Tabs.svelte
@@ -2,17 +2,19 @@
   import { createEventDispatcher } from "svelte";
   export let items;
   export let activeItem;
+  export let size = 'medium';
+  // big, medium, small
 
   const dispatch = createEventDispatcher();
 
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="tabs">
+<div class="tabs" class:size={size}>
   <!-- creates a list, can be done other ways -->
   <ul>
     {#each items as item}
-      <li on:click={() => dispatch('tabChange', item)}>
+      <li class={size} on:click={() => dispatch('tabChange', item)}>
         <!-- the class active is attributed if the condition is met -->
         <div class:active={activeItem === item}>{item}</div>
       </li>
@@ -21,8 +23,20 @@
 </div>
 
 <style>
-  .tabs{
+  /* .tabs{
     margin-bottom: 40px;
+  } */
+  .tab.big{
+    margin-bottom: 50px;
+    /* guessing at size */
+  }
+  .tab.medium{
+    margin-bottom: 40px;
+    /* the OG size */
+  }
+  .tab.small{
+    margin-bottom: 10px;
+    /* need it small */
   }
   ul{
     display: flex;
@@ -31,11 +45,28 @@
     list-style-type: none;
   }
   li{
-    margin: 0 16px;
-    font-size: 18px;
+    /* margin: 0 16px; */
+    /* font-size: 18px; */
     color: #555;
     cursor: pointer;
   }
+  li.big{
+    margin: 0 20px;
+    font-size: 22px;
+    /* guessing at size */
+  }
+  li.medium{
+    margin: 0 16px;
+    font-size: 18px;
+    /* the OG size */
+  }
+  li.small{
+    margin: 8px;
+    font-size: 10px;
+    /* need it small */
+  }
+
+
   .active{
     color: #d91b42;
     border-bottom: 2px solid #d91b42;