Render timestamps client-side to fix timezone (#58)

* Render timestamps client-side to fix timezone

* Fix compilation error

web/components/client-render.tsx

@@ -0,0 +1,13 @@
+// Adapted from https://stackoverflow.com/a/50884055/1222351
+import { useEffect, useState } from 'react'
+
+export function ClientRender(props: { children: React.ReactNode }) {
+  const { children } = props
+
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return mounted ? <>{children}</> : null
+}

web/components/datetime-tooltip.tsx

@@ -2,6 +2,7 @@ import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
 import advanced from 'dayjs/plugin/advancedFormat'
+import { ClientRender } from './client-render'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -19,13 +20,15 @@ export function DateTimeTooltip(props: {
 
   return (
     <>
-      <span
-        className="tooltip hidden cursor-default sm:inline-block"
-        data-tip={toolTip}
-      >
-        {props.children}
-      </span>
-      <span className="sm:hidden whitespace-nowrap">{props.children}</span>
+      <ClientRender>
+        <span
+          className="tooltip hidden cursor-default sm:inline-block"
+          data-tip={toolTip}
+        >
+          {props.children}
+        </span>
+      </ClientRender>
+      <span className="whitespace-nowrap sm:hidden">{props.children}</span>
     </>
   )
 }