From 76c4cd6d687358ab605d499c2aef1ccb7847cc32 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 2 Mar 2022 23:51:58 -0800
Subject: [PATCH] Render timestamps client-side to fix timezone (#58)

* Render timestamps client-side to fix timezone

* Fix compilation error
---
 web/components/client-render.tsx    | 13 +++++++++++++
 web/components/datetime-tooltip.tsx | 17 ++++++++++-------
 2 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 web/components/client-render.tsx

diff --git a/web/components/client-render.tsx b/web/components/client-render.tsx
new file mode 100644
index 00000000..a58c90ff
--- /dev/null
+++ b/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
+}
diff --git a/web/components/datetime-tooltip.tsx b/web/components/datetime-tooltip.tsx
index 6b8e5216..69c4521e 100644
--- a/web/components/datetime-tooltip.tsx
+++ b/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>
     </>
   )
 }