From 5e111fbc7a6b275436d6a0c22b6734e9288e5190 Mon Sep 17 00:00:00 2001
From: WalidMoovin <walidsdt.2@gmail.com>
Date: Thu, 16 Mar 2023 02:36:35 +0100
Subject: [PATCH] Front reformat / error fixing / passing channel prop to chat
 component

---
 front/volume/src/App.svelte                 |   1 +
 front/volume/src/components/Channels.svelte |  86 ++++----
 front/volume/src/components/Chat.svelte     | 209 ++++++++------------
 front/volume/src/components/NavBar.svelte   |   8 +-
 4 files changed, 125 insertions(+), 179 deletions(-)

diff --git a/front/volume/src/App.svelte b/front/volume/src/App.svelte
index 00a65cf..42ddeff 100644
--- a/front/volume/src/App.svelte
+++ b/front/volume/src/App.svelte
@@ -136,6 +136,7 @@
           on:keydown={() => setAppState(APPSTATE.CHANNELS)}
         >
           <Chat
+            channel={selectedChannel}
             on:view-profile={openIdProfile}
             on:add-friend={addFriend}
             on:invite-to-game={pong.inviteToGame}
diff --git a/front/volume/src/components/Channels.svelte b/front/volume/src/components/Channels.svelte
index 3f6c4ee..b7aa73d 100644
--- a/front/volume/src/components/Channels.svelte
+++ b/front/volume/src/components/Channels.svelte
@@ -1,5 +1,4 @@
 <script lang="ts" context="module">
-
   export interface ChannelsType {
     id: number;
     name: string;
@@ -10,8 +9,6 @@
   import { onMount } from "svelte";
   import { API_URL, store } from "../Auth";
   import { io } from "../socket";
-  import Select from 'svelte-select';
-  
 </script>
 
 <script lang="ts">
@@ -167,15 +164,13 @@
           </li>{/each}
       {:else}
         <p>No channels available</p>
-        {/if}
+      {/if}
       <div>
         <select bind:value={channelMode} >
           {#each channelOptions as option}
-                  <option value={option} selected={channelMode === option}>
-                          {option}
-                  </option>
+                  <option value={option} selected={channelMode === option}>{option}</option>
           {/each}
-      </select>
+        </select>
         {#if channelMode!= ''}
           <button class="button" on:click={createChannel}>Create Channel</button>
         {/if}
@@ -205,42 +200,43 @@
   }
   
   select {
-        width: 100%;
-        height: 15%;
-        padding: 5px;
-        border-radius: 4px;
-        background: #eee;
-        border: none;
-        outline: grey;
-        display: inline-block;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        cursor: pointer;
-      }
+    width: 100%;
+    height: 15%;
+    padding: 5px;
+    border-radius: 4px;
+    background: #eee;
+    border: none;
+    outline: grey;
+    display: inline-block;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+  }
 
-    .button {
-      color: white;
-      margin:0 auto; 
-      margin: auto;
-      width: 45%;
-      height: 15%;
-      padding: 5px;
-      border-radius: 4px;
-      background: #6B8E23;
-      border: none;
-      outline: grey;
-      display:block;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      cursor: pointer;
-    }
-    span { 
-      color: rgb(0, 0, 0); 
-      font-size: 150%; /* Taille de la police en pourcentage */ 
-      position: relative; /* Positionnement relatif */ 
-      padding: 10px;
-      top: 2px;
-}
+  .button {
+    color: white;
+    margin:0 auto; 
+    margin: auto;
+    width: 45%;
+    height: 15%;
+    padding: 5px;
+    border-radius: 4px;
+    background: #6B8E23;
+    border: none;
+    outline: grey;
+    display:block;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+  }
+
+  span { 
+    color: rgb(0, 0, 0); 
+    font-size: 150%;
+    position: relative;
+    padding: 10px;
+    top: 2px;
+  }
 </style>
diff --git a/front/volume/src/components/Chat.svelte b/front/volume/src/components/Chat.svelte
index fef867c..b0ce12f 100644
--- a/front/volume/src/components/Chat.svelte
+++ b/front/volume/src/components/Chat.svelte
@@ -94,7 +94,6 @@ import type User  from "./Profile.svelte";
       method: "POST",
       mode: "cors",
     });
