fix: fix hydration errors in dashboard

This commit is contained in:
javayhu 2025-04-28 12:11:59 +08:00
parent 9f240d9595
commit e86e1ece9c
2 changed files with 16 additions and 3 deletions

View File

@ -17,6 +17,7 @@ import { authClient } from '@/lib/auth-client';
import { Routes } from '@/routes';
import { useTranslations } from 'next-intl';
import type * as React from 'react';
import { useEffect, useState } from 'react';
import { Logo } from '../layout/logo';
import { UpgradeCard } from './upgrade-card';
@ -27,10 +28,12 @@ export function DashboardSidebar({
...props
}: React.ComponentProps<typeof Sidebar>) {
const t = useTranslations();
const sidebarLinks = getSidebarLinks();
const [mounted, setMounted] = useState(false);
const { data: session, isPending } = authClient.useSession();
const currentUser = session?.user;
// console.log('sidebar currentUser:', currentUser);
const sidebarLinks = getSidebarLinks();
const filteredSidebarLinks = sidebarLinks.filter((link) => {
if (link.authorizeOnly) {
return link.authorizeOnly.includes(currentUser?.role || '');
@ -38,6 +41,10 @@ export function DashboardSidebar({
return true;
});
useEffect(() => {
setMounted(true);
}, []);
return (
<Sidebar collapsible="icon" {...props}>
<SidebarHeader>
@ -64,7 +71,7 @@ export function DashboardSidebar({
<SidebarFooter className="flex flex-col gap-4">
{/* Only show UI components when not in loading state */}
{!isPending && (
{!isPending && mounted && (
<>
{/* show upgrade card if user is not a member */}
{currentUser && <UpgradeCard />}

View File

@ -13,15 +13,21 @@ import { LocaleLink } from '@/i18n/navigation';
import { Routes } from '@/routes';
import { SparklesIcon } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { useEffect, useState } from 'react';
export function UpgradeCard() {
const t = useTranslations('Dashboard.upgrade');
const [mounted, setMounted] = useState(false);
const { isLoading, currentPlan, subscription } = usePayment();
useEffect(() => {
setMounted(true);
}, []);
// Don't show the upgrade card if the user has a lifetime membership or a subscription
const isMember = currentPlan?.isLifetime || !!subscription;
if (isLoading || isMember) {
if (!mounted || isLoading || isMember) {
return null;
}