fix/#117 add time and date in messages

cspell.json

@@ -3,6 +3,7 @@
   "language": "en,es",
   "words": [
     "Aceptar",
+    "Enviado",
     "azordev",
     "Empecemos",
     "Codacy",

src/pages/Chat/Chat.styled.jsx

@@ -129,7 +129,7 @@ export const MessageRow = styled.div`
 export const MessageBox = styled.div`
   ${[ p({ all: '10px' }), rounded({ all: '15px' }), size({ width: '40vw' }), text.base, text.gray09, bg.gray ]}
   display: inline-block;
-  width: max-content;
+  width: auto;
   min-width: 80px;
   max-width: 100%;
   overflow-wrap: break-word;
@@ -140,6 +140,18 @@ export const MessageBox = styled.div`
   }
 `
 
+export const MessageBoxDate = styled.div`
+  font-size: 0.8rem;
+  margin-top: 10px;
+  color: var(--light-gray-11);
+`
+
+export const MessageAndUpdatedBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: ${ props => props.client ? 'end' : 'start'};;
+`
+
 export const Avatar = styled.img`
   width: 40px;
   height: auto;

src/pages/Chat/index.jsx

@@ -1,7 +1,7 @@
 import { useParams, useHistory } from 'react-router-dom'
 import deliveryManWhite from '../../assets/delivery-chat-user.png'
 import userIcon from '../../assets/user_icon.png'
-import { FooterChatInput, MessageBox, Avatar, MessageRow } from './Chat.styled'
+import { FooterChatInput, MessageBox, MessageAndUpdatedBox, MessageBoxDate, Avatar, MessageRow } from './Chat.styled'
 import { useLatestMessages, InsertClientMessage } from '../../hooks'
 import { Input } from '../../components'
 import sendChat from '../../assets/image_send_chat.png'
@@ -16,6 +16,12 @@ const Chat = () => {
   if (!id) {
     history.push('/check')
   }
+
+  const formatDate = (dateString) => {
+    const options = {hour: '2-digit', minute: '2-digit'}
+    return `Enviado ${new Date(dateString).toLocaleTimeString("es-CO", options)}`
+  }
+
   const { LatestMessages = { chats: [] } } = useLatestMessages(id)
   const { loading, insertClientMessage } = InsertClientMessage()
   const [ message, setMessage ] = useState('')
@@ -30,15 +36,21 @@ const Chat = () => {
           <MessageRow client key={`chat-message-${packageId}`}>
             {/* @ts-ignore */}
             <Avatar src={userIcon} type={'client'} />
-            <MessageBox>{msg.last_client_message}</MessageBox>
+            <MessageAndUpdatedBox client>
+              <MessageBox>{msg.last_client_message}</MessageBox>
+              <MessageBoxDate>{formatDate(msg.updated_at)}</MessageBoxDate>
+              </MessageAndUpdatedBox>  
           </MessageRow>
         )
       } else {
         return (
           <MessageRow key={`chat-message-${packageId}`}>
             {/* @ts-ignore */}
             <Avatar src={deliveryManWhite} type={'dasher'} />
-            <MessageBox>{msg.last_dasher_message}</MessageBox>
+            <MessageAndUpdatedBox>
+              <MessageBox>{msg.last_dasher_message}</MessageBox>
+              <MessageBoxDate>{formatDate(msg.updated_at)}</MessageBoxDate>
+              </MessageAndUpdatedBox>  
           </MessageRow>
         )
       }

src/styles/colors.js

@@ -15,6 +15,7 @@ const colors = {
   yellow07: '#FDC12A',
   yellow06: '#FFCC00',
   yellow05: '#FFD119',
+  gray11: '#8F8B8B',
   gray10: '#000000',
   gray09: '#334A5E',
   gray08: '#40596B',

src/styles/theme.js

@@ -27,6 +27,7 @@ const Theme = ({ children }) => (
         --light-gray-0: ${theme.colors.gray00};
         --light-gray-1: ${theme.colors.gray01};
         --light-gray-2: ${theme.colors.gray04};
+        --light-gray-11: ${theme.colors.gray11};
         --light-red-1: ${theme.colors.red01};
         --white: white;
         --danger: ${theme.colors.gray09};