feat: Mise en place du Backend-messagerie [#17]

Front-End/src/components/Chat.js

@@ -1,48 +1,53 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { SendHorizontal } from 'lucide-react';
+import { SendHorizontal, Plus } from 'lucide-react';
 import Image from 'next/image';
+import {
+  fetchConversations,
+  fetchMessages,
+  sendMessage,
+  markAsRead,
+} from '@/app/actions/messagerieAction';
 
 export default function Chat({
-  discussions,
-  setDiscussions,
-  onSendMessage,
-  simulateResponse,
+  userProfileId,
+  establishmentId,
+  discussions: discussionsProp,
+  setDiscussions: setDiscussionsProp,
+  onCreateDiscussion,
+  onShowCreateDiscussion,
 }) {
+  const [discussions, setDiscussions] = useState(discussionsProp || []);
   const [selectedDiscussion, setSelectedDiscussion] = useState(null);
-  const [messages, setMessages] = useState({});
+  const [messages, setMessages] = useState([]);
   const [newMessage, setNewMessage] = useState('');
-  const [showCreateForm, setShowCreateForm] = useState(false);
-  const [newDiscussionName, setNewDiscussionName] = useState('');
-  const [newDiscussionProfilePic, setNewDiscussionProfilePic] = useState('');
   const messagesEndRef = useRef(null);
 
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
+  useEffect(() => {
+    if (userProfileId) {
+      fetchConversations(userProfileId).then(setDiscussions);
+    }
+  }, [userProfileId]);
 
   useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
+    if (selectedDiscussion) {
+      fetchMessages(selectedDiscussion.conversation_id).then(setMessages);
+      // Marquer comme lu
+      markAsRead(selectedDiscussion.conversation_id, userProfileId);
+    }
+  }, [selectedDiscussion, userProfileId]);
 
