Added Chat Page
This commit is contained in:
224
components/Messagerie.tsx
Normal file
224
components/Messagerie.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import ChatWindow from './ChatWindow';
|
||||
import NewConversationModal from './NewConversationModal';
|
||||
import GroupSettingsModal from './GroupSettingsModal';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string | null;
|
||||
}
|
||||
|
||||
interface Participant {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string | null;
|
||||
}
|
||||
|
||||
interface LastMessage {
|
||||
id: string;
|
||||
content: string | null;
|
||||
senderId: string;
|
||||
senderName: string;
|
||||
createdAt: string;
|
||||
hasFiles: boolean;
|
||||
}
|
||||
|
||||
interface Conversation {
|
||||
id: string;
|
||||
name: string | null;
|
||||
type: string;
|
||||
displayName: string;
|
||||
participants: Participant[];
|
||||
lastMessage: LastMessage | null;
|
||||
unreadCount: number;
|
||||
updatedAt: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((res) => res.json());
|
||||
|
||||
export default function Messagerie() {
|
||||
const [selectedConversation, setSelectedConversation] = useState<string | null>(null);
|
||||
const [showNewConversation, setShowNewConversation] = useState(false);
|
||||
const [showGroupSettings, setShowGroupSettings] = useState(false);
|
||||
|
||||
const { data: conversations, error, mutate } = useSWR<Conversation[]>(
|
||||
'/api/conversations',
|
||||
fetcher,
|
||||
{
|
||||
refreshInterval: 2000, // Rafraîchir toutes les 2 secondes
|
||||
}
|
||||
);
|
||||
|
||||
const selectedConv = conversations?.find((c) => c.id === selectedConversation);
|
||||
|
||||
useEffect(() => {
|
||||
// Sélectionner automatiquement la première conversation si aucune n'est sélectionnée
|
||||
if (!selectedConversation && conversations && conversations.length > 0) {
|
||||
setSelectedConversation(conversations[0].id);
|
||||
}
|
||||
}, [conversations, selectedConversation]);
|
||||
|
||||
const handleNewMessage = () => {
|
||||
// Rafraîchir la liste des conversations quand un nouveau message arrive
|
||||
mutate();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-80px)] bg-white">
|
||||
{/* Liste des conversations */}
|
||||
<div className="w-80 border-r border-gray-200 flex flex-col">
|
||||
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-gray-900">Messages</h2>
|
||||
<button
|
||||
onClick={() => setShowNewConversation(true)}
|
||||
className="p-2 rounded-lg bg-lblue text-white hover:bg-dblue transition-colors"
|
||||
title="Nouvelle conversation"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{error && (
|
||||
<div className="p-4 text-sm text-red-600">
|
||||
Erreur lors du chargement des conversations
|
||||
</div>
|
||||
)}
|
||||
{!conversations && !error && (
|
||||
<div className="p-4 text-sm text-gray-500 text-center">Chargement...</div>
|
||||
)}
|
||||
{conversations && conversations.length === 0 && (
|
||||
<div className="p-4 text-sm text-gray-500 text-center">
|
||||
Aucune conversation. Créez-en une nouvelle !
|
||||
</div>
|
||||
)}
|
||||
{conversations && conversations.length > 0 && (
|
||||
<div className="divide-y divide-gray-100">
|
||||
{conversations.map((conversation) => (
|
||||
<button
|
||||
key={conversation.id}
|
||||
onClick={() => {
|
||||
setSelectedConversation(conversation.id);
|
||||
if (conversation.type === 'group') {
|
||||
setShowGroupSettings(false);
|
||||
}
|
||||
}}
|
||||
className={`w-full p-4 text-left hover:bg-gray-50 transition-colors ${
|
||||
selectedConversation === conversation.id ? 'bg-lblue/10' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
{conversation.type === 'group'
|
||||
? conversation.displayName.charAt(0).toUpperCase()
|
||||
: conversation.displayName
|
||||
.split(' ')
|
||||
.map((n) => n.charAt(0))
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<h3 className="text-sm font-semibold text-gray-900 truncate">
|
||||
{conversation.displayName}
|
||||
</h3>
|
||||
{conversation.unreadCount > 0 && (
|
||||
<span className="flex-shrink-0 w-5 h-5 bg-red-500 text-white text-xs font-semibold rounded-full flex items-center justify-center">
|
||||
{conversation.unreadCount > 99 ? '99+' : conversation.unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{conversation.lastMessage && (
|
||||
<span className="text-xs text-gray-500 flex-shrink-0 ml-2">
|
||||
{new Date(conversation.lastMessage.createdAt).toLocaleTimeString('fr-FR', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{conversation.lastMessage ? (
|
||||
<p className="text-sm text-gray-600 truncate">
|
||||
{conversation.type === 'group' && conversation.lastMessage.senderName
|
||||
? `${conversation.lastMessage.senderName}: `
|
||||
: ''}
|
||||
{conversation.lastMessage.hasFiles && !conversation.lastMessage.content
|
||||
? '📎 Fichier'
|
||||
: conversation.lastMessage.content || '📎 Fichier'}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-gray-400 italic">Aucun message</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fenêtre de chat */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{selectedConversation && selectedConv ? (
|
||||
<ChatWindow
|
||||
conversationId={selectedConversation}
|
||||
conversation={selectedConv}
|
||||
onNewMessage={handleNewMessage}
|
||||
onShowGroupSettings={() => setShowGroupSettings(true)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<svg
|
||||
className="w-16 h-16 text-gray-400 mx-auto mb-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-gray-500">Sélectionnez une conversation pour commencer</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modales */}
|
||||
{showNewConversation && (
|
||||
<NewConversationModal
|
||||
onClose={() => setShowNewConversation(false)}
|
||||
onConversationCreated={(conversationId) => {
|
||||
setSelectedConversation(conversationId);
|
||||
setShowNewConversation(false);
|
||||
mutate();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showGroupSettings && selectedConv && selectedConv.type === 'group' && (
|
||||
<GroupSettingsModal
|
||||
conversation={selectedConv}
|
||||
onClose={() => setShowGroupSettings(false)}
|
||||
onUpdate={mutate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user