From 6df01b394d28352108c04b16867b286b12235838 Mon Sep 17 00:00:00 2001
From: "Michel Moccand-J." <michelm.gaming@gmail.com>
Date: Wed, 28 Feb 2024 19:42:26 +0000
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20chat=20componen?=
 =?UTF-8?q?t=20and=20add=20chevron-down=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                       |  2 +-
 frontend/src/assets/chevron-down.svg       |  3 ++
 frontend/src/components/chat.tsx           | 44 ++++++++++++++++------
 frontend/src/styles/chatDesktop.module.css | 27 ++++++++-----
 4 files changed, 53 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/assets/chevron-down.svg

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a08c280..54547b3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -90,7 +90,7 @@ function App() {
       
       {displayComponent === "login" && <LoginComponent onLogin={handleLogin} />}
       {displayComponent === "profil" && <ProfilComponent userEmail={userEmail} onHideProfil={() => handleDisplayComponent("none")} />}
-      {displayComponent === "chat" && <ChatComponent userEmail={userEmail}/>}
+      {displayComponent === "chat" && <ChatComponent />}
       {!isMobile.any() && <ChatComponent userEmail={userEmail} />}
     </div>
   );
diff --git a/frontend/src/assets/chevron-down.svg b/frontend/src/assets/chevron-down.svg
new file mode 100644
index 0000000..bb694b6
--- /dev/null
+++ b/frontend/src/assets/chevron-down.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 5L8 11L14 5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/components/chat.tsx b/frontend/src/components/chat.tsx
index 8e8e9c5..172ced3 100644
--- a/frontend/src/components/chat.tsx
+++ b/frontend/src/components/chat.tsx
@@ -3,20 +3,38 @@ import chatStylesMobile from '../styles/chatMobile.module.css'
 import { useEffect, useState, useRef } from 'react'
 import isMobile from '../utiles/isMobile'
 
-interface ChatComponentProps {
-    userEmail: string;
-}
-
-const ChatComponent: React.FC<ChatComponentProps> = ({userEmail}) => {
-    const [chat, setchat] = useState<string[]>([])
+const ChatComponent: React.FC = () => {
+    const [chat, setChat] = useState<[string, string][]>([])
     const [message, setMessage] = useState<string>('')
     const [isMobileView, setIsMobileView] = useState(isMobile.any())
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [lastMessageTimes, setLastMessageTimes] = useState<number[]>([])
     const messagesContainerRef = useRef<HTMLDivElement | null>(null)
 
-
     const sendMessage = () => {
-        setchat([...chat, message])
+        if (message.trim().length === 0) return;
+
+        if (lastMessageTimes.filter(time => Date.now() - time < 5000).length >= 3)
+        {
+            setChat([...chat, ["SYSTEM", "Vous envoyez trop de messages, veuillez patienter quelques secondes..."]]);
+            return;
+        }
+
+        lastMessageTimes.push(Date.now())
+        if (lastMessageTimes.length > 3)
+            lastMessageTimes.shift()
+
+        setLastMessageTimes(lastMessageTimes)
+
+
+        // Send message to websocket
+        setChat([...chat, ["test.user", message]]);
         setMessage('')
+        setIsExpanded(true)
+    }
+
+    const toggleShow = () => {
+        setIsExpanded(!isExpanded);
     }
 
     useEffect(() => {
@@ -41,13 +59,15 @@ const ChatComponent: React.FC<ChatComponentProps> = ({userEmail}) => {
     
     return (
         <div className={chatStyles.chat}>
-            <div className={chatStyles.messages} ref={messagesContainerRef}>
-                {chat.map((message, index) => (
-                <div key={index}> <span>{userEmail}:</span> {message}</div>))}
+            <div className={`${chatStyles.messages} ${isExpanded && chatStyles.expanded}`} ref={messagesContainerRef}>
+                {chat.map((chatMessage, index) => (
+                    <div key={index}> <span>{chatMessage[0]}:</span> {chatMessage[1]}</div>)
+                )}
             </div>
             <div className={chatStyles.input}>
-                <input type="text" value={message} onChange={(e) => setMessage(e.target.value)} placeholder='Ecris un message...' />
+                <input type="text" value={message} onChange={(e) => setMessage(e.target.value)} placeholder='Ecris un message...' onKeyDown={(e) => e.key === 'Enter' && sendMessage()} />
                 <button onClick={sendMessage}><img src="/src/assets/paper-plane.svg" alt="logo-avion-papier" /></button>
+                {!isMobileView && <button onClick={toggleShow} className={isExpanded ? chatStyles.reversed : undefined}><img src="/src/assets/chevron-down.svg" alt="chevron-down" /></button>}
             </div>
         </div>
     );
diff --git a/frontend/src/styles/chatDesktop.module.css b/frontend/src/styles/chatDesktop.module.css
index 935f2cb..100e0f3 100644
--- a/frontend/src/styles/chatDesktop.module.css
+++ b/frontend/src/styles/chatDesktop.module.css
@@ -6,21 +6,25 @@ body {
 .chat {
     display: flex;
     flex-direction: column;
-    max-height: 150px ;
     width: 90%;
     max-width: 300px;
     background-color: rgba(255, 255, 255, 0.75);
-    border-radius: 16px 16px 0 0;
-    padding-top: 1em;
+    border-radius: 16px;
     position: fixed;
-    bottom: 0;
-    margin: 0 0 2.5em 1em;
+    bottom: 1em;
+    left: 1em;
 }
 
 .messages {
     overflow: auto;
+    max-height: 0px;
     padding-inline: 1em;
-    margin-bottom: 2em;
+    transition: all 0.3s ease-in-out;
+}
+
+.expanded {
+    max-height: 270px;
+    padding-block: 1em;
 }
 
 span {
@@ -33,13 +37,10 @@ span {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 1em;
+    gap: 1em;
     padding-right: 1em;
     background-color: #ffffff;
     border-radius: 16px;
-    position: fixed;
-    bottom: 0;
-    left: 0;
 }
 
 .input input {
@@ -57,11 +58,17 @@ span {
 .input button {
     border: none;
     background-color: #ffffff;
+    height: 16px;
+    width: 16px;
 }
 
+.reversed {
+    transform: rotate(180deg);
+}
 
 ::-webkit-scrollbar {
     width: 10px;
+    height: 10px;
 }
   
 ::-webkit-scrollbar-track {