When within the layout /home/[account]
- you have access to data fetched from the account workspace API.
The data in this layout has most of the information you need around the currently selected account and the user.
Accessing the Team Account Workspace Data in Server Components
To access the data, you can use the loadTeamWorkspace
loader function. This function is cached per-request, so you can call it multiple times without worrying about performance.
While multiple calls to this function are deduped within a single request, bear in mind that this request will be called when navigating to the page. If you only require a small subset of data, it would be best to make more granular requests.
import { loadTeamWorkspace } from '~/home/[account]/_lib/server/team-account-workspace.loader';
export default async function SomeAccountPage() {
const data = await loadTeamWorkspace();
// use data
}
The data returned from the loadTeamWorkspace
function is an object with the following properties:
account
: The account objectuser
: The user object coming from Supabase Authaccounts
: An array of all accounts the user is a member of
Here is an example of the data structure:
import type { User } from '@supabase/supabase-js';
{
account: {
id: string;
name: string;
picture_url: string;
slug: string;
role: string;
role_hierarchy_level: number;
primary_owner_user_id: string;
subscription_status: string;
permissions: string[];
};
user: User;
accounts: Array<{
id: string | null;
name: string | null;
picture_url: string | null;
role: string | null;
slug: string | null;
}>;
}
The account
object contains the following properties:
id
: The account IDname
: The account namepicture_url
: The account picture URLslug
: The account slugrole
: The user's role in the accountrole_hierarchy_level
: The user's role hierarchy levelprimary_owner_user_id
: The primary owner user IDsubscription_status
: The subscription status of the account. This can be 'active' | 'trialing' | 'past_due' | 'canceled' | 'unpaid' | 'incomplete' | 'incomplete_expired' | 'paused'.permissions
: An array of permissions the user has in the account
Accessing the Account Workspace Data in Client Components
The data fetched from the account workspace API is available in the context. You can access this data using the useAccountWorkspace
hook.
'use client';
import { useTeamAccountWorkspace } from '@kit/team-accounts/hooks/use-team-account-workspace';
export default function SomeComponent() {
const { account, user, accounts } = useTeamAccountWorkspace();
// use account, user, and accounts
}
The useTeamAccountWorkspace
hook returns the same data structure as the loadTeamWorkspace
function.
NB: the hooks is not to be used is Server Components, only in Client Components. Additionally, this is only available in the pages under /home/[account]
layout.