Merge pull request #3 from craig-dsilva/message-time

Message Time

Author: craig-dsilva

chat-app/client/src/App.css

@@ -2,10 +2,6 @@
   list-style: none;
 }
 
-.message {
-  margin-bottom: 0.5em;
-}
-
 .chat-box {
   position: fixed;
   bottom: 0;

chat-app/client/src/App.jsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import useSocket from "./hooks/useSocket";
+import Message from "./components/Message";
 import "./App.css";
 
 const App = () => {
@@ -15,10 +16,8 @@ const App = () => {
   return (
     <div className="container">
       <ul className="messages">
-        {messages.map((message, i) => (
-          <li className="message" key={i}>
-            {message.text}
-          </li>
+        {messages.map((message) => (
+          <Message message={message.text} messageTime={message.time} />
         ))}
       </ul>
       <div className="chat-box">

chat-app/client/src/components/Message.css

@@ -0,0 +1,19 @@
+.message {
+  border-radius: 8px;
+  border: 1px solid #777;
+  padding: 1em;
+  margin-bottom: 0.5em;
+}
+
+.message-text,
+.message-time {
+  margin: 0;
+}
+
+.message-text {
+  font-size: large;
+}
+
+.message-time {
+  font-size: small;
+}

chat-app/client/src/components/Message.jsx

@@ -0,0 +1,15 @@
+import formatTime from "../utils/formatTime";
+import "./Message.css"
+
+const Message = ({ message, messageTime }) => {
+  const { date, time } = formatTime(messageTime);
+
+  return (
+    <div className="message">
+      <p className="message-text">{message}</p>
+      <p className="message-time">{`${date} ${time}`}</p>
+    </div>
+  );
+};
+
+export default Message;

chat-app/client/src/utils/formatTime.js

@@ -0,0 +1,8 @@
+const formatTime = (messageTime) => {
+  const dt = new Date(messageTime);
+  const date = new Intl.DateTimeFormat("en-GB").format(new Date(dt));
+  const time = new Date(messageTime).toTimeString().split(" ")[0];
+  return { date, time };
+};
+
+export default formatTime;