feat: implement messaging functionality with real-time updates
- Introduced a messaging module on the backend using NestJS, including repository, service, controller, DTOs, and WebSocket Gateway. - Developed a frontend messaging page with conversation management, real-time message handling, and chat UI. - Implemented `MessageService` for API integrations and `SocketProvider` for real-time WebSocket updates. - Enhanced database schema to support conversations, participants, and messages with Drizzle ORM.
This commit is contained in:
Mathis HERRIOT
277
frontend/src/app/(dashboard)/messages/page.tsx
Normal file
277
frontend/src/app/(dashboard)/messages/page.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
"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 { Card, CardContent } from "@/components/ui/card";
|
||||
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 {
|
||||
MessageService,
|
||||
type Conversation,
|
||||
type Message,
|
||||
} 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;
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
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}
|
||||
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>
|
||||
);
|
||||
}
|
||||
162
frontend/src/components/comment-section.tsx
Normal file
162
frontend/src/components/comment-section.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
"use client";
|
||||
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { fr } from "date-fns/locale";
|
||||
import { MoreHorizontal, Send, Trash2 } 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 {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useAuth } from "@/providers/auth-provider";
|
||||
import { CommentService, type Comment } from "@/services/comment.service";
|
||||
|
||||
interface CommentSectionProps {
|
||||
contentId: string;
|
||||
}
|
||||
|
||||
export function CommentSection({ contentId }: CommentSectionProps) {
|
||||
const { user, isAuthenticated } = useAuth();
|
||||
const [comments, setComments] = React.useState<Comment[]>([]);
|
||||
const [newComment, setNewComment] = React.useState("");
|
||||
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
|
||||
const fetchComments = React.useCallback(async () => {
|
||||
try {
|
||||
const data = await CommentService.getByContentId(contentId);
|
||||
setComments(data);
|
||||
} catch (_error) {
|
||||
toast.error("Impossible de charger les commentaires");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [contentId]);
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchComments();
|
||||
}, [fetchComments]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newComment.trim() || isSubmitting) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const comment = await CommentService.create(contentId, newComment.trim());
|
||||
setComments((prev) => [comment, ...prev]);
|
||||
setNewComment("");
|
||||
toast.success("Commentaire publié !");
|
||||
} catch (_error) {
|
||||
toast.error("Erreur lors de la publication du commentaire");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (commentId: string) => {
|
||||
try {
|
||||
await CommentService.remove(commentId);
|
||||
setComments((prev) => prev.filter((c) => c.id !== commentId));
|
||||
toast.success("Commentaire supprimé");
|
||||
} catch (_error) {
|
||||
toast.error("Erreur lors de la suppression");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6 mt-8">
|
||||
<h3 className="font-bold text-lg">Commentaires ({comments.length})</h3>
|
||||
|
||||
{isAuthenticated ? (
|
||||
<form onSubmit={handleSubmit} className="flex gap-3">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={user?.avatarUrl} />
|
||||
<AvatarFallback>{user?.username[0].toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 space-y-2">
|
||||
<Textarea
|
||||
placeholder="Ajouter un commentaire..."
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
className="min-h-[80px] resize-none"
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" size="sm" disabled={!newComment.trim() || isSubmitting}>
|
||||
{isSubmitting ? "Envoi..." : "Publier"}
|
||||
<Send className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<div className="bg-zinc-100 dark:bg-zinc-800 p-4 rounded-xl text-center text-sm">
|
||||
Connectez-vous pour laisser un commentaire.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
{isLoading ? (
|
||||
<div className="text-center text-muted-foreground py-4">Chargement...</div>
|
||||
) : comments.length === 0 ? (
|
||||
<div className="text-center text-muted-foreground py-4">
|
||||
Aucun commentaire pour le moment. Soyez le premier !
|
||||
</div>
|
||||
) : (
|
||||
comments.map((comment) => (
|
||||
<div key={comment.id} className="flex gap-3">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={comment.user.avatarUrl} />
|
||||
<AvatarFallback>
|
||||
{comment.user.username[0].toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 space-y-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-bold">
|
||||
{comment.user.displayName || comment.user.username}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatDistanceToNow(new Date(comment.createdAt), {
|
||||
addSuffix: true,
|
||||
locale: fr,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
{(user?.uuid === comment.user.uuid || user?.role === "admin" || user?.role === "moderator") && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDelete(comment.id)}
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Supprimer
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed whitespace-pre-wrap">
|
||||
{comment.text}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
56
frontend/src/providers/socket-provider.tsx
Normal file
56
frontend/src/providers/socket-provider.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { io, Socket } from "socket.io-client";
|
||||
import { useAuth } from "./auth-provider";
|
||||
|
||||
interface SocketContextType {
|
||||
socket: Socket | null;
|
||||
isConnected: boolean;
|
||||
}
|
||||
|
||||
const SocketContext = React.createContext<SocketContextType>({
|
||||
socket: null,
|
||||
isConnected: false,
|
||||
});
|
||||
|
||||
export const useSocket = () => React.useContext(SocketContext);
|
||||
|
||||
export function SocketProvider({ children }: { children: React.ReactNode }) {
|
||||
const { isAuthenticated } = useAuth();
|
||||
const [socket, setSocket] = React.useState<Socket | null>(null);
|
||||
const [isConnected, setIsConnected] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isAuthenticated) {
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
|
||||
const socketInstance = io(apiUrl, {
|
||||
withCredentials: true,
|
||||
transports: ["websocket"],
|
||||
});
|
||||
|
||||
socketInstance.on("connect", () => {
|
||||
setIsConnected(true);
|
||||
});
|
||||
|
||||
socketInstance.on("disconnect", () => {
|
||||
setIsConnected(false);
|
||||
});
|
||||
|
||||
setSocket(socketInstance);
|
||||
|
||||
return () => {
|
||||
socketInstance.disconnect();
|
||||
};
|
||||
} else {
|
||||
setSocket(null);
|
||||
setIsConnected(false);
|
||||
}
|
||||
}, [isAuthenticated]);
|
||||
|
||||
return (
|
||||
<SocketContext.Provider value={{ socket, isConnected }}>
|
||||
{children}
|
||||
</SocketContext.Provider>
|
||||
);
|
||||
}
|
||||
32
frontend/src/services/comment.service.ts
Normal file
32
frontend/src/services/comment.service.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import api from "@/lib/api";
|
||||
|
||||
export interface Comment {
|
||||
id: string;
|
||||
text: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
user: {
|
||||
uuid: string;
|
||||
username: string;
|
||||
displayName?: string;
|
||||
avatarUrl?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const CommentService = {
|
||||
async getByContentId(contentId: string): Promise<Comment[]> {
|
||||
const { data } = await api.get<Comment[]>(`/contents/${contentId}/comments`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async create(contentId: string, text: string): Promise<Comment> {
|
||||
const { data } = await api.post<Comment>(`/contents/${contentId}/comments`, {
|
||||
text,
|
||||
});
|
||||
return data;
|
||||
},
|
||||
|
||||
async remove(commentId: string): Promise<void> {
|
||||
await api.delete(`/comments/${commentId}`);
|
||||
},
|
||||
};
|
||||
44
frontend/src/services/message.service.ts
Normal file
44
frontend/src/services/message.service.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import api from "@/lib/api";
|
||||
|
||||
export interface Conversation {
|
||||
id: string;
|
||||
updatedAt: string;
|
||||
lastMessage?: {
|
||||
text: string;
|
||||
createdAt: string;
|
||||
};
|
||||
recipient: {
|
||||
uuid: string;
|
||||
username: string;
|
||||
displayName?: string;
|
||||
avatarUrl?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface Message {
|
||||
id: string;
|
||||
text: string;
|
||||
createdAt: string;
|
||||
senderId: string;
|
||||
readAt?: string;
|
||||
}
|
||||
|
||||
export const MessageService = {
|
||||
async getConversations(): Promise<Conversation[]> {
|
||||
const { data } = await api.get<Conversation[]>("/messages/conversations");
|
||||
return data;
|
||||
},
|
||||
|
||||
async getMessages(conversationId: string): Promise<Message[]> {
|
||||
const { data } = await api.get<Message[]>(`/messages/conversations/${conversationId}`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async sendMessage(recipientId: string, text: string): Promise<Message> {
|
||||
const { data } = await api.post<Message>("/messages", {
|
||||
recipientId,
|
||||
text,
|
||||
});
|
||||
return data;
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user