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 <[email protected]>

* chore: move dev timestamp out of auth protected

* chore: center timestamp

* chore: place timestamp on top

* chore: explain comment

---------

Co-authored-by: Chris Smith <[email protected]>

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;
+  }
+}

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;

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>