From 334a69386d54da3505b5e725c44559c5f4303f53 Mon Sep 17 00:00:00 2001
From: Ahmad Karlam <ahmad.karlam@gmail.com>
Date: Thu, 1 Oct 2020 16:11:43 +0700
Subject: [PATCH 1/7] Add timestamp to title chat

---
 webroot/js/components/chat/message.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/webroot/js/components/chat/message.js b/webroot/js/components/chat/message.js
index e208a72dd..3fa246bcf 100644
--- a/webroot/js/components/chat/message.js
+++ b/webroot/js/components/chat/message.js
@@ -13,7 +13,7 @@ export default class Message extends Component {
     const { type } = message;
 
     if (type === SOCKET_MESSAGE_TYPES.CHAT) {
-      const { image, author, body } = message;
+      const { image, author, body, timestamp } = message;
       const formattedMessage = formatMessageText(body, username);
       const avatar = image || generateAvatar(author);
 
@@ -35,6 +35,7 @@ export default class Message extends Component {
               </div>
               <div
                 class="message-text text-gray-300 font-normal overflow-y-hidden"
+                title=${timestamp}
                 dangerouslySetInnerHTML=${
                   { __html: formattedMessage }
                 }

From 63a757ef2326b08307c3f2db6fc54d81d0cd8fb0 Mon Sep 17 00:00:00 2001
From: Ahmad Karlam <ahmad.karlam@gmail.com>
Date: Sat, 3 Oct 2020 20:29:29 +0700
Subject: [PATCH 2/7] Use moment js for diff and format date

---
 webroot/index.html                    |  2 ++
 webroot/js/components/chat/message.js | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/webroot/index.html b/webroot/index.html
index 04eb34aba..231b710fb 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -35,6 +35,8 @@
     <script src="//unpkg.com/showdown/dist/showdown.min.js" defer></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js" defer></script>
 
+    <!-- moment js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
 
     <link href="./styles/video.css" rel="stylesheet" />
     <link href="./styles/chat.css" rel="stylesheet" />
diff --git a/webroot/js/components/chat/message.js b/webroot/js/components/chat/message.js
index 3fa246bcf..bd1d0ca8d 100644
--- a/webroot/js/components/chat/message.js
+++ b/webroot/js/components/chat/message.js
@@ -8,6 +8,16 @@ import { generateAvatar } from '../../utils/helpers.js';
 import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
 
 export default class Message extends Component {
+  formatTimestamp(sentAt) {
+    sentAt = moment(sentAt);
+
+    if (moment().diff(sentAt, 'days') >= 1) {
+      return `${sentAt.format('MMM D HH:mm:ss')}`
+    }
+
+    return sentAt.format("HH:mm:ss");
+  }
+
   render(props) {
     const { message, username } = props;
     const { type } = message;
@@ -20,6 +30,7 @@ export default class Message extends Component {
       const authorColor = messageBubbleColorForString(author);
       const avatarBgColor = { backgroundColor: authorColor };
       const authorTextColor = { color: authorColor };
+
       return (
         html`
           <div class="message flex flex-row items-start p-3">
@@ -35,7 +46,7 @@ export default class Message extends Component {
               </div>
               <div
                 class="message-text text-gray-300 font-normal overflow-y-hidden"
-                title=${timestamp}
+                title=${`Sent at ${this.formatTimestamp(timestamp)}`}
                 dangerouslySetInnerHTML=${
                   { __html: formattedMessage }
                 }

From d27d4a798f259030e8bb27fc716c429e0d495a64 Mon Sep 17 00:00:00 2001
From: Ahmad Karlam <ahmad.karlam@gmail.com>
Date: Sun, 4 Oct 2020 09:01:46 +0700
Subject: [PATCH 3/7] Remove moment js and use standard library date from
 javascript

---
 webroot/index.html                    |  3 ---
 webroot/js/components/chat/message.js | 23 ++++++++++++-----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/webroot/index.html b/webroot/index.html
index 231b710fb..79c199c64 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -35,9 +35,6 @@
     <script src="//unpkg.com/showdown/dist/showdown.min.js" defer></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js" defer></script>
 
-    <!-- moment js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
-
     <link href="./styles/video.css" rel="stylesheet" />
     <link href="./styles/chat.css" rel="stylesheet" />
     <link href="./styles/user-content.css" rel="stylesheet" />
diff --git a/webroot/js/components/chat/message.js b/webroot/js/components/chat/message.js
index bd1d0ca8d..2e5fc7695 100644
--- a/webroot/js/components/chat/message.js
+++ b/webroot/js/components/chat/message.js
@@ -1,21 +1,23 @@
-import { h, Component } from 'https://unpkg.com/preact?module';
+import {Component, h} from 'https://unpkg.com/preact?module';
 import htm from 'https://unpkg.com/htm?module';
-const html = htm.bind(h);
+import {messageBubbleColorForString} from '../../utils/user-colors.js';
+import {formatMessageText} from '../../utils/chat.js';
+import {generateAvatar} from '../../utils/helpers.js';
+import {SOCKET_MESSAGE_TYPES} from '../../utils/websocket.js';
 
-import { messageBubbleColorForString } from '../../utils/user-colors.js';
-import { formatMessageText } from '../../utils/chat.js';
-import { generateAvatar } from '../../utils/helpers.js';
-import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
+const html = htm.bind(h);
 
 export default class Message extends Component {
   formatTimestamp(sentAt) {
-    sentAt = moment(sentAt);
+    sentAt = new Date(sentAt);
 
-    if (moment().diff(sentAt, 'days') >= 1) {
-      return `${sentAt.format('MMM D HH:mm:ss')}`
+    let diffInDays = ((new Date()) - sentAt) / (24 * 3600 * 1000);
+    if (diffInDays >= -1) {
+      return `${sentAt.toLocaleDateString('en-US', {dateStyle: 'medium'})} at ` +
+        sentAt.toLocaleTimeString();
     }
 
-    return sentAt.format("HH:mm:ss");
+    return sentAt.toLocaleTimeString();
   }
 
   render(props) {
@@ -30,7 +32,6 @@ export default class Message extends Component {
       const authorColor = messageBubbleColorForString(author);
       const avatarBgColor = { backgroundColor: authorColor };
       const authorTextColor = { color: authorColor };
-
       return (
         html`
           <div class="message flex flex-row items-start p-3">

From 2abde9186c87cf7c691b07e9241f783c9a568570 Mon Sep 17 00:00:00 2001
From: Ahmad Karlam <ahmad.karlam@gmail.com>
Date: Sun, 4 Oct 2020 09:08:05 +0700
Subject: [PATCH 4/7] refactoring

---
 webroot/js/components/chat/message.js | 26 +++++++-------------------
 webroot/js/utils/chat.js              | 12 ++++++++++++
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/webroot/js/components/chat/message.js b/webroot/js/components/chat/message.js
index 2e5fc7695..317a9006a 100644
--- a/webroot/js/components/chat/message.js
+++ b/webroot/js/components/chat/message.js
@@ -1,25 +1,13 @@
-import {Component, h} from 'https://unpkg.com/preact?module';
+import { h, Component } from 'https://unpkg.com/preact?module';
 import htm from 'https://unpkg.com/htm?module';
-import {messageBubbleColorForString} from '../../utils/user-colors.js';
-import {formatMessageText} from '../../utils/chat.js';
-import {generateAvatar} from '../../utils/helpers.js';
-import {SOCKET_MESSAGE_TYPES} from '../../utils/websocket.js';
-
 const html = htm.bind(h);
 
+import { messageBubbleColorForString } from '../../utils/user-colors.js';
+import { formatMessageText, formatTimestamp } from '../../utils/chat.js';
+import { generateAvatar } from '../../utils/helpers.js';
+import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
+
 export default class Message extends Component {
-  formatTimestamp(sentAt) {
-    sentAt = new Date(sentAt);
-
-    let diffInDays = ((new Date()) - sentAt) / (24 * 3600 * 1000);
-    if (diffInDays >= -1) {
-      return `${sentAt.toLocaleDateString('en-US', {dateStyle: 'medium'})} at ` +
-        sentAt.toLocaleTimeString();
-    }
-
-    return sentAt.toLocaleTimeString();
-  }
-
   render(props) {
     const { message, username } = props;
     const { type } = message;
@@ -47,7 +35,7 @@ export default class Message extends Component {
               </div>
               <div
                 class="message-text text-gray-300 font-normal overflow-y-hidden"
-                title=${`Sent at ${this.formatTimestamp(timestamp)}`}
+                title=${`Sent at ${formatTimestamp(timestamp)}`}
                 dangerouslySetInnerHTML=${
                   { __html: formattedMessage }
                 }
diff --git a/webroot/js/utils/chat.js b/webroot/js/utils/chat.js
index e78fd216c..60a43be5a 100644
--- a/webroot/js/utils/chat.js
+++ b/webroot/js/utils/chat.js
@@ -278,3 +278,15 @@ export function convertOnPaste( event = { preventDefault() {} }) {
     document.execCommand('insertText', false, value);
   }
 }
+
+export function formatTimestamp(sentAt) {
+  sentAt = new Date(sentAt);
+
+  let diffInDays = ((new Date()) - sentAt) / (24 * 3600 * 1000);
+  if (diffInDays >= -1) {
+    return `${sentAt.toLocaleDateString('en-US', {dateStyle: 'medium'})} at ` +
+      sentAt.toLocaleTimeString();
+  }
+
+  return sentAt.toLocaleTimeString();
+}

From 1c03e83c3143e6819f7197d2c9d37795697ba7dd Mon Sep 17 00:00:00 2001
From: Ahmad Karlam <ahmad.karlam@gmail.com>
Date: Sun, 4 Oct 2020 09:08:40 +0700
Subject: [PATCH 5/7] Typo

---
 webroot/js/utils/chat.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webroot/js/utils/chat.js b/webroot/js/utils/chat.js
index 60a43be5a..e09bbdd48 100644
--- a/webroot/js/utils/chat.js
+++ b/webroot/js/utils/chat.js
@@ -283,7 +283,7 @@ export function formatTimestamp(sentAt) {
   sentAt = new Date(sentAt);
 
   let diffInDays = ((new Date()) - sentAt) / (24 * 3600 * 1000);
-  if (diffInDays >= -1) {
+  if (diffInDays >= 1) {
     return `${sentAt.toLocaleDateString('en-US', {dateStyle: 'medium'})} at ` +
       sentAt.toLocaleTimeString();
   }

From 8c380f118af3dec5675d27e2a78b84afa0e0b2e2 Mon Sep 17 00:00:00 2001
From: Ahmad Karlam <ahmad.karlam@gmail.com>
Date: Sun, 4 Oct 2020 10:57:45 +0700
Subject: [PATCH 6/7] refactor: declare format timestamp as variable for
 consistency

---
 webroot/js/components/chat/message.js | 3 ++-
 webroot/js/utils/chat.js              | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/webroot/js/components/chat/message.js b/webroot/js/components/chat/message.js
index 317a9006a..c57515088 100644
--- a/webroot/js/components/chat/message.js
+++ b/webroot/js/components/chat/message.js
@@ -16,6 +16,7 @@ export default class Message extends Component {
       const { image, author, body, timestamp } = message;
       const formattedMessage = formatMessageText(body, username);
       const avatar = image || generateAvatar(author);
+      const formattedTimestamp = formatTimestamp(timestamp);
 
       const authorColor = messageBubbleColorForString(author);
       const avatarBgColor = { backgroundColor: authorColor };
@@ -35,7 +36,7 @@ export default class Message extends Component {
               </div>
               <div
                 class="message-text text-gray-300 font-normal overflow-y-hidden"
-                title=${`Sent at ${formatTimestamp(timestamp)}`}
+                title=${formattedTimestamp}
                 dangerouslySetInnerHTML=${
                   { __html: formattedMessage }
                 }
diff --git a/webroot/js/utils/chat.js b/webroot/js/utils/chat.js
index e09bbdd48..638f3964c 100644
--- a/webroot/js/utils/chat.js
+++ b/webroot/js/utils/chat.js
@@ -284,9 +284,9 @@ export function formatTimestamp(sentAt) {
 
   let diffInDays = ((new Date()) - sentAt) / (24 * 3600 * 1000);
   if (diffInDays >= 1) {
-    return `${sentAt.toLocaleDateString('en-US', {dateStyle: 'medium'})} at ` +
+    return `Sent at ${sentAt.toLocaleDateString('en-US', {dateStyle: 'medium'})} at ` +
       sentAt.toLocaleTimeString();
   }
 
-  return sentAt.toLocaleTimeString();
+  return `Sent at ${sentAt.toLocaleTimeString()}`;
 }

From 29ef90e38413aac4c9ced199840b69687c833453 Mon Sep 17 00:00:00 2001
From: Ahmad Karlam <ahmad.karlam@gmail.com>
Date: Sun, 4 Oct 2020 10:58:02 +0700
Subject: [PATCH 7/7] fix: check if date is invalid

---
 webroot/js/utils/chat.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/webroot/js/utils/chat.js b/webroot/js/utils/chat.js
index 638f3964c..f63890ac6 100644
--- a/webroot/js/utils/chat.js
+++ b/webroot/js/utils/chat.js
@@ -281,6 +281,9 @@ export function convertOnPaste( event = { preventDefault() {} }) {
 
 export function formatTimestamp(sentAt) {
   sentAt = new Date(sentAt);
+  if (isNaN(sentAt)) {
+    return '';
+  }
 
   let diffInDays = ((new Date()) - sentAt) / (24 * 3600 * 1000);
   if (diffInDays >= 1) {