-    const data2 = await res2.json();
     if (res2.ok) {
       alert("User blocked");
     } else {
@@ -115,7 +114,6 @@ import type User  from "./Profile.svelte";
       method: "DELETE",
       mode: "cors",
     });
-    const data2 = await res2.json();
     if (res2.ok) {
       alert("User unblocked");
     } else {
@@ -137,7 +135,6 @@ import type User  from "./Profile.svelte";
       method: "POST",
       mode: "cors",
     });
-    const data2 = await res2.json();
     if (res2.ok) {
       io.emit("kickUser", channel.id, $store.ftId, data1.ftId);
       alert("User banned");
@@ -171,7 +168,6 @@ import type User  from "./Profile.svelte";
       method: "POST",
       mode: "cors",
     });
-    const data2 = await res2.json();
     if (res2.ok) {
       alert("User muted");
     } else {
@@ -192,7 +188,6 @@ import type User  from "./Profile.svelte";
       method: "POST",
       mode: "cors",
     });
-    const data2 = await res2.json();
     if (res2.ok) {
       alert("User admined");
     } else {
@@ -213,7 +208,6 @@ import type User  from "./Profile.svelte";
       method: "DELETE",
       mode: "cors",
     });
-    const data2 = await res2.json();
     if (res2.ok) {
       alert("User admin removed");
     } else {
@@ -224,119 +218,86 @@ import type User  from "./Profile.svelte";
   //--------------------------------------------------------------------------------/
 </script>
 
-	<div class="overlay" >
-		<div class="chat" on:click|stopPropagation on:keydown|stopPropagation>
-			<div class="messages" >
-				{ #each chatMessages as message }
-				<p class="message" >
-					{ #if !blockedUsers.filter((user) => user.username == message.author).length }
-					<span
-						class="message-name"
-						on:click = {() => openProfile(message.author)}
-						on:keydown = {() => openProfile(message.author)}
-						style = "cursor: pointer;"
-							>
-					{ message.author }
-	</span>: {message.text}
-{
-	/if}
-		</p>
-	{
-		/each}
-			</div>
-		{ #if showProfileMenu }
-		<div
-        class="profile-menu"
-		on:click|stopPropagation
-		on:keydown|stopPropagation
-			>
-			<ul>
-			<li>
-			<button on:click = {() => dispatch("send-message", selectedUser)
-	}
-              > Send Message </button
-		>
-		</li>
-		<li>
-		<button on:click = {() => dispatch("view-profile", selectedUser)
-}
-              > View Profile </button
-	>
-	</li>
-	<li>
-	<button on:click = {() => dispatch("add-friend", selectedUser)}
-              > Add Friend </button
-	>
-	</li>
-	<li>
-	<button on:click = {() => dispatch("invite-to-game", selectedUser)}
-              > Invite to Game </button
-	>
-	</li>
-	<li>
-{ #if !blockedUsers.filter((user) => user.username = selectedUser).length }
-<button on:click = {() => blockUser(selectedUser)}> Block User </button>
-{:else }
-<button on:click = {() => unblockUser(selectedUser)}> Unblock User </button>
-{
-	/if}
-		</li>
-		<li> <button on:click = { closeProfileMenu } > Close </button></li >
-			</ul>
-			</div>
-	{
-		/if}
-			<form on:submit|preventDefault={ sendMessage }>
-				<input type="text" placeholder = "Type a message..." bind:value={ newText } />
-					<button>
-					<img src="img/send.png" alt = "send" />
-						</button>
-						</form>
-						<button
-		on:click|stopPropagation={ toggleChatMembers }
-		on:keydown|stopPropagation > Chat Members </button
-			>
-			{ #if showChatMembers }
-			<div
-		class="chatMembers"
-		on:click|stopPropagation
-		on:keydown|stopPropagation
-			>
-			<div>
-			<ul>
-			{ #each chatMembers as member }
-			<li>
-			<p>
-			{ member.username }
-			<button on:click = {() => banUser(member.username)
-	}> ban </button>
-		<button on:click = {() => kickUser(member.username)
-}
-                    > kick </button
-	>
-	<button on:click = {() => muteUser(member.username)}
-                    > mute </button
-	>
-	<button on:click = {() => adminUser(member.username)}
-                    > promote </button
-	>
-	<button on:click = {() => removeAdminUser(member.username)}
-                    > demote </button
-	>
-	</p>
-	<p>
------------------------------------------------------------------------------------
-	</p>
-	</li>
-{
-	/each}
-		</ul>
-		</div>
-		</div>
-	{
-		/if}
-			</div>
-			</div>
+
+<div class="overlay" >
+  <div class="chat" on:click|stopPropagation on:keydown|stopPropagation>
+    <div class="messages" >
+      { #each chatMessages as message }
+        <p class="message" >
+          { #if !blockedUsers.filter((user) => user.username == message.author).length }
+          <span
+            class="message-name"
+            on:click = {() => openProfile(message.author)}
+            on:keydown = {() => openProfile(message.author)}
+            style = "cursor: pointer;"
+          >
+          { message.author }
+          </span>: {message.text}
+          {/if}
+        </p>
+      {/each}
+    </div>
+    { #if showProfileMenu }
+    <div
+      class="profile-menu"
+      on:click|stopPropagation
+      on:keydown|stopPropagation
+    >
+    <ul>
+      <li>
+        <button on:click = {() => dispatch("send-message", selectedUser)}> Send Message </button>
+      </li>
+      <li>
+        <button on:click = {() => dispatch("view-profile", selectedUser)}> View Profile </button>
+      </li>
+      <li>
+        <button on:click = {() => dispatch("add-friend", selectedUser)}> Add Friend </button>
+      </li>
+      <li>
+        <button on:click = {() => dispatch("invite-to-game", selectedUser)}> Invite to Game </button>
+      </li>
+      <li>
+        { #if !blockedUsers.filter((user) => user.username = selectedUser).length }
+        <button on:click = {() => blockUser(selectedUser)}> Block User </button>
+        {:else }
+        <button on:click = {() => unblockUser(selectedUser)}> Unblock User </button>
+        {/if}
+      </li>
+      <li> <button on:click = { closeProfileMenu } > Close </button></li >
+    </ul>
+    </div>
+    {/if}
+    <form on:submit|preventDefault={ sendMessage }>
+      <input type="text" placeholder = "Type a message..." bind:value={ newText } />
+        <button>
+        <img src="img/send.png" alt = "send" />
+          </button>
+          </form>
+          <button on:click|stopPropagation={ toggleChatMembers } on:keydown|stopPropagation > Chat Members </button>
+    { #if showChatMembers }
+      <div
+        class="chatMembers"
+        on:click|stopPropagation
+        on:keydown|stopPropagation
+      >
+      </div>
+      <ul>
+        { #each chatMembers as member }
+          <li>
+            <p>
+              { member.username }
+              <button on:click = {() => banUser(member.username)}> ban </button>
+              <button on:click = {() => kickUser(member.username)}> kick </button>
+              <button on:click = {() => muteUser(member.username)}> mute </button>
+              <button on:click = {() => adminUser(member.username)}> promote </button>
+              <button on:click = {() => removeAdminUser(member.username)}> demote </button>
+            </p>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+</div>
 
 <style>
 				.overlay {
@@ -373,14 +334,4 @@ import type User  from "./Profile.svelte";
 			max-height: 100px;
 			overflow-y: scroll;
 		}
-
-  .chatMembers ul {
-			list-style: none;
-			padding: 0;
-			margin: 0;
-		}
-
-  .chatMembers button {
-    width: 6rem;
-  }
 </style>
diff --git a/front/volume/src/components/NavBar.svelte b/front/volume/src/components/NavBar.svelte
index 54c8288..a734317 100644
--- a/front/volume/src/components/NavBar.svelte
+++ b/front/volume/src/components/NavBar.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-  let api =
-    "http://" +
-    import.meta.env.VITE_HOST +
-    ":" +
-    import.meta.env.VITE_BACK_PORT;
+  let api = "http://" + import.meta.env.VITE_HOST + ":" + import.meta.env.VITE_BACK_PORT;
+
   export let links = [
     { text: "Home" },
     { text: "Channels" },
@@ -12,6 +9,7 @@
     { text: "Leaderboard" },
     { text: "Profile" },
   ];
+
   export let clickProfile = () => {};
   export let clickHistory = () => {};
   export let clickFriends = () => {};