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.
This commit is contained in:
giancarlo
2024-04-04 11:02:27 +08:00
parent 5c5532dc22
commit 64fca41f8d
12 changed files with 97 additions and 82 deletions

4
.npmrc
View File

@@ -1,2 +1,4 @@
shamefully-hoist=true
peer-legacy-deps=true
peer-legacy-deps=true
dedupe-peer-dependencies=true
use-lockfile-v6=true

View File

@@ -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 (
<If condition={user.data} fallback={<AuthButtons />}>
{(data) => (
<PersonalAccountDropdown
paths={{
home: pathsConfig.app.home,
}}
features={{
enableThemeToggle: featuresFlagConfig.enableThemeToggle,
}}
user={data}
signOutRequested={() => signOut.mutateAsync()}
/>
)}
</If>
);
if (user.data) {
return (
<PersonalAccountDropdown
paths={paths}
features={features}
user={user.data}
signOutRequested={() => signOut.mutateAsync()}
/>
);
}
return <AuthButtons />;
}
function AuthButtons() {

View File

@@ -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",

View File

@@ -83,7 +83,11 @@ export function PersonalAccountDropdown({
/>
<If condition={showProfileName}>
<div className={'flex w-full flex-col truncate text-left'}>
<div
className={
'fade-in animate-in flex w-full flex-col truncate text-left'
}
>
<span className={'truncate text-sm'}>{displayName}</span>
<span className={'text-muted-foreground truncate text-xs'}>

View File

@@ -20,11 +20,13 @@ export function UpdateAccountDetailsFormContainer() {
return null;
}
const userId = user.data.id;
return (
<UpdateAccountDetailsForm
displayName={user.data.name ?? ''}
userId={user.data.id}
onUpdate={revalidateUserDataQuery}
userId={userId}
onUpdate={() => revalidateUserDataQuery(userId)}
/>
);
}

View File

@@ -28,11 +28,13 @@ export function UpdateAccountImageContainer() {
return <LoadingOverlay fullPage={false} />;
}
const userId = accountData.data.id;
return (
<UploadProfileAvatarForm
pictureUrl={accountData.data.picture_url ?? null}
userId={accountData.data.id}
onAvatarUpdated={revalidateUserDataQuery}
userId={userId}
onAvatarUpdated={() => revalidateUserDataQuery(userId)}
/>
);
}

View File

@@ -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],
);

View File

@@ -1,6 +1,7 @@
import { InitOptions } from 'i18next';
const fallbackLng = 'en';
export const languages: string[] = [fallbackLng];
export const I18N_COOKIE_NAME = 'lang';

View File

@@ -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));
}

View File

@@ -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,
});
}

View File

@@ -30,7 +30,7 @@ export function ProfileAvatar(props: ProfileAvatarProps) {
<Avatar className={avatarClassName}>
<AvatarImage src={props.pictureUrl ?? undefined} />
<AvatarFallback>
<AvatarFallback className={'animate-in fade-in'}>
<span suppressHydrationWarning className={'uppercase'}>
{initials}
</span>

86
pnpm-lock.yaml generated
View File

@@ -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