fix: fix hydration errors in dashboard
This commit is contained in:
parent
9f240d9595
commit
e86e1ece9c
@ -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 />}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user