From c520a329d25a7c8b66cf8c21372cabebca5adb9e Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sat, 9 Dec 2023 01:25:02 -0800
Subject: [PATCH] Fixed activity log timestamp.

---
 package.json                                          | 1 +
 src/app/(main)/websites/[id]/realtime/Realtime.tsx    | 2 +-
 src/app/(main)/websites/[id]/realtime/RealtimeLog.tsx | 6 +++---
 yarn.lock                                             | 7 +++++++
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index a158696c..782e039b 100644
--- a/package.json
+++ b/package.json
@@ -129,6 +129,7 @@
     "@types/node": "^20.9.0",
     "@types/react": "^18.2.41",
     "@types/react-dom": "^18.2.17",
+    "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "cross-env": "^7.0.3",
diff --git a/src/app/(main)/websites/[id]/realtime/Realtime.tsx b/src/app/(main)/websites/[id]/realtime/Realtime.tsx
index 6de65d7a..285d9845 100644
--- a/src/app/(main)/websites/[id]/realtime/Realtime.tsx
+++ b/src/app/(main)/websites/[id]/realtime/Realtime.tsx
@@ -95,7 +95,7 @@ export function Realtime({ websiteId }) {
   return (
     <>
       <WebsiteHeader websiteId={websiteId} />
-      <RealtimeHeader data={currentData} />
+      <RealtimeHeader data={realtimeData} />
       <RealtimeChart className={styles.chart} data={realtimeData} unit="minute" />
       <Grid>
         <GridRow columns="one-two">
diff --git a/src/app/(main)/websites/[id]/realtime/RealtimeLog.tsx b/src/app/(main)/websites/[id]/realtime/RealtimeLog.tsx
index e33320ec..7cae0abc 100644
--- a/src/app/(main)/websites/[id]/realtime/RealtimeLog.tsx
+++ b/src/app/(main)/websites/[id]/realtime/RealtimeLog.tsx
@@ -8,11 +8,11 @@ import useLocale from 'components/hooks/useLocale';
 import useCountryNames from 'components/hooks/useCountryNames';
 import { BROWSERS } from 'lib/constants';
 import { stringToColor } from 'lib/format';
-import { formatDate } from 'lib/date';
 import { safeDecodeURI } from 'next-basics';
 import Icons from 'components/icons';
 import styles from './RealtimeLog.module.css';
 import useMessages from 'components/hooks/useMessages';
+import { format } from 'date-fns';
 
 const TYPE_ALL = 'all';
 const TYPE_PAGEVIEW = 'pageview';
@@ -50,7 +50,7 @@ export function RealtimeLog({ data, websiteDomain }) {
     },
   ];
 
-  const getTime = ({ createdAt }) => formatDate(new Date(createdAt), 'pp', locale);
+  const getTime = ({ timestamp }) => format(timestamp, 'h:mm:ss');
 
   const getColor = ({ id, sessionId }) => stringToColor(sessionId || id);
 
@@ -146,7 +146,7 @@ export function RealtimeLog({ data, websiteDomain }) {
       <div className={styles.body}>
         {logs?.length === 0 && <Empty />}
         {logs?.length > 0 && (
-          <FixedSizeList height={500} itemCount={logs.length} itemSize={50}>
+          <FixedSizeList width="100%" height={500} itemCount={logs.length} itemSize={50}>
             {Row}
           </FixedSizeList>
         )}
diff --git a/yarn.lock b/yarn.lock
index bdb0d484..1ecdaaf3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2431,6 +2431,13 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-window@^1.8.8":
+  version "1.8.8"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.8.tgz#c20645414d142364fbe735818e1c1e0a145696e3"
+  integrity sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@16 || 17 || 18":
   version "18.2.30"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.30.tgz#b84f786864fc46f18545364a54d5e1316308e59b"