Ajout de la réactivité pour les messages et pour les channels.

src/lib/components/ui/CreateChat.svelte

@@ -15,7 +15,7 @@
 		if (chatName.trim()) {
 			try {
 				// Appel API pour créer le chat
-				const response = await fetch('/api/canals', {
+				const response = await fetch('/api/channels', {
 					method: 'POST',
 					headers: {
 						'Content-Type': 'application/json',

src/lib/components/ui/Search.svelte

@@ -2,6 +2,8 @@
     import { Search } from "lucide-svelte"; // Icône de recherche depuis Lucide Svelte
 
     export let placeholder: string = "Rechercher..."; // Texte par défaut pour l'input
+
+    export let onChange: (value: string) => void = () => {}; // Callback pour la recherche
 </script>
 
 <div class="w-full">
@@ -11,6 +13,7 @@
         type="text"
         placeholder={placeholder}
         class="w-full pl-10 pr-4 py-2 border rounded-md focus:outline-none focus:ring focus:border-blue-300"
+        on:input={(event) => onChange(event.target.value)}
     />
 </div>
 

src/routes/api/channels/+server.ts

@@ -4,7 +4,39 @@ import redisClient from '$lib/redisClient';
 import logger from '$lib/logger';
 
 // GET: Liste tous les canaux avec leur premier message
-export async function GET() {
+export async function GET({ params, url }) {
+	if(url.searchParams.get("name") != null && url.searchParams.get("name") != ""){
+		const name = url.searchParams.get("name");
+		try {
+			let canaux = await prisma.channel.findMany({
+				where: {
+					name: {
+						contains: name,
+						mode: 'insensitive',
+					},
+				},
+				include: {
+					messages: {
+						take: 1, // Récupère le dernier message
+						orderBy: { createdAt: 'desc' }, // Trie par date décroissante
+					},
+				},
+			});
+
+			canaux = canaux.sort((a, b) => {
+				const lastMessageA = a.messages[0]?.createdAt || a.createdAt;
+				const lastMessageB = b.messages[0]?.createdAt || b.createdAt;
+
+				return new Date(lastMessageB).getTime() - new Date(lastMessageA).getTime();
+			});
+
+			return json(canaux);
+
+		} catch (err) {
+			logger.error(err);
+			return json({ error: 'Erreur serveur' }, { status: 500 });
+		}
+	}else{
 		try {
 			const cachedChannels = await redisClient.get('channels');
 
@@ -24,8 +56,9 @@ export async function GET() {
 			});
 
 			canaux = canaux.sort((a, b) => {
-			const lastMessageA = a.messages[0]?.createdAt || a.createdAt ? a.createdAt : new Date();
+				const lastMessageA = a.messages[0]?.createdAt || a.createdAt;
-			const lastMessageB = b.messages[0]?.createdAt || b.createdAt ? b.createdAt : new Date();
+				const lastMessageB = b.messages[0]?.createdAt || b.createdAt;
+
 				return new Date(lastMessageB).getTime() - new Date(lastMessageA).getTime();
 			});
 
@@ -40,6 +73,8 @@ export async function GET() {
 		}
 	}
 
+}
+
 export async function POST({ request }) {
 	const { name } = await request.json();
 

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

@@ -8,11 +8,11 @@ export async function GET({ params, url }) {
 	// @ts-ignore
 	const page = url.searchParams.get('page') != null ? parseInt(url.searchParams.get('page')) : 1;
 	// @ts-ignore
-	const limit = url.searchParams.get('limit') != null ? parseInt(url.searchParams.get('limit')) : 10;
+	const limit = 10;
 	const offset = (page - 1) * limit;
 
 	// Générer une clé cache Redis unique en fonction du canal et des paramètres de pagination
-	const cacheKey = `channel:${channelId}:messages:page:${page}:limit:${limit}`;
+	const cacheKey = `channel:${channelId}:messages:page:${page}`;
 
 	try {
 		const cachedMessages = await redisClient.get(cacheKey);

src/routes/chats/+page.svelte

@@ -38,10 +38,20 @@
 		showCreateChat = false;  // Fermer le composant CreateChat
 	}
 
+	async function loadNewChannels(name : string) {
+		console.log('loadNewChannels');
+		const res = await fetch(`/api/channels?name=${name}`, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+			}
+		});
+		channels = await res.json();
+		console.log(channels);
+	}
+
 	export let data;
 	export let channels = data.channels;// Assurez-vous que 'lastMessage' est facultatif si nécessaire
-	console.log(channels);
-
 </script>
 
 <div class="h-full flex flex-col gap-5 p-5">
@@ -58,7 +68,7 @@
 
 		<div class="flex items-center gap-2 w-full mr-6 ml-6">
 			<div class="relative w-full">
-				<Search class="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400" />
+				<Search class="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400" onChange={loadNewChannels}/>
 			</div>
 		</div>
 

src/routes/chats/[id]/+page.server.ts

@@ -0,0 +1,19 @@
+export async function load({ fetch, params }) {
+	try {
+		const res = await fetch(`/api/channels/${params.id}/messages?page=1`, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		}
+		const messages = await res.json();
+		return {
+			messages
+		}
+	}catch (error) {
+		console.error('Erreur lors du chargement des messages:', error);
+		return {
+			messages: []
+		};
+	}
+}

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

@@ -3,6 +3,10 @@
     import { Button } from "$lib/components/ui/button";
     import PaperPlane from "svelte-radix/PaperPlane.svelte";
 	  import Message from "$lib/components/Message.svelte";
+
+    export let data;
+    export let messages = data.messages;
+
 </script>
 
 <div class="h-full">