295 lines
No EOL
9.9 KiB
TypeScript
295 lines
No EOL
9.9 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { supabase } from '@/lib/supabase';
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import { toast } from 'sonner';
|
|
import { formatTimeDifference } from '@/lib/utils';
|
|
import Link from 'next/link';
|
|
import { Expert, Message } from '@/types';
|
|
|
|
interface Conversation {
|
|
expert: Expert;
|
|
lastMessage?: Message;
|
|
unreadCount: number;
|
|
}
|
|
|
|
export default function ChatRoom() {
|
|
const router = useRouter();
|
|
const { expertId } = useParams();
|
|
const [conversations, setConversations] = useState<Conversation[]>([]);
|
|
const [messages, setMessages] = useState<Message[]>([]);
|
|
const [newMessage, setNewMessage] = useState('');
|
|
const [currentExpert, setCurrentExpert] = useState<Expert | null>(null);
|
|
|
|
// Charger les conversations
|
|
useEffect(() => {
|
|
const loadConversations = async () => {
|
|
const { data: messages, error } = await supabase
|
|
.from('messages')
|
|
.select('*, expert:experts(*)')
|
|
.or('sender_id.eq.user_id,receiver_id.eq.user_id')
|
|
.order('created_at', { ascending: false });
|
|
|
|
if (error) {
|
|
toast.error("Erreur lors du chargement des conversations");
|
|
return;
|
|
}
|
|
|
|
// Grouper les messages par expert
|
|
const conversationsMap = new Map<string, Conversation>();
|
|
messages?.forEach(message => {
|
|
const expertId = message.sender_id === 'user_id' ? message.receiver_id : message.sender_id;
|
|
if (!conversationsMap.has(expertId)) {
|
|
conversationsMap.set(expertId, {
|
|
expert: message.expert,
|
|
lastMessage: message,
|
|
unreadCount: message.sender_id !== 'user_id' && !message.read ? 1 : 0
|
|
});
|
|
}
|
|
});
|
|
|
|
setConversations(Array.from(conversationsMap.values()));
|
|
};
|
|
|
|
loadConversations();
|
|
}, []);
|
|
|
|
// Charger les messages de la conversation courante
|
|
useEffect(() => {
|
|
if (!expertId) return;
|
|
|
|
const loadMessages = async () => {
|
|
const { data: expert, error: expertError } = await supabase
|
|
.from('experts')
|
|
.select('*')
|
|
.eq('id_expert', expertId)
|
|
.single();
|
|
|
|
if (expertError) {
|
|
toast.error("Erreur lors du chargement de l'expert");
|
|
return;
|
|
}
|
|
|
|
setCurrentExpert(expert);
|
|
|
|
const { data: messages, error: messagesError } = await supabase
|
|
.from('messages')
|
|
.select('*')
|
|
.or(`sender_id.eq.${expertId},receiver_id.eq.${expertId}`)
|
|
.order('created_at', { ascending: true });
|
|
|
|
if (messagesError) {
|
|
toast.error("Erreur lors du chargement des messages");
|
|
return;
|
|
}
|
|
|
|
setMessages(messages || []);
|
|
};
|
|
|
|
loadMessages();
|
|
|
|
// Souscrire aux nouveaux messages
|
|
const channel = supabase.channel('public:messages')
|
|
.on(
|
|
'postgres_changes',
|
|
{
|
|
event: 'INSERT',
|
|
schema: 'public',
|
|
table: 'messages',
|
|
},
|
|
(payload) => {
|
|
setMessages(current => [...current, payload.new as Message]);
|
|
}
|
|
)
|
|
.subscribe();
|
|
|
|
return () => {
|
|
channel.unsubscribe();
|
|
};
|
|
}, [expertId]);
|
|
|
|
const sendMessage = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!newMessage.trim() || !expertId) return;
|
|
|
|
const { error } = await supabase
|
|
.from('messages')
|
|
.insert({
|
|
content: newMessage,
|
|
sender_id: 'user_id',
|
|
receiver_id: expertId,
|
|
});
|
|
|
|
if (error) {
|
|
toast.error("Erreur lors de l'envoi du message");
|
|
return;
|
|
}
|
|
|
|
setNewMessage('');
|
|
};
|
|
|
|
const markAsRead = async (messageId: string) => {
|
|
const { error } = await supabase
|
|
.from('messages')
|
|
.update({ read: true })
|
|
.eq('id', messageId);
|
|
|
|
if (error) {
|
|
toast.error("Erreur lors de la mise à jour du message");
|
|
}
|
|
};
|
|
|
|
// Utilisez markAsRead quand un message est affiché
|
|
useEffect(() => {
|
|
if (!messages.length) return;
|
|
|
|
// Marquer les messages non lus comme lus
|
|
messages
|
|
.filter(msg => !msg.read && msg.sender_id !== 'user_id')
|
|
.forEach(msg => markAsRead(msg.id));
|
|
}, [messages]);
|
|
|
|
return (
|
|
<div className="flex h-[calc(100vh-4rem)]">
|
|
{/* Liste des conversations - cachée sur mobile si conversation active */}
|
|
<div className={`
|
|
${expertId ? 'hidden md:block' : 'block'}
|
|
w-full md:w-80 border-r bg-gray-50 dark:bg-gray-900
|
|
`}>
|
|
<div className="p-4 border-b">
|
|
<h2 className="text-lg font-semibold">Messages</h2>
|
|
</div>
|
|
<div className="overflow-y-auto h-[calc(100vh-8rem)]">
|
|
{conversations.length > 0 ? (
|
|
conversations.map((conversation) => (
|
|
<Link
|
|
key={conversation.expert.id_expert}
|
|
href={`/chatroom/${conversation.expert.id_expert}`}
|
|
className={`flex items-center p-4 hover:bg-gray-100 dark:hover:bg-gray-800 ${
|
|
expertId === conversation.expert.id_expert ? 'bg-gray-100 dark:bg-gray-800' : ''
|
|
}`}
|
|
>
|
|
<div className="w-12 h-12 rounded-full bg-gray-300 mr-4">
|
|
{(conversation.expert.avatar_url || conversation.expert.image_url) && (
|
|
<img
|
|
src={conversation.expert.avatar_url || conversation.expert.image_url}
|
|
alt={`${conversation.expert.prenom} ${conversation.expert.nom}`}
|
|
className="w-full h-full rounded-full object-cover"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">
|
|
{conversation.expert.prenom} {conversation.expert.nom}
|
|
</h3>
|
|
{conversation.lastMessage && (
|
|
<p className="text-sm text-gray-500 truncate">
|
|
{conversation.lastMessage.content}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{conversation.unreadCount > 0 && (
|
|
<div className="ml-2 bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
|
|
{conversation.unreadCount}
|
|
</div>
|
|
)}
|
|
</Link>
|
|
))
|
|
) : (
|
|
<div className="p-4 text-center text-gray-500">
|
|
Aucune conversation
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Zone de chat - plein écran sur mobile si conversation active */}
|
|
<div className={`
|
|
flex-1 flex flex-col
|
|
${!expertId ? 'hidden md:flex' : 'flex'}
|
|
`}>
|
|
{expertId && currentExpert ? (
|
|
<>
|
|
{/* En-tête avec bouton retour sur mobile */}
|
|
<div className="p-4 border-b flex items-center">
|
|
<button
|
|
onClick={() => router.push('/chatroom')}
|
|
className="md:hidden mr-2 p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<div className="w-10 h-10 rounded-full bg-gray-300 mr-4">
|
|
{currentExpert.avatar_url && (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={currentExpert.avatar_url}
|
|
alt=""
|
|
className="w-full h-full rounded-full object-cover"
|
|
/>
|
|
)}
|
|
</div>
|
|
<h2 className="text-xl font-semibold">
|
|
{currentExpert.prenom} {currentExpert.nom}
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Messages avec padding ajusté */}
|
|
<div className="flex-1 overflow-y-auto p-4 space-y-4 pb-20 md:pb-4">
|
|
{messages.map((message) => (
|
|
<div
|
|
key={message.id}
|
|
className={`flex ${
|
|
message.sender_id === 'user_id' ? 'justify-end' : 'justify-start'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`max-w-[70%] rounded-lg p-3 ${
|
|
message.sender_id === 'user_id'
|
|
? 'bg-blue-500 text-white'
|
|
: 'bg-gray-200 dark:bg-gray-700'
|
|
}`}
|
|
>
|
|
<div>{message.content}</div>
|
|
<div className="text-xs opacity-70 mt-1">
|
|
{formatTimeDifference(new Date(message.created_at), new Date())}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Formulaire d'envoi fixé en bas sur mobile */}
|
|
<form onSubmit={sendMessage} className="p-4 border-t flex gap-2 bg-white dark:bg-gray-900 fixed md:relative bottom-0 left-0 right-0">
|
|
<Input
|
|
value={newMessage}
|
|
onChange={(e) => setNewMessage(e.target.value)}
|
|
placeholder="Écrivez votre message..."
|
|
className="flex-1"
|
|
/>
|
|
<Button type="submit">Envoyer</Button>
|
|
</form>
|
|
</>
|
|
) : (
|
|
<div className="flex-1 flex items-center justify-center p-4">
|
|
<div className="text-center">
|
|
<h2 className="text-2xl font-semibold mb-4">
|
|
Bienvenue dans votre messagerie
|
|
</h2>
|
|
<p className="text-gray-500 mb-8">
|
|
Sélectionnez une conversation ou commencez à discuter avec un expert
|
|
</p>
|
|
<Button onClick={() => router.push('/discover')}>
|
|
Trouver un expert
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|