feat: Messagerie WIP [#17]

Front-End/src/app/[locale]/parents/messagerie/page.js

@@ -1,7 +1,6 @@
 'use client';
-import React, { useState, useRef, useEffect } from 'react';
-import { SendHorizontal } from 'lucide-react';
-import Image from 'next/image';
+import React from 'react';
+import Chat from '@/components/Chat';
 import { getGravatarUrl } from '@/utils/gravatar';
 
 const contacts = [
@@ -23,45 +22,7 @@ const contacts = [
 ];
 
 export default function MessageriePage() {
-  const [selectedContact, setSelectedContact] = useState(null);
-  const [messages, setMessages] = useState({});
-  const [newMessage, setNewMessage] = useState('');
-  const messagesEndRef = useRef(null);
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
-
-  const handleSendMessage = () => {
-    if (newMessage.trim() && selectedContact) {
-      const contactMessages = messages[selectedContact.id] || [];
-      setMessages({
-        ...messages,
-        [selectedContact.id]: [
-          ...contactMessages,
-          {
-            id: contactMessages.length + 1,
-            text: newMessage,
-            date: new Date(),
-          },
-        ],
-      });
-      setNewMessage('');
-      simulateContactResponse(selectedContact.id);
-    }
-  };
-
-  const handleKeyPress = (event) => {
-    if (event.key === 'Enter') {
-      handleSendMessage();
-    }
-  };
-
-  const simulateContactResponse = (contactId) => {
+  const simulateResponse = (contactId, setMessages) => {
     setTimeout(() => {
       setMessages((prevMessages) => {
         const contactMessages = prevMessages[contactId] || [];
@@ -81,79 +42,5 @@ export default function MessageriePage() {
     }, 2000);
   };
 
-  return (
-    <div className="flex" style={{ height: 'calc(100vh - 128px )' }}>
-      {' '}
-      {/* Utilisation de calc pour soustraire la hauteur de l'entête */}
-      <div className="w-1/4 border-r border-gray-200 p-4 overflow-y-auto h-full ">
-        {contacts.map((contact) => (
-          <div
-            key={contact.id}
-            className={`p-2 cursor-pointer ${selectedContact?.id === contact.id ? 'bg-gray-200' : ''}`}
-            onClick={() => setSelectedContact(contact)}
-          >
-            <Image
-              src={contact.profilePic}
-              alt={`${contact.name}'s profile`}
-              className="w-8 h-8 rounded-full inline-block mr-2"
-              width={150}
-              height={150}
-            />
-            {contact.name}
-          </div>
-        ))}
-      </div>
-      <div className="flex-1 flex flex-col h-full">
-        <div className="flex-1 overflow-y-auto p-4 h-full">
-          {selectedContact &&
-            (messages[selectedContact.id] || []).map((message) => (
-              <div
-                key={message.id}
-                className={`mb-2 p-2 rounded max-w-xs ${message.isResponse ? 'bg-gray-200 justify-self-end' : 'bg-emerald-200 justify-self-start'}`}
-                style={{
-                  borderRadius: message.isResponse
-                    ? '20px 20px 0 20px'
-                    : '20px 20px 20px 0',
-                  minWidth: '25%',
-                }}
-              >
-                <div className="flex items-center mb-1">
-                  <img
-                    src={selectedContact.profilePic}
-                    alt={`${selectedContact.name}'s profile`}
-                    className="w-8 h-8 rounded-full inline-block mr-2"
-                    width={150}
-                    height={150}
-                  />
-                  <span className="text-xs text-gray-600">
-                    {selectedContact.name}
-                  </span>
-                  <span className="text-xs text-gray-400 ml-2">
-                    {new Date(message.date).toLocaleTimeString()}
-                  </span>
-                </div>
-                {message.text}
-              </div>
-            ))}
-          <div ref={messagesEndRef} />
-        </div>
-        <div className="p-4 border-t border-gray-200 flex">
-          <input
-            type="text"
-            value={newMessage}
-            onChange={(e) => setNewMessage(e.target.value)}
-            className="w-full p-2 border border-gray-300 rounded"
-            placeholder="Écrire un message..."
-            onKeyDown={handleKeyPress}
-          />
-          <button
-            onClick={handleSendMessage}
-            className="p-2 bg-emerald-500 text-white rounded mr-2"
-          >
-            <SendHorizontal />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
+  return <Chat contacts={contacts} simulateResponse={simulateResponse} />;
 }