From bf7e3185de1e24f10009695b8a9dbc35ae275769 Mon Sep 17 00:00:00 2001 From: giancarlo Date: Tue, 4 Jun 2024 01:03:57 +0700 Subject: [PATCH] Refactor cache functions to use explicit loaders The commit refactors the previous implementation of using cache functions across several modules. They are now explicitly defined as loaders to improve readability and maintain a consistent style. This prevents the cache function calls from getting too nested and difficult to understand, especially in asynchronous cases. Additionally, the user session related hooks are deleted which were not used anymore. --- apps/web/app/(marketing)/blog/[slug]/page.tsx | 6 ++- .../app/(marketing)/docs/[...slug]/page.tsx | 8 ++-- .../docs/_lib/server/docs.loader.ts | 11 ++++- apps/web/app/admin/accounts/[id]/page.tsx | 6 ++- .../(user)/_lib/server/load-user-workspace.ts | 6 ++- .../personal-account-billing-page.loader.ts | 8 +++- .../team-account-billing-page.loader.ts | 10 ++++- .../server/team-account-workspace.loader.ts | 6 ++- .../server/loaders/admin-dashboard.loader.ts | 6 ++- .../src/hooks/use-auth-change-listener.ts | 3 -- .../supabase/src/hooks/use-user-session.ts | 41 ------------------- 11 files changed, 48 insertions(+), 63 deletions(-) delete mode 100644 packages/supabase/src/hooks/use-user-session.ts diff --git a/apps/web/app/(marketing)/blog/[slug]/page.tsx b/apps/web/app/(marketing)/blog/[slug]/page.tsx index a50e78ab8..cca7f13d5 100644 --- a/apps/web/app/(marketing)/blog/[slug]/page.tsx +++ b/apps/web/app/(marketing)/blog/[slug]/page.tsx @@ -10,11 +10,13 @@ import { withI18n } from '~/lib/i18n/with-i18n'; import { Post } from '../../blog/_components/post'; -const getPostBySlug = cache(async (slug: string) => { +const getPostBySlug = cache(postLoader); + +async function postLoader(slug: string) { const client = await createCmsClient(); return client.getContentItemBySlug({ slug, collection: 'posts' }); -}); +} export async function generateMetadata({ params, diff --git a/apps/web/app/(marketing)/docs/[...slug]/page.tsx b/apps/web/app/(marketing)/docs/[...slug]/page.tsx index 7b183c74e..484485d21 100644 --- a/apps/web/app/(marketing)/docs/[...slug]/page.tsx +++ b/apps/web/app/(marketing)/docs/[...slug]/page.tsx @@ -12,11 +12,13 @@ import { SitePageHeader } from '../../_components/site-page-header'; import styles from '../../blog/_components/html-renderer.module.css'; import { DocsCards } from '../_components/docs-cards'; -const getPageBySlug = cache(async (slug: string) => { +const getPageBySlug = cache(pageLoader); + +async function pageLoader(slug: string) { const client = await createCmsClient(); - return client.getContentItemBySlug({ slug, collection: 'documentation' }); -}); + return client.getContentItemBySlug({ slug, collection: 'pages' }); +} interface PageParams { params: { diff --git a/apps/web/app/(marketing)/docs/_lib/server/docs.loader.ts b/apps/web/app/(marketing)/docs/_lib/server/docs.loader.ts index d9e4be4d2..cc59c4c3c 100644 --- a/apps/web/app/(marketing)/docs/_lib/server/docs.loader.ts +++ b/apps/web/app/(marketing)/docs/_lib/server/docs.loader.ts @@ -2,7 +2,14 @@ import { cache } from 'react'; import { createCmsClient } from '@kit/cms'; -export const getDocs = cache(async (language: string | undefined) => { +/** + * @name getDocs + * @description Load the documentation pages. + * @param language + */ +export const getDocs = cache(docsLoader); + +async function docsLoader(language: string | undefined) { const cms = await createCmsClient(); const { items: pages } = await cms.getContentItems({ @@ -12,4 +19,4 @@ export const getDocs = cache(async (language: string | undefined) => { }); return pages; -}); +} diff --git a/apps/web/app/admin/accounts/[id]/page.tsx b/apps/web/app/admin/accounts/[id]/page.tsx index 086b2580a..93e4105f9 100644 --- a/apps/web/app/admin/accounts/[id]/page.tsx +++ b/apps/web/app/admin/accounts/[id]/page.tsx @@ -31,7 +31,9 @@ async function AccountPage({ params }: Params) { export default AdminGuard(AccountPage); -const loadAccount = cache(async (id: string) => { +const loadAccount = cache(accountLoader); + +async function accountLoader(id: string) { const client = getSupabaseServerComponentClient({ admin: true, }); @@ -47,4 +49,4 @@ const loadAccount = cache(async (id: string) => { } return data; -}); +} diff --git a/apps/web/app/home/(user)/_lib/server/load-user-workspace.ts b/apps/web/app/home/(user)/_lib/server/load-user-workspace.ts index d86b17356..8ddca670c 100644 --- a/apps/web/app/home/(user)/_lib/server/load-user-workspace.ts +++ b/apps/web/app/home/(user)/_lib/server/load-user-workspace.ts @@ -18,7 +18,9 @@ export type UserWorkspace = Awaited>; * Load the user workspace data. It's a cached per-request function that fetches the user workspace data. * It can be used across the server components to load the user workspace data. */ -export const loadUserWorkspace = cache(async () => { +export const loadUserWorkspace = cache(workspaceLoader); + +async function workspaceLoader() { const client = getSupabaseServerComponentClient(); const api = createAccountsApi(client); @@ -45,4 +47,4 @@ export const loadUserWorkspace = cache(async () => { workspace, user, }; -}); +} diff --git a/apps/web/app/home/(user)/billing/_lib/server/personal-account-billing-page.loader.ts b/apps/web/app/home/(user)/billing/_lib/server/personal-account-billing-page.loader.ts index d1cdb80b9..7c9f1139d 100644 --- a/apps/web/app/home/(user)/billing/_lib/server/personal-account-billing-page.loader.ts +++ b/apps/web/app/home/(user)/billing/_lib/server/personal-account-billing-page.loader.ts @@ -28,7 +28,11 @@ const BILLING_MODE = z * @returns The subscription data or the orders data and the billing customer ID. * This function is cached per-request. */ -export const loadPersonalAccountBillingPageData = cache((userId: string) => { +export const loadPersonalAccountBillingPageData = cache( + personalAccountBillingPageDataLoader, +); + +function personalAccountBillingPageDataLoader(userId: string) { const client = getSupabaseServerComponentClient(); const api = createAccountsApi(client); @@ -40,4 +44,4 @@ export const loadPersonalAccountBillingPageData = cache((userId: string) => { const customerId = api.getCustomerId(userId); return Promise.all([data, customerId]); -}); +} diff --git a/apps/web/app/home/[account]/_lib/server/team-account-billing-page.loader.ts b/apps/web/app/home/[account]/_lib/server/team-account-billing-page.loader.ts index b685ef0c2..16beda856 100644 --- a/apps/web/app/home/[account]/_lib/server/team-account-billing-page.loader.ts +++ b/apps/web/app/home/[account]/_lib/server/team-account-billing-page.loader.ts @@ -22,7 +22,13 @@ const BILLING_MODE = z .default('subscription') .parse(process.env.BILLING_MODE); -export const loadTeamAccountBillingPage = cache((accountId: string) => { +/** + * @name loadTeamAccountBillingPage + * @description Load the team account billing page data for the given account. + */ +export const loadTeamAccountBillingPage = cache(teamAccountBillingPageLoader); + +function teamAccountBillingPageLoader(accountId: string) { const client = getSupabaseServerComponentClient(); const api = createAccountsApi(client); @@ -34,4 +40,4 @@ export const loadTeamAccountBillingPage = cache((accountId: string) => { const customerId = api.getCustomerId(accountId); return Promise.all([data, customerId]); -}); +} diff --git a/apps/web/app/home/[account]/_lib/server/team-account-workspace.loader.ts b/apps/web/app/home/[account]/_lib/server/team-account-workspace.loader.ts index f41ccf31b..9154fc87e 100644 --- a/apps/web/app/home/[account]/_lib/server/team-account-workspace.loader.ts +++ b/apps/web/app/home/[account]/_lib/server/team-account-workspace.loader.ts @@ -23,7 +23,9 @@ export type TeamAccountWorkspace = Awaited< * * @param accountSlug */ -export const loadTeamWorkspace = cache(async (accountSlug: string) => { +export const loadTeamWorkspace = cache(workspaceLoader); + +async function workspaceLoader(accountSlug: string) { const client = getSupabaseServerComponentClient(); const api = createTeamAccountsApi(client); @@ -48,4 +50,4 @@ export const loadTeamWorkspace = cache(async (accountSlug: string) => { ...workspace.data, user, }; -}); +} diff --git a/packages/features/admin/src/lib/server/loaders/admin-dashboard.loader.ts b/packages/features/admin/src/lib/server/loaders/admin-dashboard.loader.ts index 2363b1950..f64f8ec26 100644 --- a/packages/features/admin/src/lib/server/loaders/admin-dashboard.loader.ts +++ b/packages/features/admin/src/lib/server/loaders/admin-dashboard.loader.ts @@ -11,9 +11,11 @@ import { createAdminDashboardService } from '../services/admin-dashboard.service * @description Load the admin dashboard data. * @param params */ -export const loadAdminDashboard = cache(() => { +export const loadAdminDashboard = cache(adminDashboardLoader); + +function adminDashboardLoader() { const client = getSupabaseServerComponentClient({ admin: true }); const service = createAdminDashboardService(client); return service.getDashboardData(); -}); +} diff --git a/packages/supabase/src/hooks/use-auth-change-listener.ts b/packages/supabase/src/hooks/use-auth-change-listener.ts index 3364286f7..c9083fd10 100644 --- a/packages/supabase/src/hooks/use-auth-change-listener.ts +++ b/packages/supabase/src/hooks/use-auth-change-listener.ts @@ -7,7 +7,6 @@ import { usePathname, useRouter } from 'next/navigation'; import { useQueryClient } from '@tanstack/react-query'; import { useSupabase } from './use-supabase'; -import { useRevalidateUserSession } from './use-user-session'; /** * @name PRIVATE_PATH_PREFIXES @@ -30,7 +29,6 @@ export function useAuthChangeListener({ const client = useSupabase(); const pathName = usePathname(); const router = useRouter(); - const revalidateUserSession = useRevalidateUserSession(); const queryClient = useQueryClient(); useEffect(() => { @@ -61,7 +59,6 @@ export function useAuthChangeListener({ }, [ client.auth, router, - revalidateUserSession, pathName, appHomePath, privatePathPrefixes, diff --git a/packages/supabase/src/hooks/use-user-session.ts b/packages/supabase/src/hooks/use-user-session.ts deleted file mode 100644 index d671c5e4e..000000000 --- a/packages/supabase/src/hooks/use-user-session.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { useCallback } from 'react'; - -import type { Session } from '@supabase/supabase-js'; - -import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'; - -import { useSupabase } from './use-supabase'; - -const queryKey = ['supabase:session']; - -export function useUserSession(initialSession?: Session | null) { - const supabase = useSupabase(); - - const queryFn = async () => { - const { data, error } = await supabase.auth.getSession(); - - if (error) { - throw error; - } - - return data.session; - }; - - return useSuspenseQuery({ - queryKey, - queryFn, - initialData: initialSession, - }); -} - -export function useRevalidateUserSession() { - const client = useQueryClient(); - - return useCallback( - () => - client.invalidateQueries({ - queryKey, - }), - [client], - ); -}