From 11f54bde83de90839cf75cabbce1745adcd0f90d Mon Sep 17 00:00:00 2001
From: Me <me@Philip.local>
Date: Tue, 17 Jan 2023 19:17:45 +0100
Subject: [PATCH] fixed another small bug in ProfileUsers, improved avatar
 fetch error messages display, and found a new way and prolly better way to
 reactively load fetch things when a variable changes, await rather than
 onMount + a unpdate function

---
 .../src/pages/profile/ProfileUsers.svelte     | 74 +++++++------------
 .../src/pieces/GenerateUserDisplay.svelte     | 34 ++++-----
 .../svelte/api_front/src/pieces/utils.ts      |  1 +
 3 files changed, 42 insertions(+), 67 deletions(-)

diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
index bbb5b9af..c0f1f395 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
@@ -15,7 +15,6 @@
 	let blockedUsers = [];
 	let usernameBeingViewed;
 	let friendshipStatusFull; // date, reveiverUsername, status
-	// let errors = {avatar: ''};
 
 	/**** Layout variables ****/
 	let tabItems: string[] = [
@@ -321,12 +320,8 @@
 
 
 <!-- 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'; -->
-
   <div class="sidebar-list background-pages">
     <Tabs items={tabItems} activeItem={activeTabItem} size="default" on:tabChange={switchTab}/>
     {#if activeTabItem === 'All Users' && allUsers}
@@ -338,7 +333,7 @@
 					{#await fetchAvatar(aUser.username) then avatar}
 						<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
 					{:catch error}
-						<p>Avatar was unable to load</p>
+						<p class="error">Avatar was unable to load</p>
 					{/await}
 					<div class="sidebar-item">{aUser.username}</div>
 					<div class="status sidebar-item">{aUser.status}</div>
@@ -350,23 +345,25 @@
         <div class="tip">You don't have any Friends... Yet!</div>
       {/if}
       {#each myFriendships as aFriendship}
-				<div class="user" on:click={() => viewAUser(aFriendship.receiverUsername)}>
 					{#if aFriendship.senderUsername !== user.username}
-						{#await fetchAvatar(aFriendship.senderUsername) then avatar}
-							<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
-						{:catch error}
-							<p>Avatar was unable to load</p>
-						{/await}
-						<div class="sidebar-item" on:click={() => viewAUser(aFriendship.senderUsername)}>{aFriendship.senderUsername}</div>
+						<div class="user" on:click={() => viewAUser(aFriendship.senderUsername)}>
+							{#await fetchAvatar(aFriendship.senderUsername) then avatar}
+								<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
+							{:catch error}
+								<p class="error">Avatar was unable to load</p>
+							{/await}
+							<div class="sidebar-item">{aFriendship.senderUsername}</div>
+						</div>
 					{:else if aFriendship.receiverUsername !== user.username}
-						{#await fetchAvatar(aFriendship.receiverUsername) then avatar}
-							<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
-						{:catch error}
-							<p>Avatar was unable to load</p>
-						{/await}
-						<div class="sidebar-item">{aFriendship.receiverUsername}</div>
+						<div class="user" on:click={() => viewAUser(aFriendship.receiverUsername)}>
+							{#await fetchAvatar(aFriendship.receiverUsername) then avatar}
+								<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
+							{:catch error}
+								<p class="error">Avatar was unable to load</p>
+							{/await}
+							<div class="sidebar-item">{aFriendship.receiverUsername}</div>
+						</div>
 					{/if}
-				</div>
         <br>
       {/each}
     {:else if activeTabItem === 'Friend Requests' && requestsRecieved}
@@ -378,7 +375,7 @@
 					{#await fetchAvatar(aUser.senderUsername) then avatar}
 						<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
 					{:catch error}
-						<p>Avatar was unable to load</p>
+						<p class="error">Avatar was unable to load</p>
 					{/await}
 					<div class="sidebar-item">{aUser.senderUsername}</div>
 					<div class="status sidebar-item">{aUser.status}</div>
@@ -394,11 +391,11 @@
 					{#await fetchAvatar(aUser.receiverUsername) then avatar}
 						<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
 					{:catch error}
-						<p>Avatar was unable to load</p>
+						<p class="error">Avatar was unable to load</p>
 					{/await}
 					<div class="sidebar-item">{aUser.receiverUsername}</div>
 					<div class="status sidebar-item">{aUser.status}</div>
-					</div>
+				</div>
         <br>
       {/each}
     {/if}
@@ -452,21 +449,7 @@
 
 <style>
 
-/* ok so i want a 12 column grid with a sidebar */
-
-  div.top-grid{
-    /* display: grid; */
-    /* grid-template-columns: repeat(8, 1fr); */
-    /* max-height: calc(100vh - 30vh); */
-    height: 85vh;
-		/* display: block; */
-		position: relative;
-    /* margin: 0; */
-  }
-
 	div.sidebar-list{
-    /* grid-column: 1 / span 2; */
-    /* grid-column: 3 / span 4; */
     background: #FB8B24;
     padding: 1vw;
     font-size: smaller;
@@ -482,16 +465,15 @@
   }
 
   div.sidebar-item{
-    /* yea i mean that seems fine... */
     display: inline-block;
 		text-align: center;
-		
-    /* somehting about the buttons too, smaller ? */
   }
+
   div.status{
     font-size: 0.6em;
     font-weight: bold;
   }
+
   /* 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^="sidebar-item"]:hover{
@@ -530,8 +512,6 @@
 		padding: 8px;
 		border: 2px solid white;
 		border-radius: 7px;
-		/* background-color: #ff3e00; */
-		/* color: #fff; */
 		text-align: center;
 		font-weight: bold;
 	}
@@ -551,15 +531,17 @@
 	}
 
 	div.user {
-		/* left: 50%;
-		display: inline-block;
-		-ms-transform: translateX(-50%); 
-		transform: translateY(-50%); */
+		cursor: pointer;
 	}
 
 	div.tile {
 		margin: 5px;
 	}
 
+	.error{
+    font-size: 0.5em;
+    font-weight: bold;
+    color: rgb(152, 20, 20);
+  }
 	
 </style>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
index ca1aa0c4..058a4f70 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
@@ -1,28 +1,10 @@
 <script lang="ts">
-
-  import { onMount } from 'svelte';
-
   import { fetchAvatar } from "./utils.js";
 
   export let user;
   let rank = '';
   let avatar;
 
-  // console.log('Generate User Display user:')
-  // console.log({...user})
-  // console.log(user)
-  let errors = {avatar: ''};
-
-	onMount( async() => {
-		avatar = await fetchAvatar(user.username);
-	})
-
-  const updateAvatar = async() => {
-    avatar = await fetchAvatar(user.username);
-  };
-
-	$: user, updateAvatar();
-
   if (user.stats.loseGame > user.stats.winGame) {
     rank = "Come on, you can do better"
   } else if (user.stats.loseGame === user.stats.winGame) {
@@ -31,7 +13,6 @@
     rank = 'You da Boss!'
   }
 
-
   // Glittery Stars and such for Rank
 
   let index = 0, interval = 1000;
@@ -66,8 +47,13 @@
 <div class="outer">
   {#if user}
   <main>
-    <img class="avatar" src="{avatar}" alt="user avatar">
-    <div class="error">{errors.avatar}</div>
+    <!-- <img class="avatar" src="{avatar}" alt="user avatar"> -->
+    {#await fetchAvatar(user.username) then avatar}
+      <img class="avatar" src="{avatar}" alt="user avatar">
+    {:catch error}
+      <p class="errorA">Avatar was unable to load</p>
+    {/await}
+    <!-- <div class="error">{errors.avatar}</div> -->
     <div class="username">{user.username}</div>
     <div class="rank">Rank:
       <span class="glitter">
@@ -159,6 +145,12 @@
     color: red;
   }
 
+  .errorA{
+    font-size: 0.5em;
+    font-weight: bold;
+    color: rgb(152, 20, 20);
+  }
+
   .highlight {
     font-weight: bold;
   }
diff --git a/srcs/requirements/svelte/api_front/src/pieces/utils.ts b/srcs/requirements/svelte/api_front/src/pieces/utils.ts
index 91295b28..225b8dd1 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/utils.ts
+++ b/srcs/requirements/svelte/api_front/src/pieces/utils.ts
@@ -6,6 +6,7 @@ export async function fetchAvatar(username?: string)
 		url += `?username=${username}`;
 	}
 
+	// throw new Error("HTTP ")
 	return fetch(url)
 		.then((response) => {
 			if (!response.ok) {