svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: wrap the newsletter unsubscription form in a Suspense component
Some checks failed
Deploy Next.js application / deploy (push) Failing after 10m4s
Details

Browse source
This commit is contained in:
Dorian Niemiec 2024-12-10 21:04:36 +01:00
parent e27af5ffc1
commit bd80881e27
1 changed files with 39 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
app/(root)/unsubscribe/page.tsx
View file

@ -1,14 +1,12 @@
"use client"; "use client";
import Newsletter from "@/components/shared/Newsletter"; import Newsletter from "@/components/shared/Newsletter";
import React, { useState } from "react"; import React, { Suspense, useState } from "react";
import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation"; import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import HCaptcha from "@hcaptcha/react-hcaptcha"; import HCaptcha from "@hcaptcha/react-hcaptcha";
const UnsubscribePage = (props: { const UnsubscribeForm = () => {
searchParams: Promise<{ id: string | undefined }>;
}) => {
const searchParams = useSearchParams() as ReadonlyURLSearchParams; const searchParams = useSearchParams() as ReadonlyURLSearchParams;
const unsubscribeId = searchParams.has("id") const unsubscribeId = searchParams.has("id")
? searchParams.get("id") ? searchParams.get("id")
@ -57,17 +55,6 @@ const UnsubscribePage = (props: {
}; };
return ( return (
<section
id="vulnerabilities"
className="wrapper container py-24 md:py-28 gap-2 flex flex-col"
>
<h1 className="text-3xl md:text-5xl pb-1 md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
Unsubscribe from newsletter
</h1>
<p className="md:text-lg text-muted-foreground text-start mb-6">
Are you sure to unsubscribe from the newsletter? You will no longer
receive updates from the newsletter.
</p>
<form <form
className="mx-auto text-center" className="mx-auto text-center"
onSubmit={(e: React.FormEvent) => { onSubmit={(e: React.FormEvent) => {
@ -92,6 +79,31 @@ const UnsubscribePage = (props: {
/> />
)} )}
</form> </form>
);
};
const UnsubscribePage = () => {
return (
<section
id="vulnerabilities"
className="wrapper container py-24 md:py-28 gap-2 flex flex-col"
>
<h1 className="text-3xl md:text-5xl pb-1 md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
Unsubscribe from newsletter
</h1>
<p className="md:text-lg text-muted-foreground text-start mb-6">
Are you sure to unsubscribe from the newsletter? You will no longer
receive updates from the newsletter.
</p>
<Suspense
fallback={
<p className="md:text-lg text-muted-foreground text-start mb-6">
Loading unsubscription form...
</p>
}
>
<UnsubscribeForm />
</Suspense>
</section> </section>
); );
}; };