-  const handleSendMessage = () => {
+  const handleSendMessage = async () => {
     if (newMessage.trim() && selectedDiscussion) {
-      const discussionMessages = messages[selectedDiscussion.id] || [];
-      const newMessages = {
-        ...messages,
-        [selectedDiscussion.id]: [
-          ...discussionMessages,
-          {
-            id: discussionMessages.length + 1,
-            text: newMessage,
-            date: new Date(),
-            isResponse: false,
-          },
-        ],
-      };
-      setMessages(newMessages);
+      await sendMessage({
+        conversation_id: selectedDiscussion.conversation_id,
+        emetteur: userProfileId,
+        destinataire: selectedDiscussion.interlocuteur.id,
+        corpus: newMessage,
+        objet: '',
+      });
       setNewMessage('');
-      onSendMessage && onSendMessage(selectedDiscussion, newMessage);
-      simulateResponse && simulateResponse(selectedDiscussion.id, setMessages);
+      fetchMessages(selectedDiscussion.conversation_id).then(setMessages);
+      fetchConversations(userProfileId).then(setDiscussions);
     }
   };
 
@@ -52,89 +57,55 @@ export default function Chat({
     }
   };
 
-  const handleCreateDiscussion = () => {
-    if (newDiscussionName.trim()) {
-      const newDiscussion = {
-        id: discussions.length + 1,
-        name: newDiscussionName,
-        profilePic: newDiscussionProfilePic || '/default-profile.png', // Image par défaut si aucune n'est fournie
-        lastMessage: '',
-        lastMessageDate: new Date(),
-      };
-      setDiscussions([...discussions, newDiscussion]);
-      setNewDiscussionName('');
-      setNewDiscussionProfilePic('');
-      setShowCreateForm(false);
-    }
-  };
-
   return (
-    <div className="flex h-full">
-      {/* Liste des discussions */}
-      <div className="w-1/4 bg-gray-100 border-r border-gray-300 p-4 overflow-y-auto">
-        <h2 className="text-lg font-bold mb-4">Discussions</h2>
-        <button
-          onClick={() => setShowCreateForm(!showCreateForm)}
-          className="w-full p-2 mb-4 bg-blue-500 text-white rounded-lg"
-        >
-          {showCreateForm ? 'Annuler' : 'Créer une discussion'}
-        </button>
-        {showCreateForm && (
-          <div className="mb-4 p-2 border rounded-lg bg-white">
-            <input
-              type="text"
-              value={newDiscussionName}
-              onChange={(e) => setNewDiscussionName(e.target.value)}
-              placeholder="Nom de la discussion"
-              className="w-full p-2 mb-2 border rounded"
-            />
-            <input
-              type="text"
-              value={newDiscussionProfilePic}
-              onChange={(e) => setNewDiscussionProfilePic(e.target.value)}
-              placeholder="URL de la photo de profil (optionnel)"
-              className="w-full p-2 mb-2 border rounded"
-            />
-            <button
-              onClick={handleCreateDiscussion}
-              className="w-full p-2 bg-green-500 text-white rounded-lg"
-            >
-              Ajouter
-            </button>
-          </div>
-        )}
-        {discussions && discussions.length > 0 ? (
-          discussions.map((discussion) => (
-            <div
-              key={discussion.id}
-              className={`flex items-center p-2 mb-2 cursor-pointer rounded ${
-                selectedDiscussion?.id === discussion.id
-                  ? 'bg-blue-100'
-                  : 'hover:bg-gray-200'
-              }`}
-              onClick={() => setSelectedDiscussion(discussion)}
-            >
-              <Image
-                src={discussion.profilePic}
-                alt={`${discussion.name}'s profile`}
-                className="w-10 h-10 rounded-full mr-3"
-                width={40}
-                height={40}
-              />
-              <div className="flex-1">
-                <p className="font-medium">{discussion.name}</p>
-                <p className="text-sm text-gray-500 truncate">
-                  {discussion.lastMessage}
-                </p>
+    <div className="flex h-full w-full">
+      {/* Bandeau droit : Liste des discussions */}
+      <div className="w-1/4 min-w-[280px] bg-gray-100 border-r border-gray-300 p-4 flex flex-col">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-bold">Discussions</h2>
+          <button
+            className="p-2 rounded-full bg-blue-500 hover:bg-blue-600 text-white shadow"
+            title="Nouvelle discussion"
+            onClick={onShowCreateDiscussion}
+          >
+            <Plus size={20} />
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          {discussions && discussions.length > 0 ? (
+            discussions.map((discussion) => (
+              <div
+                key={discussion.id}
+                className={`flex items-center p-2 mb-2 cursor-pointer rounded transition-colors ${
+                  selectedDiscussion?.id === discussion.id
+                    ? 'bg-blue-100'
+                    : 'hover:bg-gray-200'
+                }`}
+                onClick={() => setSelectedDiscussion(discussion)}
+              >
+                <Image
+                  src={discussion.profilePic}
+                  alt={`${discussion.name}'s profile`}
+                  className="w-10 h-10 rounded-full mr-3"
+                  width={40}
+                  height={40}
+                />
+                <div className="flex-1">
+                  <p className="font-medium">{discussion.name}</p>
+                  <p className="text-sm text-gray-500 truncate">
+                    {discussion.lastMessage}
+                  </p>
+                </div>
+                <span className="text-xs text-gray-400">
+                  {discussion.lastMessageDate &&
+                    new Date(discussion.lastMessageDate).toLocaleTimeString()}
+                </span>
               </div>
-              <span className="text-xs text-gray-400">
-                {new Date(discussion.lastMessageDate).toLocaleTimeString()}
-              </span>
-            </div>
-          ))
-        ) : (
-          <p className="text-gray-500">Aucune discussion disponible.</p>
-        )}
+            ))
+          ) : (
+            <p className="text-gray-500">Aucune discussion disponible.</p>
+          )}
+        </div>
       </div>
 
       {/* Zone de chat */}
@@ -152,11 +123,10 @@ export default function Chat({
             <h2 className="text-lg font-bold">{selectedDiscussion.name}</h2>
           </div>
         )}
-
         {/* Messages */}
         <div className="flex-1 overflow-y-auto p-4">
           {selectedDiscussion &&
-            (messages[selectedDiscussion.id] || []).map((message) => (
+            messages.map((message) => (
               <div
                 key={message.id}
                 className={`flex mb-4 ${
@@ -170,16 +140,16 @@ export default function Chat({
                       : 'bg-blue-500 text-white'
                   }`}
                 >
-                  <p>{message.text}</p>
+                  <p>{message.corpus}</p>
                   <span className="text-xs text-gray-500 block mt-1">
-                    {new Date(message.date).toLocaleTimeString()}
+                    {message.date &&
+                      new Date(message.date).toLocaleTimeString()}
                   </span>
                 </div>
               </div>
             ))}
           <div ref={messagesEndRef} />
         </div>
-
         {/* Champ de saisie */}
         {selectedDiscussion && (
           <div className="p-4 border-t border-gray-300 flex items-center">
@@ -189,7 +159,7 @@ export default function Chat({
               onChange={(e) => setNewMessage(e.target.value)}
               className="flex-1 p-2 border border-gray-300 rounded-lg mr-2"
               placeholder="Écrire un message..."
-              onKeyDown={handleKeyPress}
+              onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
             />
             <button
               onClick={handleSendMessage}