added chat members fetch

back/volume/src/chat/chat.controller.ts

@@ -84,8 +84,10 @@ export class ChatController {
   }
 
   @Get(':id/users')
-  async getUsersOfChannel (@Param('id') id: number): Promise<User[]> {
-    return (await this.channelService.getChannel(id)).users
+  async getUsersOfChannel (@Param('id', ParseIntPipe) id: number): Promise<User[]> {
+    let users = (await this.channelService.getFullChannel(id)).users
+    users.forEach((u) => u.socketKey = '')
+    return users;
   }
 
   @Post(':id/admin')
@@ -252,7 +254,6 @@ export class ChatController {
     await this.channelService.save(channel)
   }
 
-
   @Post()
   async createChannel (@Body() channel: CreateChannelDto): Promise<Channel> {
     return await this.channelService.createChannel(channel)

back/volume/src/chat/chat.gateway.ts

@@ -89,7 +89,6 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
     const createdMessage: Message = await this.messageService.createMessage(
       message
     )
-    console.log(createdMessage)
     this.server.to(channel.id.toString()).emit('newMessage', createdMessage)
   }
 

back/volume/src/chat/chat.service.ts

@@ -129,12 +129,14 @@ export class ChatService {
     return channel
   }
 
+  // Warning: those channels users contains socketKey.
+  // they have to be hidden before returned from a route 
+  // but not save them without the key.
   async getFullChannel (id: number): Promise<Channel> {
     const channel = await this.ChannelRepository.findOne({
       where: { id },
       relations: ['users', 'admins', 'banned', 'owner']
     })
-
     if (channel == null) {
       throw new BadRequestException(`Channel #${id} not found`)
     }

front/volume/src/components/Chat.svelte

@@ -12,6 +12,7 @@
 </script>
 
 <script lang="ts">
+  let usersInterval: ReturnType<typeof setInterval>;
   let blockedUsers: Array<User> = [];
   let chatMembers: Array<User> = [];
   let chatMessages: Array<chatMessagesType> = [];
@@ -22,12 +23,29 @@
       credentials: "include",
       mode: "cors",
     });
-    if (res.ok) blockedUsers = await res.json();
+    if (res.ok) {
+      blockedUsers = await res.json();
+      usersInterval = setInterval(async () => {
+        getMembers();
+      }, 1000);
+    }
   });
   socket.on("messages", (msgs: Array<chatMessagesType>) => {
     chatMessages = msgs;
   });
 
+  async function getMembers() {
+    if (!channel) return;
+    const res = await fetch(`${API_URL}/channels/${channel.id}/users`, {
+      credentials: "include",
+      mode: "cors"
+    })
+    if (res.ok) {
+      chatMembers = await res.json();
+    } else alert(res.text())
+    
+  }
+
   socket.on("newMessage", (msg: chatMessagesType) => {
     console.log(msg)
     chatMessages = [...chatMessages, msg];
@@ -37,6 +55,7 @@
     socket.emit("LeaveChanel", async (response) => {
       console.log(response.status);
     });
+    clearInterval(usersInterval)
     socket.disconnect();
   });
 
@@ -281,9 +300,7 @@
     }
   }
 
-  //--------------------------------------------------------------------------------/
 </script>
-
 <div class="overlay">
   <div class="chat" on:click|stopPropagation on:keydown|stopPropagation>
     <div class="messages">
@@ -371,12 +388,8 @@
               <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>
+              <button on:click={() => adminUser(member.username)}> promote </button>
+              <button on:click={() => removeAdminUser(member.username)}> demote </button>
             </p>
           </li>
         {/each}

front/volume/src/components/Friends.svelte

@@ -92,7 +92,7 @@
       <div class="friends-controls">
         <h3>Add a friend</h3>
         <form on:submit={addFriend}>
-          <input type="text" />
+          <input type="text" required/>
           <button type="submit">Add</button>
         </form>
       </div>

front/volume/src/components/MatchHistory.svelte

@@ -35,6 +35,7 @@
         });
       }
     }
+    if (response.ok) {
       let tmp = await response.json();
       newBatch = tmp.data.map((match: Match) => {
         return {
@@ -50,6 +51,7 @@
       });
       page++;
     }
+  }
 
   onMount(() => {
     fetchData();

front/volume/src/components/Profile.svelte

@@ -111,7 +111,7 @@
         class="username"
         on:submit|preventDefault={handleSubmit}
       >
-        <input type="text" id="username" bind:value={user.username} />
+        <input type="text" id="username" bind:value={user.username} required/>
         <button type="submit" class="username" form="username-form"
           >Change</button
         >