♻️ Refactor chat component and add chevron-down icon

La-404-Devinci · Feb 28, 2024 · 6df01b3 · 6df01b3
1 parent 5b0ab53
commit 6df01b3
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 23 deletions.
diff --git 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
diff --git 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
@@ -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 {