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

fix: replace the "use" hook with "useSearchParams" hook in newsletter unsubscription form
Some checks failed
Deploy Next.js application / deploy (push) Failing after 3m53s
Details

Browse source
This commit is contained in:
Dorian Niemiec 2024-12-10 20:10:11 +01:00
parent 46aa5c3c0c
commit 55f0bdd1bd
1 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
"use client"; "use client";
import Newsletter from "@/components/shared/Newsletter"; import Newsletter from "@/components/shared/Newsletter";
import React, { useState, use } from "react"; import React, { useState } from "react";
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";
@ -8,7 +9,10 @@ import HCaptcha from "@hcaptcha/react-hcaptcha";
const UnsubscribePage = (props: { const UnsubscribePage = (props: {
searchParams: Promise<{ id: string | undefined }>; searchParams: Promise<{ id: string | undefined }>;
}) => { }) => {
const searchParams = use(props.searchParams); const searchParams = useSearchParams() as ReadonlyURLSearchParams;
const unsubscribeId = searchParams.has("id")
? searchParams.get("id")
: undefined;
const { toast } = useToast(); const { toast } = useToast();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [showCaptcha, setShowCaptcha] = useState(false); const [showCaptcha, setShowCaptcha] = useState(false);
@ -23,7 +27,7 @@ const UnsubscribePage = (props: {
try { try {
const res = await fetch("/api/unsubscribe", { const res = await fetch("/api/unsubscribe", {
method: "POST", method: "POST",
body: JSON.stringify({ unsubscribeId: searchParams.id, captchaToken }), body: JSON.stringify({ unsubscribeId: unsubscribeId, captchaToken }),
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
Accept: "application/json" Accept: "application/json"