feat: add expert search, legal search and UI improvements
This commit is contained in:
Aktraiser
parent
2c5ca94b3c
commit
271199c527
53 changed files with 4595 additions and 708 deletions
295
ui/app/chatroom/[expertId]/page.tsx
Normal file
295
ui/app/chatroom/[expertId]/page.tsx
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
'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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue