From 9dbe79593e4e841ba90f23e4ff47c5c4660968b6 Mon Sep 17 00:00:00 2001 From: javayhu Date: Sat, 5 Apr 2025 08:18:55 +0800 Subject: [PATCH] refactor: rename navigation function and update sidebar component - Renamed `getNavMainLinks` to `getSidebarLinks` for improved clarity in the configuration file. - Updated the `DashboardSidebar` component to utilize the new `getSidebarLinks` function and integrated `useCurrentUser` for user status handling. - Enhanced the sidebar to conditionally display the upgrade card and user profile based on membership status. - Updated comments for better understanding of the code functionality. --- .../dashboard/dashboard-sidebar.tsx | 21 +++++++++++-------- src/components/layout/locale-switcher.tsx | 2 +- src/components/payment/pricing-card.tsx | 7 +++++++ src/components/shared/back-button-small.tsx | 7 +++---- src/config.tsx | 4 ++-- src/db/schema.ts | 2 +- src/lib/auth.ts | 14 +++++++++---- 7 files changed, 36 insertions(+), 21 deletions(-) diff --git a/src/components/dashboard/dashboard-sidebar.tsx b/src/components/dashboard/dashboard-sidebar.tsx index 6321289..b456814 100644 --- a/src/components/dashboard/dashboard-sidebar.tsx +++ b/src/components/dashboard/dashboard-sidebar.tsx @@ -11,20 +11,22 @@ import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'; -import { getNavMainLinks } from '@/config'; +import { getSidebarLinks } from '@/config'; +import { useCurrentUser } from '@/hooks/use-current-user'; import { LocaleLink } from '@/i18n/navigation'; import { useTranslations } from 'next-intl'; import * as React from 'react'; import { Logo } from '../logo'; import { SidebarUpgradeCard } from './sidebar-upgrade-card'; -import { authClient } from '@/lib/auth-client'; export function DashboardSidebar({ ...props }: React.ComponentProps) { const t = useTranslations(); - const mainLinks = getNavMainLinks(); + const sidebarLinks = getSidebarLinks(); + const currentUser = useCurrentUser(); - const { data: session, error } = authClient.useSession(); - const user = session?.user; + // user is a member if they have a lifetime membership or an active subscription + const isMember = currentUser?.lifetimeMember || + (currentUser?.subscriptionId && currentUser?.subscriptionStatus === 'active'); return ( @@ -47,14 +49,15 @@ export function DashboardSidebar({ ...props }: React.ComponentProps - + - {/* TODO: show or hide based on user status */} - + {/* show upgrade card if user is not a member */} + {!isMember && } - {user && } + {/* show user profile if user is logged in */} + {currentUser && } ); diff --git a/src/components/layout/locale-switcher.tsx b/src/components/layout/locale-switcher.tsx index 327cdd8..fe18d64 100644 --- a/src/components/layout/locale-switcher.tsx +++ b/src/components/layout/locale-switcher.tsx @@ -20,7 +20,7 @@ import { useEffect, useTransition } from 'react'; * * Allows users to switch between available locales using a dropdown menu. * - * Based on next-intl's useLocaleRouter and usePathname for locale navigation. + * Based on next-intl's useLocaleRouter and useLocalePathname for locale navigation. * https://next-intl.dev/docs/routing/navigation#userouter */ export default function LocaleSwitcher() { diff --git a/src/components/payment/pricing-card.tsx b/src/components/payment/pricing-card.tsx index 74b906b..9a5bcc5 100644 --- a/src/components/payment/pricing-card.tsx +++ b/src/components/payment/pricing-card.tsx @@ -93,12 +93,15 @@ export function PricingCard({ className )} > + {/* show popular badge if plan is recommended */} {plan.recommended && ( {t('popular')} )} + + {/* show current plan badge if plan is current plan */} {isCurrentPlan && ( @@ -109,6 +112,7 @@ export function PricingCard({ {plan.name} + {/* show price and price label */}
{formattedPrice} @@ -118,6 +122,7 @@ export function PricingCard({ {plan.description} + {/* show action buttons based on plans */} {plan.isFree ? ( currentUser ? ( ); } diff --git a/src/config.tsx b/src/config.tsx index 530ea09..5e1d089 100644 --- a/src/config.tsx +++ b/src/config.tsx @@ -425,14 +425,14 @@ export function getAvatarLinks(): MenuItem[] { } /** - * Get sidebar navigation main links with translations + * Get sidebar navigation links with translations * * NOTICE: used in client components only * * @param t - The translation function * @returns The menu links with translated titles and descriptions */ -export function getNavMainLinks(): NestedMenuItem[] { +export function getSidebarLinks(): NestedMenuItem[] { const t = useTranslations(); return [ diff --git a/src/db/schema.ts b/src/db/schema.ts index 077aa6d..2d60655 100644 --- a/src/db/schema.ts +++ b/src/db/schema.ts @@ -14,9 +14,9 @@ export const user = pgTable("user", { banReason: text('ban_reason'), banExpires: timestamp('ban_expires'), customerId: text('customer_id'), + lifetimeMember: boolean('lifetime_member'), subscriptionId: text('subscription_id'), subscriptionStatus: text('subscription_status'), - lifetimeMember: boolean('lifetime_member') }); export const session = pgTable("session", { diff --git a/src/lib/auth.ts b/src/lib/auth.ts index 2829dcb..a838452 100644 --- a/src/lib/auth.ts +++ b/src/lib/auth.ts @@ -116,17 +116,23 @@ export const auth = betterAuth({ defaultValue: "", input: false, // don't allow user to set customerId }, + lifetimeMember: { + type: "boolean", + required: false, + defaultValue: false, + input: false, // don't allow user to set lifetimeMember + }, subscriptionId: { type: "string", required: false, defaultValue: "", input: false, // don't allow user to set subscriptionId }, - lifetimeMember: { - type: "boolean", + subscriptionStatus: { + type: "string", required: false, - defaultValue: false, - input: false, // don't allow user to set lifetimeMember + defaultValue: "", + input: false, // don't allow user to set subscriptionStatus }, }, // https://www.better-auth.com/docs/concepts/users-accounts#delete-user