From 4a2251d8b47227d05e77c3b22e377e84e44d5ed0 Mon Sep 17 00:00:00 2001
From: Celine Sarafa <celinesarafa@gmail.com>
Date: Tue, 6 Feb 2024 20:47:48 +0100
Subject: [PATCH] chore: add dev time stamp component (#431)

* chore: add dev time stamp component

* chore: add timestamp formatting

* chore: decrease interval

* Update src/components/dev/DevTimeStamp/DevTimeStamp.scss

Co-authored-by: Chris Smith <1979423+chris13524@users.noreply.github.com>

* chore: move dev timestamp out of auth protected

* chore: center timestamp

* chore: place timestamp on top

* chore: explain comment

---------

Co-authored-by: Chris Smith <1979423+chris13524@users.noreply.github.com>
---
 .../dev/DevTimeStamp/DevTimeStamp.scss        | 15 ++++++
 src/components/dev/DevTimeStamp/index.tsx     | 51 +++++++++++++++++++
 src/main.tsx                                  |  2 +
 3 files changed, 68 insertions(+)
 create mode 100644 src/components/dev/DevTimeStamp/DevTimeStamp.scss
 create mode 100644 src/components/dev/DevTimeStamp/index.tsx

diff --git a/src/components/dev/DevTimeStamp/DevTimeStamp.scss b/src/components/dev/DevTimeStamp/DevTimeStamp.scss
new file mode 100644
index 00000000..06410498
--- /dev/null
+++ b/src/components/dev/DevTimeStamp/DevTimeStamp.scss
@@ -0,0 +1,15 @@
+.DevTimeStamp {
+  color: #888888;
+  position: fixed;
+  width: 100%;
+  top: 0.5em;
+  font-size: 11px;
+  pointer-events: none;
+  z-index: 999;
+
+  span {
+    display: block;
+    width: fit-content;
+    margin: auto;
+  }
+}
diff --git a/src/components/dev/DevTimeStamp/index.tsx b/src/components/dev/DevTimeStamp/index.tsx
new file mode 100644
index 00000000..4c02c800
--- /dev/null
+++ b/src/components/dev/DevTimeStamp/index.tsx
@@ -0,0 +1,51 @@
+import { useContext, useEffect, useState } from 'react';
+import './DevTimeStamp.scss'
+import SettingsContext from '@/contexts/SettingsContext/context';
+
+const getTimeStampFormatted = (rawTimestamp: number) => {
+
+  const timestamp = new Date(rawTimestamp)
+
+  const year = timestamp.getFullYear();
+
+  // Months are zero-indexed
+  const month = (timestamp.getMonth() + 1).toString().padStart(2, '0'); 
+  const day = timestamp.getDate().toString().padStart(2, '0');
+  const hours = timestamp.getHours().toString().padStart(2, '0');
+  const minutes = timestamp.getMinutes().toString().padStart(2, '0');
+  const seconds = timestamp.getSeconds().toString().padStart(2, '0');
+  
+  const timeZone = new Intl.DateTimeFormat('en', { timeZoneName: 'short' }).formatToParts(timestamp).find(part => part.type === 'timeZoneName')!.value;
+
+  const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timeZone}`;
+
+  return formattedDateTime
+
+}
+
+const DevTimeStamp = () => {
+  const [timestamp, setTimestamp] = useState(Date.now())
+  const {isDevModeEnabled} = useContext(SettingsContext)
+
+  useEffect(() => {
+    if(isDevModeEnabled) {
+     const intervalId = setInterval(() => {
+      setTimestamp(Date.now())
+     }, 250)
+
+     return () => clearInterval(intervalId)
+    }
+  }, [setTimestamp, isDevModeEnabled])
+
+  if (!isDevModeEnabled) {
+    return null;
+  }
+
+  return (
+    <div className="DevTimeStamp">
+      <span>{getTimeStampFormatted(timestamp)}</span>
+    </div>
+  )
+}
+
+export default DevTimeStamp;
diff --git a/src/main.tsx b/src/main.tsx
index c50b86a3..3ffa6f0f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -16,6 +16,7 @@ import { initSentry } from '@/utils/sentry'
 import { Modals } from './Modals'
 
 import './index.css'
+import DevTimeStamp from './components/dev/DevTimeStamp'
 
 polyfill()
 initSentry()
@@ -50,6 +51,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         <BrowserRouter>
           <W3iContextProvider>
             <ConfiguredRoutes />
+            <DevTimeStamp />
             <Modals />
           </W3iContextProvider>
         </BrowserRouter>