From 63176751f3ccfeafb63f498dae5783b4abaef7a2 Mon Sep 17 00:00:00 2001
From: WalidMoovin <walidsdt.2@gmail.com>
Date: Fri, 3 Mar 2023 22:25:47 +0100
Subject: [PATCH] x

---
 front/volume/src/components/Chat2.svelte   |  2 +-
 front/volume/src/components/NavBar.svelte  |  1 -
 front/volume/src/components/Profile.svelte | 26 ++++++++++++++++++----
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/front/volume/src/components/Chat2.svelte b/front/volume/src/components/Chat2.svelte
index 0a35519..974d97b 100644
--- a/front/volume/src/components/Chat2.svelte
+++ b/front/volume/src/components/Chat2.svelte
@@ -15,7 +15,7 @@
         name: "You",
         text: newText,
       };
-      chatMessages = [...chatMessages.slice(-5 + 1), newMessage];
+      chatMessages = [...chatMessages.slice(-7 + 1), newMessage];
       newText = "";
     }
     // TODO: save to database
diff --git a/front/volume/src/components/NavBar.svelte b/front/volume/src/components/NavBar.svelte
index 095b760..3fc53f9 100644
--- a/front/volume/src/components/NavBar.svelte
+++ b/front/volume/src/components/NavBar.svelte
@@ -11,7 +11,6 @@
   export let clickHistory = () => {};
   export let clickFriends = () => {};
   export let clickSpectate = () => {};
-  export let clickChat = () => {};
   export let clickChannels = () => {};
 </script>
 
diff --git a/front/volume/src/components/Profile.svelte b/front/volume/src/components/Profile.svelte
index f35c445..3e015de 100644
--- a/front/volume/src/components/Profile.svelte
+++ b/front/volume/src/components/Profile.svelte
@@ -27,7 +27,23 @@
   }
   async function handleAvatarUpload(event: Event) {
     event.preventDefault();
-    alert("Trying to upload avatar");
+    const fileInput = document.getElementById('avatar-input') as HTMLInputElement;
+    const file = fileInput.files[0];
+
+    const formData = new FormData();
+    formData.append('avatar', file);
+
+    try {
+      const response = await fetch('http://localhost:3001/avatar', {
+        method: 'POST',
+        body: formData
+      });
+
+      const data = await response.json();
+      console.log(data);
+    } catch (error) {
+      console.error(error);
+    }
   }
   async function handle2fa(event: Event) {
     event.preventDefault();
@@ -40,8 +56,10 @@
     <div class="profile-header">
       <img class="profile-img" src="img/profileicon.png" alt="Profile Icon" />
       <h3>{realname}</h3>
-      <form on:submit={handleAvatarUpload}>
-        <button type="submit">Upload Avatar</button>
+      <form>
+        <label for="avatar-input">Choose avatar:</label>
+        <input type="file" id="avatar-input" accept="image/*">
+        <button type="submit" id="upload-button" on:click={handleAvatarUpload}>Upload</button>
       </form>
     </div>
     <div class="profile-body">
@@ -89,7 +107,7 @@
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 1rem;
-    width: 300px;
+    width: 375px;
   }
 
   .profile-header {