idk anymore

src/lib/components/Message.svelte

@@ -6,9 +6,6 @@
   export let messageContent: string;
   export let profilePicture: string | null; // Peut être null
   export let createdAt: string; // Date de création du message
-
-  // Image par défaut si profilePicture est null
-  let defaultProfilePicture = "/images/default-profile.png";
 </script>
 
 <Card.Root class="relative">
@@ -16,7 +13,7 @@
     <!-- Image de profil collée à gauche -->
     <div class="flex flex-row gap-3 items-center">
       <img
-        src={profilePicture || defaultProfilePicture}
+        src={`http://localhost:5173/${profilePicture}`}
         alt="Profile Picture"
         class="h-10 w-10 rounded-full border border-gray-300"
       />

src/lib/components/ui/ProfileCard.svelte

@@ -1,16 +1,12 @@
 <script>
 	import Button  from '$lib/components/ui/button/button.svelte';
 
-	export let user = {
-		pseudo: '',
-		prenom: '',
-		nom: '',
-		description: '',
-		profilePictureUrl: '',  // Ajouter l'URL de l'image de profil
-	}; // Infos utilisateur
+	export let user;
 	export let show = false; // Contrôle si la carte est visible
 	export let onClose = () => {}; // Fonction pour fermer la carte
 
+	console.log(user)
+
 	const disconnect = async () => {
 		try {
 			// Envoyer une requête POST à l'endpoint /disconnect
@@ -34,11 +30,10 @@
 		<div class="profile-card" on:click|stopPropagation>
 			<div class="profile-header">
 				<!-- Image de profil -->
-				<img src={user.profilePictureUrl} alt="Profile" class="profile-image" />
-				<h2 id="profile-card-title" class="profile-name">{user.pseudo}</h2>
+				<img src={user.profilePicture} alt="Profile" class="profile-image" />
+				<h2 id="profile-card-title" class="profile-name">{user.username}</h2>
 			</div>
-			<p>{user.prenom} {user.nom}</p>
-			<p>{user.description}</p>
+			<p>{user.name} {user.surname}</p>
 			<Button on:click={disconnect}>Deconnecter</Button>
 		</div>
 	</div>

src/routes/+layout.server.ts

@@ -1,8 +1,5 @@
 import { redirect } from '@sveltejs/kit';
-import { initSocket } from "$lib/stores/socket";
-
-
-export async function load({ locals, url }) {
+export async function load({ locals, url, fetch }) {
 
 	const token = locals.token;
 
@@ -10,5 +7,14 @@ export async function load({ locals, url }) {
 		redirect(301, "/");
 	}
 
-	return { token }
+	const res = await fetch(`/api/users/${locals.userId}`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json'
+		}
+	});
+	const user = await res.json();
+
+
+	return { token, user }
 }

src/routes/+page.server.ts

@@ -60,6 +60,13 @@ export const actions: Actions = {
 				maxAge: (60 * 60) * 30,
 			});
 
+			cookies.set('UID', data.userId, {
+				path: '/',
+				httpOnly: true,
+				sameSite: 'strict',
+				maxAge: (60 * 60) * 30,
+			});
+
 			logger.debug("Successfully created a cookie for the user and proceeded with the register.")
 
 			return redirect(302, "/chats");

src/routes/api/channels/[id]/messages/+server.ts

@@ -17,7 +17,7 @@ export async function GET({ params, url }) {
 	try {
 		// Essayer de récupérer les messages du cache Redis
 		logger.debug(`Tentative de récupération des messages du cache pour le channel : ${channelId}`);
-		let redisMessages = await redisClient.zRange(`channel:${channelId}:messages`, start, stop, { REV: true });
+		let redisMessages = await redisClient.zRange(`channel:${channelId}:messages`, start, stop);
 
 		if (redisMessages && redisMessages.length > 0) {
 			logger.debug(`Messages trouvés dans le cache pour le channel : ${channelId}`);

src/routes/chats/+page.svelte

@@ -5,18 +5,10 @@
 	import ChatItem from "$lib/components/ui/ChatItem.svelte";
 	import ProfileCard from "$lib/components/ui/ProfileCard.svelte"; // Importer le composant ProfileCard
 	import CreateChat from "$lib/components/ui/CreateChat.svelte"; // Importer le composant CreateChat
-	import { formatDistanceToNow } from "$lib/utils/date.js";
 	import { initSocket } from "$lib/stores/socket";
 
 	let showProfileCard = false;  // État pour afficher ou masquer le ProfileCard
 	let showCreateChat = false;  // État pour afficher ou masquer CreateChat
-	let user = {
-		pseudo: 'JohnDoe',
-		prenom: 'John',
-		nom: 'Doe',
-		description: 'Développeur passionné',
-		profilePictureUrl: 'path/to/profile-picture.jpg',  // URL de l'image de profil
-	};
 
 	let socket = initSocket(); // Initialiser le socket
 
@@ -68,7 +60,7 @@
 			class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white"
 			on:click={openProfileCard}
 		>
-			<img src={user.profilePictureUrl} alt="Profile" class="h-8 w-8 rounded-full" />
+			<img src={data.user.profilePicture} alt="Profile" class="h-8 w-8 rounded-full" />
 			Profile
 		</Button>
 
@@ -102,7 +94,7 @@
 
 </div>
 <CreateChat show={showCreateChat} socket={socket} onClose={closeCreateChat} />
-<ProfileCard {user} show={showProfileCard} onClose={closeProfileCard} />
+<ProfileCard user={data.user} show={showProfileCard} onClose={closeProfileCard} />
 
 <style>
     .h-full {

src/routes/chats/[id]/+page.svelte

@@ -4,9 +4,7 @@
     import PaperPlane from "svelte-radix/PaperPlane.svelte";
     import Message from "$lib/components/Message.svelte";
     import UserChat from '$lib/components/ui/UserChat.svelte';
-    import { tick } from 'svelte';
-
-    import { formatDistanceToNow } from '$lib/utils/date.ts';
+    import { onMount, tick } from 'svelte';
 
     export let data;
     export let messages = data.messages.messages;
@@ -54,6 +52,7 @@
 
             if (response.ok) {
                 const newMessages = await response.json();
+                console.log(newMessages);
                 if(newMessages.messages.length <= 0){
                     console.log('Pas d\'autres anciens messages');
                     return;
@@ -82,6 +81,12 @@
         }
     }
 
+    onMount(() => scrollToBottom(scrollContainer))
+
+    const scrollToBottom = async (node: any) => {
+        node.scroll({ top: node.scrollHeight, behavior: 'smooth' });
+    };
+
 </script>
 
 <div class="h-full flex">
@@ -111,9 +116,9 @@
                 <div class="loading-indicator">Chargement...</div>
             {/if}
             <!-- Afficher les messages (mock d'un utilisateur sélectionné ou aucun message par défaut) -->
-            {#if messages.length > 0}
+            {#if messages !== undefined && messages.length > 0}
                 {#each messages as message}
-                    <Message username={message.user.username} messageContent={message.text} createdAt={message.createdAt} />
+                    <Message profilePicture={message.user.profilePicture} username={message.user.username} messageContent={message.text} createdAt={message.createdAt} />
                 {/each}
             {:else}
                 <div class="text-center text-gray-500 mt-10">Sélectionnez un message le chat est vide.</div>