From ce4911049e32e5365aa219aefc90b7f9ddb3541d Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Thu, 13 Jul 2023 13:45:18 +0200
Subject: [PATCH] fix nextjs hydration error on sign-up close window page

---
 src/pages/videos.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx
index 130ed67..5cb6278 100644
--- a/src/pages/videos.tsx
+++ b/src/pages/videos.tsx
@@ -18,7 +18,7 @@ import paywallAtom from "~/atoms/paywallAtom";
 import { usePostHog } from "posthog-js/react";
 import Image from "next/image";
 import { useSearchParams } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 const VideoList: NextPage = () => {
   const [, setRecordOpen] = useAtom(recordVideoModalOpen);
@@ -29,6 +29,7 @@ const VideoList: NextPage = () => {
   const { data: videos, isLoading } = api.video.getAll.useQuery();
   const posthog = usePostHog();
   const searchParams = useSearchParams();
+  const [closeWindow, setCloseWindow] = useState<boolean>(false);
 
   if (status === "unauthenticated") {
     void router.replace("/sign-in");
@@ -70,11 +71,13 @@ const VideoList: NextPage = () => {
     }
   };
 
-  const closeWindow =
-    (typeof window !== "undefined" &&
-      window.innerWidth === 500 &&
-      window.innerHeight === 499) ||
-    closeQueryParam === "true";
+  useEffect(() => {
+    const closeWindow =
+      (window.innerWidth === 500 &&
+        (window.innerHeight === 499 || window.innerHeight === 500)) ||
+      closeQueryParam === "true";
+    setCloseWindow(closeWindow);
+  }, [closeQueryParam]);
 
   useEffect(() => {
     if (checkoutCanceledQueryParam === "false" && closeQueryParam === "false") {
@@ -126,8 +129,11 @@ const VideoList: NextPage = () => {
             )}
           </div>
         </div>
-        <div className="flex w-full grow items-start justify-center overflow-auto bg-[#fbfbfb] pt-14">
-          {closeWindow || checkoutCanceledQueryParam === "false" ? (
+        <div
+          className="flex w-full grow items-start justify-center overflow-auto bg-[#fbfbfb] pt-14"
+          suppressHydrationWarning={true}
+        >
+          {closeWindow || checkoutCanceledQueryParam ? (
             <>
               {checkoutCanceledQueryParam === "false" ? (
                 <div className="flex flex-col">