Format message time

Author: craig-dsilva

chat-app/client/src/App.jsx

@@ -17,7 +17,7 @@ const App = () => {
     <div className="container">
       <ul className="messages">
         {messages.map((message) => (
-          <Message message={message.text} time={message.time} />
+          <Message message={message.text} messageTime={message.time} />
         ))}
       </ul>
       <div className="chat-box">

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

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

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;