fix(build): read URL params via window in guards (avoid useSearchParams prerender error)
Some checks failed
Build and Push Docker Image / build-and-push (push) Has been cancelled
Some checks failed
Build and Push Docker Image / build-and-push (push) Has been cancelled
This commit is contained in:
@@ -2,18 +2,18 @@
|
|||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useRouter, useSearchParams } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import { authApi, wishlistsApi, type Wishlist } from '@/lib/api';
|
import { authApi, wishlistsApi, type Wishlist } from '@/lib/api';
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const params = useSearchParams();
|
|
||||||
const [state, setState] = useState<'checking' | 'guest' | 'none'>('checking');
|
const [state, setState] = useState<'checking' | 'guest' | 'none'>('checking');
|
||||||
const [wishlists, setWishlists] = useState<Wishlist[]>([]);
|
const [wishlists, setWishlists] = useState<Wishlist[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
(async () => {
|
(async () => {
|
||||||
|
const params = new URL(window.location.href).searchParams;
|
||||||
const adm = params.get('adm');
|
const adm = params.get('adm');
|
||||||
const usr = params.get('usr');
|
const usr = params.get('usr');
|
||||||
try {
|
try {
|
||||||
@@ -48,7 +48,7 @@ export default function HomePage() {
|
|||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
return () => { cancelled = true; };
|
return () => { cancelled = true; };
|
||||||
}, [params, router]);
|
}, [router]);
|
||||||
|
|
||||||
if (state === 'checking') {
|
if (state === 'checking') {
|
||||||
return <div className="min-h-screen flex items-center justify-center text-gray-500">Carregando…</div>;
|
return <div className="min-h-screen flex items-center justify-center text-gray-500">Carregando…</div>;
|
||||||
|
|||||||
@@ -1,22 +1,19 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { useSearchParams } from 'next/navigation';
|
|
||||||
import { authApi } from '@/lib/api';
|
import { authApi } from '@/lib/api';
|
||||||
|
|
||||||
export default function AdminGuard({ children }: { children: React.ReactNode }) {
|
export default function AdminGuard({ children }: { children: React.ReactNode }) {
|
||||||
const params = useSearchParams();
|
|
||||||
const [state, setState] = useState<'checking' | 'ok' | 'denied'>('checking');
|
const [state, setState] = useState<'checking' | 'ok' | 'denied'>('checking');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
(async () => {
|
(async () => {
|
||||||
const adm = params.get('adm');
|
const url = new URL(window.location.href);
|
||||||
|
const adm = url.searchParams.get('adm');
|
||||||
try {
|
try {
|
||||||
if (adm) {
|
if (adm) {
|
||||||
await authApi.session({ adm });
|
await authApi.session({ adm });
|
||||||
// strip the param from URL but keep route
|
|
||||||
const url = new URL(window.location.href);
|
|
||||||
url.searchParams.delete('adm');
|
url.searchParams.delete('adm');
|
||||||
window.history.replaceState({}, '', url.toString());
|
window.history.replaceState({}, '', url.toString());
|
||||||
}
|
}
|
||||||
@@ -29,7 +26,7 @@ export default function AdminGuard({ children }: { children: React.ReactNode })
|
|||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
return () => { cancelled = true; };
|
return () => { cancelled = true; };
|
||||||
}, [params]);
|
}, []);
|
||||||
|
|
||||||
if (state === 'checking') return <div className="min-h-screen flex items-center justify-center text-gray-500">Verificando…</div>;
|
if (state === 'checking') return <div className="min-h-screen flex items-center justify-center text-gray-500">Verificando…</div>;
|
||||||
if (state === 'denied') return <div className="min-h-screen flex items-center justify-center text-center px-6">
|
if (state === 'denied') return <div className="min-h-screen flex items-center justify-center text-center px-6">
|
||||||
|
|||||||
@@ -1,23 +1,20 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { useSearchParams } from 'next/navigation';
|
|
||||||
import { authApi } from '@/lib/api';
|
import { authApi } from '@/lib/api';
|
||||||
|
|
||||||
type Status = 'checking' | { kind: 'ok'; guestName: string } | 'denied';
|
type Status = 'checking' | { kind: 'ok'; guestName: string } | 'denied';
|
||||||
|
|
||||||
export default function GuestGuard({ children }: { children: React.ReactNode }) {
|
export default function GuestGuard({ children }: { children: React.ReactNode }) {
|
||||||
const params = useSearchParams();
|
|
||||||
const [status, setStatus] = useState<Status>('checking');
|
const [status, setStatus] = useState<Status>('checking');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
(async () => {
|
(async () => {
|
||||||
const usr = params.get('usr');
|
const usr = new URL(window.location.href).searchParams.get('usr');
|
||||||
try {
|
try {
|
||||||
if (usr) {
|
if (usr) {
|
||||||
await authApi.session({ usr });
|
await authApi.session({ usr });
|
||||||
// user said leaving the token in URL is fine — do NOT strip
|
|
||||||
}
|
}
|
||||||
const who = await authApi.whoami();
|
const who = await authApi.whoami();
|
||||||
if (cancelled) return;
|
if (cancelled) return;
|
||||||
@@ -31,7 +28,7 @@ export default function GuestGuard({ children }: { children: React.ReactNode })
|
|||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
return () => { cancelled = true; };
|
return () => { cancelled = true; };
|
||||||
}, [params]);
|
}, []);
|
||||||
|
|
||||||
if (status === 'checking') return <div className="min-h-screen flex items-center justify-center text-gray-500">Verificando convite…</div>;
|
if (status === 'checking') return <div className="min-h-screen flex items-center justify-center text-gray-500">Verificando convite…</div>;
|
||||||
if (status === 'denied') return <div className="min-h-screen flex items-center justify-center text-center px-6">
|
if (status === 'denied') return <div className="min-h-screen flex items-center justify-center text-center px-6">
|
||||||
|
|||||||
Reference in New Issue
Block a user