admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

fix nextjs hydration error on sign-up close window page

Browse source
This commit is contained in:
MarconLP 2023-07-13 13:45:18 +02:00
parent ac0c735c90
commit ce4911049e
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
1 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/pages/videos.tsx
View file

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