Add chatfront

jahongiry · Feb 20, 2024 · f189a00 · f189a00
1 parent 8f3ba7b
commit f189a00
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 13 deletions.
diff --git a/src/pages/chat/Chat.js b/src/pages/chat/Chat.js
@@ -40,7 +40,9 @@ const Chat = () => {
   }, []);
 
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
   }, [messages]);
 
   const handleSubmit = (event) => {

diff --git a/src/pages/chat/charHeader/chatHeader.js b/src/pages/chat/charHeader/chatHeader.js
@@ -4,13 +4,20 @@ import test_image from '../../../img/halmet.png';
 import { Link } from 'react-router-dom';
 
 const ChatHeader = ({ sender }) => {
+  const truncateUsername = (username) => {
+    if (username.length > 15) {
+      return username.substring(0, 15) + '...';
+    }
+    return username;
+  };
+
   return (
     <div className='chat-header'>
       <Link to='../chatfront' className='back-button'>
         <ion-icon name='arrow-back-outline'></ion-icon>
       </Link>
       <div className='user-info'>
-        <div className='username'>{sender[0].username}</div>
+        <div className='username'>{truncateUsername(sender[0].username)}</div>
         <div className='last-seen'>Last seen recently</div>
       </div>
       <div className='user-image'>

diff --git a/src/pages/chat/chatFront/chatFront.css b/src/pages/chat/chatFront/chatFront.css
@@ -27,12 +27,13 @@
 
 .chat-info {
   display: flex;
+  justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
-  background-color: #2d3e50; /* Slightly different shade for chat items */
+  background-color: #2d3e50;
   padding: 0.8rem;
-  border-radius: 5px; /* Optional rounded corners */
-  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
+  border-radius: 5px;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
 }
 
 .user-image {
@@ -43,5 +44,49 @@
 }
 
 .user-name {
-  font-size: 1.2rem;
+  font-size: 1.3rem;
+}
+
+.last-message {
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.554);
+}
+
+.user-name-chat-last {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+
+.last-message-time {
+  align-self: flex-end;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.7rem;
+  margin-top: 2.8rem;
+  margin-right: 1.5rem;
+  position: absolute;
+}
+
+.offer-show {
+  background-color: #3b4e5a;
+  border: 1px solid #2d3e50;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
+  padding: 0.5rem;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  text-align: start;
+  width: max-content;
+  align-self: flex-end;
+  width: 25%;
+}
+
+.offer-show p {
+  margin: 0.2rem;
+  font-size: 0.8rem;
+  color: #d0dfe8;
+  font-weight: bold;
 }
diff --git a/src/pages/chat/chatFront/chatFront.js b/src/pages/chat/chatFront/chatFront.js
@@ -15,7 +15,7 @@ const FrontChat = () => {
   const [selectedChatId, setSelectedChatId] = useState(null);
   const chatsObject = useSelector((state) => state.chat.chats);
   const chatsArray = Object.values(chatsObject);
-
+  console.log(chats);
   useEffect(() => {
     if (Object.keys(chats).length === 0) {
       dispatch(fetchChats());
@@ -29,6 +29,35 @@ const FrontChat = () => {
     });
   };
 
+  const truncateUsername = (username) => {
+    if (username.length > 15) {
+      return username.substring(0, 15) + '...';
+    }
+    return username;
+  };
+
+  const truncateChatFront = (lastChat) => {
+    if (lastChat.length > 30) {
+      return lastChat.substring(0, 30) + '...';
+    }
+    return lastChat;
+  };
+
+  const getMilitaryTime = (dateString) => {
+    if (!dateString || typeof dateString !== 'string') {
+      return 'Invalid Date';
+    }
+    try {
+      const date = new Date(dateString);
+      const hours = date.getHours().toString().padStart(2, '0');
+      const minutes = date.getMinutes().toString().padStart(2, '0');
+
+      return `${hours}:${minutes}`;
+    } catch (e) {
+      console.log({ dateString });
+    }
+  };
+
   if (status === 'loading') {
     return (
       <div>
@@ -57,17 +86,33 @@ const FrontChat = () => {
       </header>
       <div className='chat-list'>
         {chatsArray.map((chat) => (
-          <div
-            key={chat.id}
-            className='chat-info'
-            onClick={() => openChat(chat.id)}
-          >
+          <div className='chat-info' onClick={() => openChat(chat.id)}>
             <img
               src={chat.users[0].image}
               alt={chat.users[0].username}
               className='user-image'
             />
-            <div className='user-name'>{chat.users[0].username}</div>
+            <div className='user-name-chat-last'>
+              <div>
+                <div className='user-name'>
+                  {truncateUsername(chat.users[0].username)}
+                </div>
+                <p className='last-message'>
+                  {truncateChatFront(
+                    chat.messages[chat.messages.length - 1].content
+                  )}
+                </p>
+              </div>
+              <p className='last-message-time'>
+                {getMilitaryTime(
+                  chat.messages[chat.messages.length - 1].created_at
+                )}
+              </p>
+            </div>
+            <div className='offer-show'>
+              <p>LVL: {chat.offer.level}</p>
+              <p>UZS: {chat.offer.cost}</p>
+            </div>
           </div>
         ))}
       </div>