zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Next.js version and improve session handling

Browse Source 
Next.js version has been upgraded from 14.2.0-canary.58 to 14.2.0-canary.60 for performance and stability improvements. Additionally, account session handling has been improved by fetching the session data during server-side processing and passing it to various components, thus optimizing the user experience.
This commit is contained in:
giancarlo
2024-04-06 14:34:05 +08:00
parent 9303e8f5dd
commit 67e9c8b676
8 changed files with 88 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/app/(dashboard)/home/[account]/_components/account-layout-sidebar.tsx
View File

@@ -2,6 +2,8 @@
import { useRouter } from 'next/navigation';
import { User } from '@supabase/supabase-js';
import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
import { AccountSelector } from '@kit/accounts/account-selector';
@@ -37,6 +39,7 @@ export function AccountLayoutSidebar(props: {
account: string;
accounts: AccountModel[];
collapsed: boolean;
user: User | null;
}) {
return (
<Sidebar collapsed={props.collapsed}>
@@ -46,6 +49,7 @@ export function AccountLayoutSidebar(props: {
setCollapsed={setCollapsed}
account={props.account}
accounts={props.accounts}
user={props.user}
/>
)}
</Sidebar>
@@ -58,6 +62,7 @@ function SidebarContainer(props: {
collapsed: boolean;
setCollapsed: (collapsed: boolean) => void;
collapsible?: boolean;
user: User | null;
}) {
const { account, accounts } = props;
const router = useRouter();
@@ -86,7 +91,10 @@ function SidebarContainer(props: {
<div className={'absolute bottom-4 left-0 w-full'}>
<SidebarContent>
<ProfileAccountDropdownContainer collapsed={props.collapsed} />
<ProfileAccountDropdownContainer
user={props.user}
collapsed={props.collapsed}
/>
<If condition={props.collapsible}>
<AppSidebarFooterMenu

10
apps/web/app/(dashboard)/home/[account]/_lib/server/team-account-workspace.loader.ts
View File

@@ -26,9 +26,16 @@ export const loadTeamWorkspace = cache(async (accountSlug: string) => {
const accountsPromise = client.from('user_accounts').select('*');
const [accountResult, accountsResult] = await Promise.all([
const [
accountResult,
accountsResult,
{
data: { session },
},
] = await Promise.all([
accountPromise,
accountsPromise,
client.auth.getSession(),
]);
if (accountResult.error) {
@@ -56,5 +63,6 @@ export const loadTeamWorkspace = cache(async (accountSlug: string) => {
return {
account: accountData,
accounts: accountsResult.data,
session,
};
});

1
apps/web/app/(dashboard)/home/[account]/layout.tsx
View File

@@ -32,6 +32,7 @@ function TeamWorkspaceLayout({
collapsed={false}
account={params.account}
accounts={accounts}
user={data.session?.user ?? null}
/>
}
>

15
apps/web/app/(dashboard)/home/_components/home-sidebar.tsx
View File

@@ -4,14 +4,16 @@ import { cookies } from 'next/headers';
import { Sidebar, SidebarContent, SidebarNavigation } from '@kit/ui/sidebar';
import { HomeSidebarAccountSelector } from '~/(dashboard)/home/_components/home-sidebar-account-selector';
import { ProfileAccountDropdownContainer } from '~/(dashboard)/home/_components/personal-account-dropdown-container';
import { loadUserWorkspace } from '~/(dashboard)/home/_lib/load-user-workspace';
import { personalAccountSidebarConfig } from '~/config/personal-account-sidebar.config';
// home imports
import { HomeSidebarAccountSelector } from '../_components/home-sidebar-account-selector';
import { ProfileAccountDropdownContainer } from '../_components/personal-account-dropdown-container';
import { loadUserWorkspace } from '../_lib/load-user-workspace';
export function HomeSidebar() {
const collapsed = getSidebarCollapsed();
const { accounts } = use(loadUserWorkspace());
const { accounts, session } = use(loadUserWorkspace());
return (
<Sidebar collapsed={collapsed}>
@@ -25,7 +27,10 @@ export function HomeSidebar() {
<div className={'absolute bottom-4 left-0 w-full'}>
<SidebarContent>
<ProfileAccountDropdownContainer collapsed={collapsed} />
<ProfileAccountDropdownContainer
collapsed={collapsed}
user={session?.user ?? null}
/>
</SidebarContent>
</div>
</Sidebar>

9
apps/web/app/(dashboard)/home/_components/personal-account-dropdown-container.tsx
View File

@@ -1,5 +1,7 @@
'use client';
import type { User } from '@supabase/supabase-js';
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';
@@ -7,9 +9,12 @@ import { useUser } from '@kit/supabase/hooks/use-user';
import featuresFlagConfig from '~/config/feature-flags.config';
import pathsConfig from '~/config/paths.config';
export function ProfileAccountDropdownContainer(props: { collapsed: boolean }) {
export function ProfileAccountDropdownContainer(props: {
collapsed: boolean;
user: User | null;
}) {
const signOut = useSignOut();
const user = useUser();
const user = useUser(props.user);
return (
<div className={props.collapsed ? '' : 'w-full'}>

12
apps/web/app/(dashboard)/home/_lib/load-user-workspace.ts
View File

@@ -3,16 +3,20 @@ import { cache } from 'react';
import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
export const loadUserWorkspace = cache(async () => {
const accounts = await loadUserAccounts();
const client = getSupabaseServerComponentClient();
const accounts = await loadUserAccounts(client);
const { data } = await client.auth.getSession();
return {
accounts,
session: data.session,
};
});
async function loadUserAccounts() {
const client = getSupabaseServerComponentClient();
async function loadUserAccounts(
client: ReturnType<typeof getSupabaseServerComponentClient>,
) {
const { data: accounts, error } = await client
.from('user_accounts')
.select(`name, slug, picture_url`);

2
apps/web/package.json
View File

@@ -43,7 +43,7 @@
"i18next": "^23.10.1",
"i18next-resources-to-backend": "^1.2.0",
"lucide-react": "^0.363.0",
"next": "14.2.0-canary.58",
"next": "14.2.0-canary.60",
"next-sitemap": "^4.2.3",
"next-themes": "0.3.0",
"react": "18.2.0",

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.58)(react@18.2.0)
version: 5.28.14(@tanstack/react-query@5.28.6)(next@14.2.0-canary.60)(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.58)
version: 1.0.9(next@14.2.0-canary.60)
i18next:
specifier: ^23.10.1
version: 23.10.1
@@ -117,11 +117,11 @@ importers:
specifier: ^0.363.0
version: 0.363.0(react@18.2.0)
next:
specifier: 14.2.0-canary.58
version: 14.2.0-canary.58(react-dom@18.2.0)(react@18.2.0)
specifier: 14.2.0-canary.60
version: 14.2.0-canary.60(react-dom@18.2.0)(react@18.2.0)
next-sitemap:
specifier: ^4.2.3
version: 4.2.3(next@14.2.0-canary.58)
version: 4.2.3(next@14.2.0-canary.60)
next-themes:
specifier: 0.3.0
version: 0.3.0(react-dom@18.2.0)(react@18.2.0)
@@ -2263,8 +2263,8 @@ packages:
resolution: {integrity: sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==}
dev: false
/@next/env@14.2.0-canary.58:
resolution: {integrity: sha512-mEDmzHhOHKGbd/qv8CAc8JGkPrbGs2txWz9Y2XHew77HUTmOsrzSKDK467cYa35r18KcGwftZPRv3s7EfW4Kxg==}
/@next/env@14.2.0-canary.60:
resolution: {integrity: sha512-JHZFqtJYmYZqDEojGJxZo6UpfHJdWv2gTDYaXBdugiOR17jlOfh0lvydwloelY5AybgBI+gcOMDBlA4NvHqwzQ==}
dev: false
/@next/eslint-plugin-next@14.1.4:
@@ -2291,8 +2291,8 @@ packages:
dev: false
optional: true
/@next/swc-darwin-arm64@14.2.0-canary.58:
resolution: {integrity: sha512-NZwWdgltCBHRBBvK+ioEKv4Mcj/PEc/5uowXAUpirhATCB0n4meAluamSRcWcmZckG08zIutfocCz9hHWeYUxA==}
/@next/swc-darwin-arm64@14.2.0-canary.60:
resolution: {integrity: sha512-qnlZH711F+GSqJjU1pa6GZVYPMgNko3LxnWa856HgSJgIeKhwAK3Mvr4d6OJDzKykoPXK/pCel4ulNpVQeMk9A==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
@@ -2318,8 +2318,8 @@ packages:
dev: false
optional: true
/@next/swc-darwin-x64@14.2.0-canary.58:
resolution: {integrity: sha512-zv/iMoVZoyB9PxNSSNKY0p3Jg7a1ezVXFkFHLbPvqRCOxvgfkLIpdOJ6QAGBOknFF8qfQCIhRYQXbijto4WH+g==}
/@next/swc-darwin-x64@14.2.0-canary.60:
resolution: {integrity: sha512-F0oF2O9Ytwrinq7+++qF3JQui1V7RZE7u83mkOIY638i3kMCke/EkXUsjdrg8BLudoZaDq2t77ynjbTk2GWszA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
@@ -2345,8 +2345,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-arm64-gnu@14.2.0-canary.58:
resolution: {integrity: sha512-4Gyb6EO4PokA/tqZsZfR38t4UOMl2w0LpYZfhfBoJ4jiPXW5RymgDcJE30LKM1f2k+E69TnxyUjD18Z6RnONiw==}
/@next/swc-linux-arm64-gnu@14.2.0-canary.60:
resolution: {integrity: sha512-1jUgAbKaOXb6Jt6CKsoAskUeWz0FilvP/I/czJl6huYkemff4kUxECv6hjvxmBUzHgxoYv0bzJCwRAIXut0fJw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -2372,8 +2372,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-arm64-musl@14.2.0-canary.58:
resolution: {integrity: sha512-8Ku+EyiCK9VNz/lV8Yhhtw8QV0z0U1xa+m5ShqpvpyTVOv/q4JerSQ3JivzrU1T4sUUO7jb7Pu3+/nfFIXq0Tw==}
/@next/swc-linux-arm64-musl@14.2.0-canary.60:
resolution: {integrity: sha512-ekK7wdHWGk63Qre2L7uO0vFlm9O34qQn9XusZLp+de7ZgE/iOsXWg6dJ82OSTUUHbyYJuqAtid1nbUM5ajV1rQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -2399,8 +2399,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-x64-gnu@14.2.0-canary.58:
resolution: {integrity: sha512-G1BpyRalWUBak4WDych1cQ90LZAh2rYl0dOTLrMWkrJ1KYD06gY18Ty+RD/hevOdk/1gXHs8Uep6wgwc9EmzPg==}
/@next/swc-linux-x64-gnu@14.2.0-canary.60:
resolution: {integrity: sha512-9LsH0lyrx2bxLqGMyvh7szVB5Wz+rYfqp0kFBqYecURrm3wsTUfVhXRonVYY2y0nkZFN0K9SxjpR1x0Vs35oaA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -2426,8 +2426,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-x64-musl@14.2.0-canary.58:
resolution: {integrity: sha512-l5ggp3U9PIlBPg9n5jTt0EZWUxQ7nWi/ObYBWX1EYHU9CjNwZ/ka01nWoMYqenI3wuAnb4D8ORgAvUv9JrKHhA==}
/@next/swc-linux-x64-musl@14.2.0-canary.60:
resolution: {integrity: sha512-0I7vfnkpENB58RvlGiwG2kAb7PXKTsvvACvMq8/daOs+kYJrmMRrR2AQQ/dVEBckWwSewfBSb74lxcu0uyLRBA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -2453,8 +2453,8 @@ packages:
dev: false
optional: true
/@next/swc-win32-arm64-msvc@14.2.0-canary.58:
resolution: {integrity: sha512-QKp5UAA094uQ2Oz9j5WtscvXYfrVjMytn1BF+O/YpwmUTNKAvx+9DZ1KqaRLoQ02Pnwsbz9DcF7oMowxE4OhRQ==}
/@next/swc-win32-arm64-msvc@14.2.0-canary.60:
resolution: {integrity: sha512-50RYKSsZn0cLk+4VRtd0jfgAGheFiBAuk/ZKacrkZgnnqQCvuf1HYJq019b+kpHMQYAYGZMNky90Tjwp5RnX/w==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
@@ -2480,8 +2480,8 @@ packages:
dev: false
optional: true
/@next/swc-win32-ia32-msvc@14.2.0-canary.58:
resolution: {integrity: sha512-BHJoVmarYdw3SqAVWqKA6ro6cak5XmeZcMsK9PIjVB3MoWkfY7bdWPoIGmzX/jfSGi8OibWY7bF2o5DddZjvSg==}
/@next/swc-win32-ia32-msvc@14.2.0-canary.60:
resolution: {integrity: sha512-EiUtA0ylWn21Jd27XbFvu5Rm/QEpH5Twt4uZ9GlguKEqpdduIjzZpLHgPJvp+3m/kNbwlPEcT48UZ4DDEIU16g==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
@@ -2507,8 +2507,8 @@ packages:
dev: false
optional: true
/@next/swc-win32-x64-msvc@14.2.0-canary.58:
resolution: {integrity: sha512-zoMWDNjZ/CXQF7Vz0UrsiWpTlQPbHwfO285/vhiUjaPv3QxX2eGHqUYQi7jrI593yUq01bOqrft8Ho66dlmEWw==}
/@next/swc-win32-x64-msvc@14.2.0-canary.60:
resolution: {integrity: sha512-z5KZYtUrSdAYkPVUcYpb7VvXLN6up/Dk7EONdMi17KaRJtBAeuSZHpf0y93Z3/yW+eajXGBQ1ZoNRtQ0cAZJgw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
@@ -4999,7 +4999,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.58)(react@18.2.0):
/@tanstack/react-query-next-experimental@5.28.14(@tanstack/react-query@5.28.6)(next@14.2.0-canary.60)(react@18.2.0):
resolution: {integrity: sha512-gGHx3uJkZNYYpFNFk8eEo96ssiFE2OmYA49wszHxHrtO5nL7kzRcnJF8SALGpqSEjo5D3fLMH24MrhbBsO0sig==}
peerDependencies:
'@tanstack/react-query': ^5.28.14
@@ -5007,7 +5007,7 @@ packages:
react: ^18.0.0
dependencies:
'@tanstack/react-query': 5.28.6(react@18.2.0)
next: 14.2.0-canary.58(react-dom@18.2.0)(react@18.2.0)
next: 14.2.0-canary.60(react-dom@18.2.0)(react@18.2.0)
react: 18.2.0
dev: false
@@ -6819,12 +6819,12 @@ packages:
/eastasianwidth@0.2.0:
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
/edge-csrf@1.0.9(next@14.2.0-canary.58):
/edge-csrf@1.0.9(next@14.2.0-canary.60):
resolution: {integrity: sha512-3F89YTh42UDdISr3s9AEcgJDLi4ysgjGfnybzF0LuZGaG2W31h1ZwgWwEQBLMj04lAklcP4XHZYi7vk9o8zcbg==}
peerDependencies:
next: ^13.0.0 || ^14.0.0
dependencies:
next: 14.2.0-canary.58(react-dom@18.2.0)(react@18.2.0)
next: 14.2.0-canary.60(react-dom@18.2.0)(react@18.2.0)
dev: false
/editorconfig@1.0.4:
@@ -9609,7 +9609,7 @@ packages:
- supports-color
dev: false
/next-sitemap@4.2.3(next@14.2.0-canary.58):
/next-sitemap@4.2.3(next@14.2.0-canary.60):
resolution: {integrity: sha512-vjdCxeDuWDzldhCnyFCQipw5bfpl4HmZA7uoo3GAaYGjGgfL4Cxb1CiztPuWGmS+auYs7/8OekRS8C2cjdAsjQ==}
engines: {node: '>=14.18'}
hasBin: true
@@ -9620,7 +9620,7 @@ packages:
'@next/env': 13.5.6
fast-glob: 3.3.2
minimist: 1.2.8
next: 14.2.0-canary.58(react-dom@18.2.0)(react@18.2.0)
next: 14.2.0-canary.60(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):
@@ -9712,8 +9712,8 @@ packages:
- babel-plugin-macros
dev: false
/next@14.2.0-canary.58(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-7aphi4r1S37J19QQprflzTHOfCXAWUd8AmtfkLzBtPPTkhsbEikEXdFHvo2c5DUgYTvFf7teBIxS6Vi2m08byg==}
/next@14.2.0-canary.60(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-8PTu/wB8pd24wZnFb5bpHQulXnGQl+8yjc3D1QK17j268obdf+kPQmo/L4x3EQhCOkK7tasA/c5y9R9EMvbntQ==}
engines: {node: '>=18.17.0'}
hasBin: true
peerDependencies:
@@ -9730,7 +9730,7 @@ packages:
sass:
optional: true
dependencies:
'@next/env': 14.2.0-canary.58
'@next/env': 14.2.0-canary.60
'@swc/helpers': 0.5.5
busboy: 1.6.0
caniuse-lite: 1.0.30001600
@@ -9740,15 +9740,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.58
'@next/swc-darwin-x64': 14.2.0-canary.58
'@next/swc-linux-arm64-gnu': 14.2.0-canary.58
'@next/swc-linux-arm64-musl': 14.2.0-canary.58
'@next/swc-linux-x64-gnu': 14.2.0-canary.58
'@next/swc-linux-x64-musl': 14.2.0-canary.58
'@next/swc-win32-arm64-msvc': 14.2.0-canary.58
'@next/swc-win32-ia32-msvc': 14.2.0-canary.58
'@next/swc-win32-x64-msvc': 14.2.0-canary.58
'@next/swc-darwin-arm64': 14.2.0-canary.60
'@next/swc-darwin-x64': 14.2.0-canary.60
'@next/swc-linux-arm64-gnu': 14.2.0-canary.60
'@next/swc-linux-arm64-musl': 14.2.0-canary.60
'@next/swc-linux-x64-gnu': 14.2.0-canary.60
'@next/swc-linux-x64-musl': 14.2.0-canary.60
'@next/swc-win32-arm64-msvc': 14.2.0-canary.60
'@next/swc-win32-ia32-msvc': 14.2.0-canary.60
'@next/swc-win32-x64-msvc': 14.2.0-canary.60
transitivePeerDependencies:
- '@babel/core'
- babel-plugin-macros