From 64fca41f8d69ad67f09888fbc2a79ffff4883506 Mon Sep 17 00:00:00 2001 From: giancarlo Date: Thu, 4 Apr 2024 11:02:27 +0800 Subject: [PATCH] Refactor code and update dependencies configuration This commit includes reorganizing dependencies in 'package.json' for better readability. It also refactors code associated with user and personal account data along with animations for AvatarFallback and profile name display. Additionally, the 'next' package version has been updated to '14.2.0-canary.56'. Some changes have been made for minor corrections and enhancements in the scripts. --- .npmrc | 4 +- .../site-header-account-section.tsx | 37 ++++---- apps/web/package.json | 2 +- .../components/personal-account-dropdown.tsx | 6 +- .../update-account-details-form-container.tsx | 6 +- .../update-account-image-container.tsx | 6 +- .../src/hooks/use-personal-account-data.ts | 15 ++-- packages/i18n/src/i18n.settings.ts | 1 + .../src/components/auth-change-listener.tsx | 8 +- packages/supabase/src/hooks/use-user.ts | 6 +- packages/ui/src/makerkit/profile-avatar.tsx | 2 +- pnpm-lock.yaml | 86 +++++++++---------- 12 files changed, 97 insertions(+), 82 deletions(-) diff --git a/.npmrc b/.npmrc index 464b0c0dd..d00517574 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,4 @@ shamefully-hoist=true -peer-legacy-deps=true \ No newline at end of file +peer-legacy-deps=true +dedupe-peer-dependencies=true +use-lockfile-v6=true \ No newline at end of file diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx index 0ba8e8186..37acfa643 100644 --- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx +++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx @@ -10,12 +10,19 @@ import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown import { useSignOut } from '@kit/supabase/hooks/use-sign-out'; import { useUser } from '@kit/supabase/hooks/use-user'; import { Button } from '@kit/ui/button'; -import { If } from '@kit/ui/if'; import { Trans } from '@kit/ui/trans'; import featuresFlagConfig from '~/config/feature-flags.config'; import pathsConfig from '~/config/paths.config'; +const paths = { + home: pathsConfig.app.home, +}; + +const features = { + enableThemeToggle: featuresFlagConfig.enableThemeToggle, +}; + export function SiteHeaderAccountSection({ user, }: React.PropsWithChildren<{ @@ -32,22 +39,18 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) { const signOut = useSignOut(); const user = useUser(props.user); - return ( - }> - {(data) => ( - signOut.mutateAsync()} - /> - )} - - ); + if (user.data) { + return ( + signOut.mutateAsync()} + /> + ); + } + + return ; } function AuthButtons() { diff --git a/apps/web/package.json b/apps/web/package.json index 26c513c92..0348edc0f 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -42,7 +42,7 @@ "edge-csrf": "^1.0.9", "i18next": "^23.10.1", "i18next-resources-to-backend": "^1.2.0", - "next": "14.2.0-canary.55", + "next": "14.2.0-canary.56", "next-sitemap": "^4.2.3", "next-themes": "0.3.0", "react": "18.2.0", diff --git a/packages/features/accounts/src/components/personal-account-dropdown.tsx b/packages/features/accounts/src/components/personal-account-dropdown.tsx index f903450a6..6d5d50d20 100644 --- a/packages/features/accounts/src/components/personal-account-dropdown.tsx +++ b/packages/features/accounts/src/components/personal-account-dropdown.tsx @@ -83,7 +83,11 @@ export function PersonalAccountDropdown({ /> -
+
{displayName} diff --git a/packages/features/accounts/src/components/personal-account-settings/update-account-details-form-container.tsx b/packages/features/accounts/src/components/personal-account-settings/update-account-details-form-container.tsx index 79b4475ba..3495db547 100644 --- a/packages/features/accounts/src/components/personal-account-settings/update-account-details-form-container.tsx +++ b/packages/features/accounts/src/components/personal-account-settings/update-account-details-form-container.tsx @@ -20,11 +20,13 @@ export function UpdateAccountDetailsFormContainer() { return null; } + const userId = user.data.id; + return ( revalidateUserDataQuery(userId)} /> ); } diff --git a/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx b/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx index 0e5df1dcc..39f819490 100644 --- a/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx +++ b/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx @@ -28,11 +28,13 @@ export function UpdateAccountImageContainer() { return ; } + const userId = accountData.data.id; + return ( revalidateUserDataQuery(userId)} /> ); } diff --git a/packages/features/accounts/src/hooks/use-personal-account-data.ts b/packages/features/accounts/src/hooks/use-personal-account-data.ts index 8e8e50cd1..c21b1e490 100644 --- a/packages/features/accounts/src/hooks/use-personal-account-data.ts +++ b/packages/features/accounts/src/hooks/use-personal-account-data.ts @@ -5,14 +5,15 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'; import { useSupabase } from '@kit/supabase/hooks/use-supabase'; import { useUser } from '@kit/supabase/hooks/use-user'; -const queryKey = ['personal-account:data']; - export function usePersonalAccountData() { const client = useSupabase(); const user = useUser(); + const userId = user.data?.id; + + const queryKey = ['account:data', userId]; const queryFn = async () => { - if (!user.data?.id) { + if (!userId) { return null; } @@ -25,7 +26,7 @@ export function usePersonalAccountData() { picture_url `, ) - .eq('primary_owner_user_id', user.data?.id) + .eq('primary_owner_user_id', userId) .eq('is_personal_account', true) .single(); @@ -39,7 +40,7 @@ export function usePersonalAccountData() { return useQuery({ queryKey, queryFn, - enabled: !!user.data?.id, + enabled: !!userId, refetchOnWindowFocus: false, refetchOnMount: false, }); @@ -49,9 +50,9 @@ export function useRevalidatePersonalAccountDataQuery() { const queryClient = useQueryClient(); return useCallback( - () => + (userId: string) => queryClient.invalidateQueries({ - queryKey, + queryKey: ['account:data', userId], }), [queryClient], ); diff --git a/packages/i18n/src/i18n.settings.ts b/packages/i18n/src/i18n.settings.ts index 744fa09a5..eb79c40b8 100644 --- a/packages/i18n/src/i18n.settings.ts +++ b/packages/i18n/src/i18n.settings.ts @@ -1,6 +1,7 @@ import { InitOptions } from 'i18next'; const fallbackLng = 'en'; + export const languages: string[] = [fallbackLng]; export const I18N_COOKIE_NAME = 'lang'; diff --git a/packages/supabase/src/components/auth-change-listener.tsx b/packages/supabase/src/components/auth-change-listener.tsx index cee54703e..8e8eb8067 100644 --- a/packages/supabase/src/components/auth-change-listener.tsx +++ b/packages/supabase/src/components/auth-change-listener.tsx @@ -84,9 +84,13 @@ export function AuthChangeListener({ ); } +/** + * Determines if a given path is a private route. + * + * @param {string} path - The path to check. + */ function isPrivateRoute(path: string) { - // TODO: use config - const prefixes = ['/home', '/admin', '/password-reset']; + const prefixes = ['/home', '/admin', '/join', '/update-password']; return prefixes.some((prefix) => path.startsWith(prefix)); } diff --git a/packages/supabase/src/hooks/use-user.ts b/packages/supabase/src/hooks/use-user.ts index 4e80271c4..b9a6c9b96 100644 --- a/packages/supabase/src/hooks/use-user.ts +++ b/packages/supabase/src/hooks/use-user.ts @@ -1,5 +1,3 @@ -import { useRouter } from 'next/navigation'; - import type { User } from '@supabase/supabase-js'; import { useQuery } from '@tanstack/react-query'; @@ -10,14 +8,13 @@ const queryKey = ['supabase:user']; export function useUser(initialData?: User | null) { const client = useSupabase(); - const router = useRouter(); const queryFn = async () => { const response = await client.auth.getUser(); // this is most likely a session error or the user is not logged in if (response.error) { - throw router.replace('/'); + return null; } if (response.data?.user) { @@ -32,6 +29,5 @@ export function useUser(initialData?: User | null) { queryKey, initialData, refetchOnWindowFocus: false, - refetchOnMount: false, }); } diff --git a/packages/ui/src/makerkit/profile-avatar.tsx b/packages/ui/src/makerkit/profile-avatar.tsx index afa215829..693ad6c44 100644 --- a/packages/ui/src/makerkit/profile-avatar.tsx +++ b/packages/ui/src/makerkit/profile-avatar.tsx @@ -30,7 +30,7 @@ export function ProfileAvatar(props: ProfileAvatarProps) { - + {initials} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5877da7ba..ab9370286 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -97,7 +97,7 @@ importers: version: 5.28.6(react@18.2.0) '@tanstack/react-query-next-experimental': specifier: ^5.28.14 - version: 5.28.14(@tanstack/react-query@5.28.6)(next@14.2.0-canary.55)(react@18.2.0) + version: 5.28.14(@tanstack/react-query@5.28.6)(next@14.2.0-canary.56)(react@18.2.0) '@tanstack/react-table': specifier: ^8.15.3 version: 8.15.3(react-dom@18.2.0)(react@18.2.0) @@ -106,7 +106,7 @@ importers: version: 3.6.0 edge-csrf: specifier: ^1.0.9 - version: 1.0.9(next@14.2.0-canary.55) + version: 1.0.9(next@14.2.0-canary.56) i18next: specifier: ^23.10.1 version: 23.10.1 @@ -114,11 +114,11 @@ importers: specifier: ^1.2.0 version: 1.2.0 next: - specifier: 14.2.0-canary.55 - version: 14.2.0-canary.55(react-dom@18.2.0)(react@18.2.0) + specifier: 14.2.0-canary.56 + version: 14.2.0-canary.56(react-dom@18.2.0)(react@18.2.0) next-sitemap: specifier: ^4.2.3 - version: 4.2.3(next@14.2.0-canary.55) + version: 4.2.3(next@14.2.0-canary.56) next-themes: specifier: 0.3.0 version: 0.3.0(react-dom@18.2.0)(react@18.2.0) @@ -2260,8 +2260,8 @@ packages: resolution: {integrity: sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==} dev: false - /@next/env@14.2.0-canary.55: - resolution: {integrity: sha512-1GajIj+5OxLJ5vN3U6+Csh+SjXMwKAH/rlNpDMXns3G7dpvuMHjCGVY3qv8vF3B/E+sG3p+EQYBJLSQ3fYzFRA==} + /@next/env@14.2.0-canary.56: + resolution: {integrity: sha512-slHTSLx6xovPaNJd6j+SAgK3IZz0D4Go5Vj6hb7/UCYXii1G7xeVgO2EIHdwcuzNaeuug8iN6wvpqS9qjH67cA==} dev: false /@next/eslint-plugin-next@14.1.4: @@ -2288,8 +2288,8 @@ packages: dev: false optional: true - /@next/swc-darwin-arm64@14.2.0-canary.55: - resolution: {integrity: sha512-e+3YUD/t2NZcSN+Bx7tefkTytXxTvXmkqTVwNn9p0jF7gFUxMNv+zSAzO7r64Qs2ZFJj6nrcrPm5fNaAUC11sg==} + /@next/swc-darwin-arm64@14.2.0-canary.56: + resolution: {integrity: sha512-9d162Qzls1eDrw2a7e6IiK5bzBm2LVD5Fh2DP67rggPFqgl15hJMDfjv+vfiCbFhxaA95uv45S48Kj/X2p4Wrg==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -2315,8 +2315,8 @@ packages: dev: false optional: true - /@next/swc-darwin-x64@14.2.0-canary.55: - resolution: {integrity: sha512-wWCmSWuStSF6KhXpsKM5fQikrUUbCW4sLAHmO513Hv3wtDhX+qPg5nDwBwpTMJcWK1bDHN7OY0vSFMxchGbjFQ==} + /@next/swc-darwin-x64@14.2.0-canary.56: + resolution: {integrity: sha512-c3/9yRBCpbt5dF7KzdoI9gH4IMMciAaH1GHf97UOK7cuI7/ctvlld7X1IP+HlMnd8+p3+FHkjySUM/Rm+t//Mw==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -2342,8 +2342,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-gnu@14.2.0-canary.55: - resolution: {integrity: sha512-yoo1wPzKYi50sXDwhYx24mCZBFG6VlnXsApbD3brDCk9vSYgpvJBWSx9CS7V4QaIOmUUPBj6xtBYexFfpb9EmA==} + /@next/swc-linux-arm64-gnu@14.2.0-canary.56: + resolution: {integrity: sha512-Pv83XZ/Fyk6uz6pDA6Uywp2LT7+E9IXJtWgHXp0rsLTjSuyvXz76kEX9ZoQrakhMRF3ki4+f1AXysPkehuazNQ==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -2369,8 +2369,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-musl@14.2.0-canary.55: - resolution: {integrity: sha512-xK/lukjO61uiMl4rth8uvoYR0Kn0tEeM1H32ehq7QU80SSCcM2aVsMJS3OZASpYu8kJZSgZjyH5ck+AzwO+Zwg==} + /@next/swc-linux-arm64-musl@14.2.0-canary.56: + resolution: {integrity: sha512-ytP9AAbMYXIye6dQ1RoFV7Eb2k+yu+nMlny4COYMWhNto+30dx0mmNjjJ464c7XU5KvcLTqdj2pcBGFi2Uj0vw==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -2396,8 +2396,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-gnu@14.2.0-canary.55: - resolution: {integrity: sha512-bhzZMxNxEz56LNEwY2RcHIAdHP8jT4DC+zmYut7llxpyPMh0Ysq3qqh2Sl7IpWpwFBrCZ37jaTmwkq5HIt0C+w==} + /@next/swc-linux-x64-gnu@14.2.0-canary.56: + resolution: {integrity: sha512-/V6ngDidzDYkK8120PfRWDCi/26y9WywaZ/lWJY+345sXaB3CGLnFd3tyfdIpzHxDOvRYDHCTLh8lYd0XJF+uA==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -2423,8 +2423,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-musl@14.2.0-canary.55: - resolution: {integrity: sha512-438sYbiUAXofn8Zuc5Jd6N2Xv2YRZAD/VYLzQfYU1/XNfu8vb3UO48Hh3xYT7zqZ7JwWEdm3oi5qWzv2iQ6/OA==} + /@next/swc-linux-x64-musl@14.2.0-canary.56: + resolution: {integrity: sha512-YEwoiErfzmmXRrqoInPDItJ0X+PZbeTQVkR9UpYgUstgrwr0/aFILLI/wLT52r9NWX3yMiqONB/Owv5LefkQlg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -2450,8 +2450,8 @@ packages: dev: false optional: true - /@next/swc-win32-arm64-msvc@14.2.0-canary.55: - resolution: {integrity: sha512-Qh14fDcSGCbfq5xI2+pwK54wgPLxu0OXgZ8pmZjX3w5Fu+lkV80pQTcaqFzJHSuPbf5+zR4KXMBqW8mvY4naIw==} + /@next/swc-win32-arm64-msvc@14.2.0-canary.56: + resolution: {integrity: sha512-gEIxu949cO8xTnapS5p+EVg3fr8dzQgsybjIVC/FIl8dfBDMMHHiUIJm2lNUvi9zRc4OgrJ7WC+0tA58h9JRfA==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -2477,8 +2477,8 @@ packages: dev: false optional: true - /@next/swc-win32-ia32-msvc@14.2.0-canary.55: - resolution: {integrity: sha512-OF5Aa6mbkAAFIu//WPAMIPm67gAwYZtxoBGI+W/7FO5eG5VJnmOuXaxX+BbNE1vQGOEZakrRzWpP9C+Fst0N1Q==} + /@next/swc-win32-ia32-msvc@14.2.0-canary.56: + resolution: {integrity: sha512-3EYXk812fRXuwhID9IYG+xodNr25IPkoEbCLTdKOzS8okZrRzRHo+WmhIqF2ylS4LDFt18yVWGibN2pPJISjVg==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -2504,8 +2504,8 @@ packages: dev: false optional: true - /@next/swc-win32-x64-msvc@14.2.0-canary.55: - resolution: {integrity: sha512-yBOZdP4rcHjCqNIcnTy9fu8iWE1KvtZLPhTpLRv3weaAyjoljwgCaOZ45aE4whJxcd2Hr/QRhjQGlHfbzxwt8Q==} + /@next/swc-win32-x64-msvc@14.2.0-canary.56: + resolution: {integrity: sha512-FvsUo8nh9Hc6qvK0uqoinEfZbw+q16Jj6qewA0fdUQ+QY0i6ECo7c8Wsc6Jm/dGmW/CAA1zAVUX00L9h+MGyZw==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -4996,7 +4996,7 @@ packages: /@tanstack/query-core@5.28.6: resolution: {integrity: sha512-hnhotV+DnQtvtR3jPvbQMPNMW4KEK0J4k7c609zJ8muiNknm+yoDyMHmxTWM5ZnlZpsz0zOxYFr+mzRJNHWJsA==} - /@tanstack/react-query-next-experimental@5.28.14(@tanstack/react-query@5.28.6)(next@14.2.0-canary.55)(react@18.2.0): + /@tanstack/react-query-next-experimental@5.28.14(@tanstack/react-query@5.28.6)(next@14.2.0-canary.56)(react@18.2.0): resolution: {integrity: sha512-gGHx3uJkZNYYpFNFk8eEo96ssiFE2OmYA49wszHxHrtO5nL7kzRcnJF8SALGpqSEjo5D3fLMH24MrhbBsO0sig==} peerDependencies: '@tanstack/react-query': ^5.28.14 @@ -5004,7 +5004,7 @@ packages: react: ^18.0.0 dependencies: '@tanstack/react-query': 5.28.6(react@18.2.0) - next: 14.2.0-canary.55(react-dom@18.2.0)(react@18.2.0) + next: 14.2.0-canary.56(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 dev: false @@ -6816,12 +6816,12 @@ packages: /eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} - /edge-csrf@1.0.9(next@14.2.0-canary.55): + /edge-csrf@1.0.9(next@14.2.0-canary.56): resolution: {integrity: sha512-3F89YTh42UDdISr3s9AEcgJDLi4ysgjGfnybzF0LuZGaG2W31h1ZwgWwEQBLMj04lAklcP4XHZYi7vk9o8zcbg==} peerDependencies: next: ^13.0.0 || ^14.0.0 dependencies: - next: 14.2.0-canary.55(react-dom@18.2.0)(react@18.2.0) + next: 14.2.0-canary.56(react-dom@18.2.0)(react@18.2.0) dev: false /editorconfig@1.0.4: @@ -9607,7 +9607,7 @@ packages: - supports-color dev: false - /next-sitemap@4.2.3(next@14.2.0-canary.55): + /next-sitemap@4.2.3(next@14.2.0-canary.56): resolution: {integrity: sha512-vjdCxeDuWDzldhCnyFCQipw5bfpl4HmZA7uoo3GAaYGjGgfL4Cxb1CiztPuWGmS+auYs7/8OekRS8C2cjdAsjQ==} engines: {node: '>=14.18'} hasBin: true @@ -9618,7 +9618,7 @@ packages: '@next/env': 13.5.6 fast-glob: 3.3.2 minimist: 1.2.8 - next: 14.2.0-canary.55(react-dom@18.2.0)(react@18.2.0) + next: 14.2.0-canary.56(react-dom@18.2.0)(react@18.2.0) dev: false /next-themes@0.3.0(react-dom@18.2.0)(react@18.2.0): @@ -9710,8 +9710,8 @@ packages: - babel-plugin-macros dev: false - /next@14.2.0-canary.55(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-RLEOesad7T/2XrtHw1NdjO0Jb10eTp5+O2GTrq072sk1awPsam+bm35iKe6bXGUAhsfen9EDUchZGFohjnhhSg==} + /next@14.2.0-canary.56(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-o5/GGmNwGY3y3At/K9Y/9Vmuhjk7lwXPh7W/feePYeqpYu7/jp47NDg+EKczNj3ueOdKPFJr2kiwYfD3rT2RBQ==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: @@ -9728,7 +9728,7 @@ packages: sass: optional: true dependencies: - '@next/env': 14.2.0-canary.55 + '@next/env': 14.2.0-canary.56 '@swc/helpers': 0.5.5 busboy: 1.6.0 caniuse-lite: 1.0.30001600 @@ -9738,15 +9738,15 @@ packages: react-dom: 18.2.0(react@18.2.0) styled-jsx: 5.1.1(react@18.2.0) optionalDependencies: - '@next/swc-darwin-arm64': 14.2.0-canary.55 - '@next/swc-darwin-x64': 14.2.0-canary.55 - '@next/swc-linux-arm64-gnu': 14.2.0-canary.55 - '@next/swc-linux-arm64-musl': 14.2.0-canary.55 - '@next/swc-linux-x64-gnu': 14.2.0-canary.55 - '@next/swc-linux-x64-musl': 14.2.0-canary.55 - '@next/swc-win32-arm64-msvc': 14.2.0-canary.55 - '@next/swc-win32-ia32-msvc': 14.2.0-canary.55 - '@next/swc-win32-x64-msvc': 14.2.0-canary.55 + '@next/swc-darwin-arm64': 14.2.0-canary.56 + '@next/swc-darwin-x64': 14.2.0-canary.56 + '@next/swc-linux-arm64-gnu': 14.2.0-canary.56 + '@next/swc-linux-arm64-musl': 14.2.0-canary.56 + '@next/swc-linux-x64-gnu': 14.2.0-canary.56 + '@next/swc-linux-x64-musl': 14.2.0-canary.56 + '@next/swc-win32-arm64-msvc': 14.2.0-canary.56 + '@next/swc-win32-ia32-msvc': 14.2.0-canary.56 + '@next/swc-win32-x64-msvc': 14.2.0-canary.56 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros