9db3067721
- Reordered and grouped imports consistently in backend and frontend files for better readability. - Applied indentation and formatting fixes across frontend components, services, and backend modules. - Adjusted multiline method calls and type definitions for improved clarity.
284 lines
8.5 KiB
TypeScript
284 lines
8.5 KiB
TypeScript
"use client";
|
|
|
|
import { formatDistanceToNow } from "date-fns";
|
|
import { fr } from "date-fns/locale";
|
|
import { Search, Send } from "lucide-react";
|
|
import * as React from "react";
|
|
import { toast } from "sonner";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { useAuth } from "@/providers/auth-provider";
|
|
import { useSocket } from "@/providers/socket-provider";
|
|
import {
|
|
type Conversation,
|
|
type Message,
|
|
MessageService,
|
|
} from "@/services/message.service";
|
|
|
|
export default function MessagesPage() {
|
|
const { user } = useAuth();
|
|
const { socket } = useSocket();
|
|
const [conversations, setConversations] = React.useState<Conversation[]>([]);
|
|
const [activeConv, setActiveConv] = React.useState<Conversation | null>(null);
|
|
const [messages, setMessages] = React.useState<Message[]>([]);
|
|
const [newMessage, setNewMessage] = React.useState("");
|
|
const [isLoadingConvs, setIsLoadingConvs] = React.useState(true);
|
|
const [isLoadingMsgs, setIsLoadingMsgs] = React.useState(false);
|
|
const scrollRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
React.useEffect(() => {
|
|
const fetchConvs = async () => {
|
|
try {
|
|
const data = await MessageService.getConversations();
|
|
setConversations(data);
|
|
} catch (_error) {
|
|
toast.error("Erreur lors du chargement des conversations");
|
|
} finally {
|
|
setIsLoadingConvs(false);
|
|
}
|
|
};
|
|
fetchConvs();
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
if (activeConv) {
|
|
const fetchMsgs = async () => {
|
|
setIsLoadingMsgs(true);
|
|
try {
|
|
const data = await MessageService.getMessages(activeConv.id);
|
|
setMessages(data.reverse()); // Plus ancien au plus récent
|
|
} catch (_error) {
|
|
toast.error("Erreur lors du chargement des messages");
|
|
} finally {
|
|
setIsLoadingMsgs(false);
|
|
}
|
|
};
|
|
fetchMsgs();
|
|
}
|
|
}, [activeConv]);
|
|
|
|
React.useEffect(() => {
|
|
if (socket) {
|
|
socket.on(
|
|
"new_message",
|
|
(data: { conversationId: string; message: Message }) => {
|
|
if (activeConv?.id === data.conversationId) {
|
|
setMessages((prev) => [...prev, data.message]);
|
|
}
|
|
// Mettre à jour la liste des conversations
|
|
setConversations((prev) => {
|
|
const index = prev.findIndex((c) => c.id === data.conversationId);
|
|
if (index !== -1) {
|
|
const updated = [...prev];
|
|
updated[index] = {
|
|
...updated[index],
|
|
lastMessage: {
|
|
text: data.message.text,
|
|
createdAt: data.message.createdAt,
|
|
},
|
|
updatedAt: data.message.createdAt,
|
|
};
|
|
return updated.sort(
|
|
(a, b) =>
|
|
new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
|
|
);
|
|
}
|
|
return prev;
|
|
});
|
|
},
|
|
);
|
|
|
|
return () => {
|
|
socket.off("new_message");
|
|
};
|
|
}
|
|
}, [socket, activeConv]);
|
|
|
|
React.useEffect(() => {
|
|
if (scrollRef.current) {
|
|
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
|
}
|
|
}, []);
|
|
|
|
const handleSendMessage = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!newMessage.trim() || !activeConv) return;
|
|
|
|
const text = newMessage.trim();
|
|
setNewMessage("");
|
|
|
|
try {
|
|
const msg = await MessageService.sendMessage(
|
|
activeConv.recipient.uuid,
|
|
text,
|
|
);
|
|
setMessages((prev) => [...prev, msg]);
|
|
} catch (_error) {
|
|
toast.error("Erreur lors de l'envoi");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="h-[calc(100vh-4rem)] flex overflow-hidden bg-white dark:bg-zinc-950">
|
|
{/* Sidebar - Liste des conversations */}
|
|
<div className="w-80 border-r flex flex-col">
|
|
<div className="p-4 border-b">
|
|
<h2 className="text-xl font-bold mb-4">Messages</h2>
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input placeholder="Rechercher..." className="pl-9" />
|
|
</div>
|
|
</div>
|
|
<ScrollArea className="flex-1">
|
|
<div className="p-2 space-y-1">
|
|
{isLoadingConvs ? (
|
|
<div className="p-4 text-center text-sm text-muted-foreground">
|
|
Chargement...
|
|
</div>
|
|
) : conversations.length === 0 ? (
|
|
<div className="p-4 text-center text-sm text-muted-foreground">
|
|
Aucune conversation.
|
|
</div>
|
|
) : (
|
|
conversations.map((conv) => (
|
|
<button
|
|
key={conv.id}
|
|
type="button"
|
|
onClick={() => setActiveConv(conv)}
|
|
className={`w-full flex items-center gap-3 p-3 rounded-xl transition-colors ${
|
|
activeConv?.id === conv.id
|
|
? "bg-primary/10 text-primary"
|
|
: "hover:bg-zinc-100 dark:hover:bg-zinc-900"
|
|
}`}
|
|
>
|
|
<Avatar>
|
|
<AvatarImage src={conv.recipient.avatarUrl} />
|
|
<AvatarFallback>
|
|
{conv.recipient.username[0].toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1 text-left overflow-hidden">
|
|
<div className="flex justify-between items-baseline">
|
|
<span className="font-bold truncate">
|
|
{conv.recipient.displayName || conv.recipient.username}
|
|
</span>
|
|
{conv.lastMessage && (
|
|
<span className="text-[10px] text-muted-foreground whitespace-nowrap">
|
|
{formatDistanceToNow(new Date(conv.lastMessage.createdAt), {
|
|
locale: fr,
|
|
})}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground truncate">
|
|
{conv.lastMessage?.text || "Démarrer une conversation"}
|
|
</p>
|
|
</div>
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
|
|
{/* Zone de chat */}
|
|
<div className="flex-1 flex flex-col">
|
|
{activeConv ? (
|
|
<>
|
|
{/* Header */}
|
|
<div className="p-4 border-b flex items-center gap-3">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src={activeConv.recipient.avatarUrl} />
|
|
<AvatarFallback>
|
|
{activeConv.recipient.username[0].toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<h3 className="font-bold leading-none">
|
|
{activeConv.recipient.displayName || activeConv.recipient.username}
|
|
</h3>
|
|
<span className="text-xs text-green-500 font-medium">En ligne</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Messages */}
|
|
<ScrollArea className="flex-1 p-4" viewportRef={scrollRef}>
|
|
<div className="space-y-4">
|
|
{isLoadingMsgs ? (
|
|
<div className="text-center py-4 text-sm text-muted-foreground">
|
|
Chargement...
|
|
</div>
|
|
) : (
|
|
messages.map((msg) => (
|
|
<div
|
|
key={msg.id}
|
|
className={`flex ${
|
|
msg.senderId === user?.uuid ? "justify-end" : "justify-start"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`max-w-[70%] p-3 rounded-2xl text-sm ${
|
|
msg.senderId === user?.uuid
|
|
? "bg-primary text-primary-foreground rounded-br-none"
|
|
: "bg-zinc-100 dark:bg-zinc-800 rounded-bl-none"
|
|
}`}
|
|
>
|
|
<p className="whitespace-pre-wrap">{msg.text}</p>
|
|
<p
|
|
className={`text-[10px] mt-1 ${
|
|
msg.senderId === user?.uuid
|
|
? "text-primary-foreground/70"
|
|
: "text-muted-foreground"
|
|
}`}
|
|
>
|
|
{new Date(msg.createdAt).toLocaleTimeString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
{/* Input */}
|
|
<div className="p-4 border-t">
|
|
<form onSubmit={handleSendMessage} className="flex gap-2">
|
|
<Input
|
|
placeholder="Écrivez un message..."
|
|
value={newMessage}
|
|
onChange={(e) => setNewMessage(e.target.value)}
|
|
className="rounded-full px-4"
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
size="icon"
|
|
className="rounded-full shrink-0"
|
|
disabled={!newMessage.trim()}
|
|
>
|
|
<Send className="h-4 w-4" />
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex-1 flex flex-col items-center justify-center text-center p-8">
|
|
<div className="bg-primary/10 p-6 rounded-full mb-4">
|
|
<Send className="h-12 w-12 text-primary" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold mb-2">Vos messages</h2>
|
|
<p className="text-muted-foreground max-w-sm">
|
|
Sélectionnez une conversation ou démarrez-en une nouvelle pour commencer
|
|
à discuter.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|