From 872573d6c539d2eed189ebd0563fe00287ac1f67 Mon Sep 17 00:00:00 2001
From: Bilal Dieumegard <bilal.dieumegard@gmail.com>
Date: Fri, 6 Dec 2024 01:13:23 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20de=20l'update=20en=20temps=20reel=20du?=
 =?UTF-8?q?=20d=C3=A9lai=20des=20messages=20et=20scroll=20up=20auto=20quan?=
 =?UTF-8?q?d=20un=20chat=20est=20cr=C3=A9=C3=A9.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/Message.svelte       | 26 +++++++++++++++++++++++--
 src/lib/components/ui/ChatItem.svelte   | 20 ++++++++++++++++++-
 src/lib/components/ui/CreateChat.svelte |  5 +++++
 src/routes/api/channels/+server.ts      |  1 +
 src/routes/chats/+page.svelte           |  8 ++++++--
 5 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Message.svelte b/src/lib/components/Message.svelte
index 14c3f15..d5fcc43 100644
--- a/src/lib/components/Message.svelte
+++ b/src/lib/components/Message.svelte
@@ -1,11 +1,32 @@
 <script lang="ts">
   import * as Card from "$lib/components/ui/card";
   import { formatDistanceToNow } from "$lib/utils/date.js";
+  import { onMount, onDestroy } from "svelte";
 
   export let username: string;
   export let messageContent: string;
   export let profilePicture: string | null; // Peut être null
   export let createdAt: string; // Date de création du message
+
+  let defaultProfilePicture = "/images/default-profile.png";
+
+  // Temps écoulé (calculé périodiquement)
+  let timeElapsed: string;
+
+  // Fonction pour mettre à jour le temps écoulé
+  const updateElapsed = () => {
+    timeElapsed = formatDistanceToNow(createdAt);
+  };
+
+  // Initialisation de l'intervalle
+  onMount(() => {
+    updateElapsed(); // Calcul initial
+    const interval = setInterval(updateElapsed, 1000); // Mise à jour toutes les secondes
+
+    return () => {
+      clearInterval(interval); // Nettoyage lors du démontage
+    };
+  });
 </script>
 
 <Card.Root class="relative">
@@ -13,7 +34,7 @@
     <!-- Image de profil collée à gauche -->
     <div class="flex flex-row gap-3 items-center">
       <img
-        src={`http://localhost:5173/${profilePicture}`}
+        src={profilePicture || defaultProfilePicture}
         alt="Profile Picture"
         class="h-10 w-10 rounded-full border border-gray-300"
       />
@@ -24,8 +45,9 @@
         </Card.Title>
       </div>
     </div>
+    <!-- Temps depuis la création -->
     <span class="text-xs sm:text-sm md:text-base text-gray-500 items-top">
-      {formatDistanceToNow(createdAt)}
+      {timeElapsed}
     </span>
   </Card.Header>
 
diff --git a/src/lib/components/ui/ChatItem.svelte b/src/lib/components/ui/ChatItem.svelte
index 52c005b..fcefea6 100644
--- a/src/lib/components/ui/ChatItem.svelte
+++ b/src/lib/components/ui/ChatItem.svelte
@@ -1,10 +1,28 @@
 <script lang="ts">
     import { formatDistanceToNow } from '$lib/utils/date';
+    import { onMount } from 'svelte';
 
     export let id: string; // ID du chat
     export let title: string; // Nom ou titre du chat
     export let lastMessage: string; // Dernier message affiché
     export let createdAt: string; // Heure du dernier message
+
+    let timeElapsed: string;
+
+    // Fonction pour mettre à jour le temps écoulé
+    const updateElapsed = () => {
+        timeElapsed = formatDistanceToNow(createdAt);
+    };
+
+    // Initialisation de l'intervalle
+    onMount(() => {
+        updateElapsed(); // Calcul initial
+        const interval = setInterval(updateElapsed, 1000); // Mise à jour toutes les secondes
+
+        return () => {
+            clearInterval(interval); // Nettoyage lors du démontage
+        };
+    });
 </script>
 
 <a href={`/chats/${id}`} class="chat-item p-4 border rounded-md hover:bg-gray-100 cursor-pointer flex justify-between items-center">
@@ -12,7 +30,7 @@
         <p class="font-semibold text-lg">{title}</p>
         <p class="text-sm text-gray-500 truncate">{lastMessage}</p>
     </div>
-    <p class="text-xs text-gray-400">{formatDistanceToNow(createdAt)}</p>
+    <p class="text-xs text-gray-400">{timeElapsed}</p>
 </a>
 
 <style>
diff --git a/src/lib/components/ui/CreateChat.svelte b/src/lib/components/ui/CreateChat.svelte
index 51d3f93..4e32b8b 100644
--- a/src/lib/components/ui/CreateChat.svelte
+++ b/src/lib/components/ui/CreateChat.svelte
@@ -3,6 +3,8 @@
 
 	export let show = false;
 
+	export let listRef: HTMLElement | null = null;
+
 	export let onClose: () => void; // Callback pour fermer le composant
 
 	let showAlert = false;
@@ -29,6 +31,9 @@
 					alertMessage = `Le chat "${data.name}" a été créé avec succès.`;
 					chatName = ""; // Réinitialiser
 					socket.emit("new-channel", data);
+					if (listRef) {
+						listRef.scrollTo({ top: 0, behavior: 'smooth' });
+					}
 					onClose?.(); // Fermer le composant après création
 				} else {
 					response.json().then(error => {
diff --git a/src/routes/api/channels/+server.ts b/src/routes/api/channels/+server.ts
index ec06b75..02ea2b5 100644
--- a/src/routes/api/channels/+server.ts
+++ b/src/routes/api/channels/+server.ts
@@ -104,6 +104,7 @@ export async function POST({ request }) {
 		canal = {
 			...canal,
 			lastMessage: null,
+			lastUpdate: canal.createdAt,
 			messages: undefined
 		}
 
diff --git a/src/routes/chats/+page.svelte b/src/routes/chats/+page.svelte
index 7dfca25..04dcaf2 100644
--- a/src/routes/chats/+page.svelte
+++ b/src/routes/chats/+page.svelte
@@ -7,12 +7,16 @@
 	import CreateChat from "$lib/components/ui/CreateChat.svelte"; // Importer le composant CreateChat
 	import { initSocket } from "$lib/stores/socket";
 
+	let chatListRef: HTMLElement | null = null;
+
 	let showProfileCard = false;  // État pour afficher ou masquer le ProfileCard
 	let showCreateChat = false;  // État pour afficher ou masquer CreateChat
 
 	let socket = initSocket(); // Initialiser le socket
 
 	socket.on("new-channel", (channel) => {
+		console.log(channel);
+		console.log(channels);
 		channels = [channel, ...channels];
 	});
 
@@ -81,7 +85,7 @@
 		</Button>
 	</div>
 
-	<div class="flex flex-col gap-4 overflow-y-auto">
+	<div class="flex flex-col gap-4 overflow-y-auto" bind:this={chatListRef}>
 		{#each channels as channel}
 			<ChatItem
 				id={channel.id}
@@ -93,7 +97,7 @@
 	</div>
 
 </div>
-<CreateChat show={showCreateChat} socket={socket} onClose={closeCreateChat} />
+<CreateChat show={showCreateChat} socket={socket} onClose={closeCreateChat} listRef={chatListRef} />
 <ProfileCard user={data.user} show={showProfileCard} onClose={closeProfileCard} />
 
 <style>