Add workspace context and custom hooks for user and team accounts (#41)

* Add workspace context and custom hooks for user and team accounts

The commit introduces a new workspace context for both user and team accounts. New custom hooks, useUserWorkspace and useAccountWorkspace, were created to access this context data. These changes allow for more streamlined data access and manipulation, enabling features that depend on account context information to function more efficiently.

* Upgrade pnpm action-setup to version 4

The commit updates the version of pnpm action-setup used in GitHub workflows from v2 to v4. This upgrade can provide enhancements and improved features offered by the newer version.

* Update pnpm/action-setup version in workflow

The commit removes the explicit "version: 8" specifier in the Github Action workflow for "pnpm/action-setup". The updated workflow now points to "pnpm/action-setup@v4" instead of "pnpm/action-setup@v2", aligning it with usage elsewhere in the workflow.

* Refactor magic link auth container for URL handling

The magic link auth container has been updated to use a standard URL interface for managing URL and query parameters. This improves readability and error handling in the code.URL-related operations are now conducted via the URL object.

.github/workflows/workflow.yml

@@ -20,9 +20,7 @@ jobs:
         with:
           fetch-depth: 2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
+      - uses: pnpm/action-setup@v4
 
       - uses: actions/setup-node@v4
         with:
@@ -62,9 +60,7 @@ jobs:
         with:
           fetch-depth: 2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
+      - uses: pnpm/action-setup@v4
 
       - uses: actions/cache@v4
         with:

apps/web/app/home/(user)/layout.tsx

@@ -2,6 +2,7 @@ import { use } from 'react';
 
 import { cookies } from 'next/headers';
 
+import { UserWorkspaceContextProvider } from '@kit/accounts/components';
 import { If } from '@kit/ui/if';
 import {
   Page,
@@ -41,7 +42,9 @@ function UserHomeLayout({ children }: React.PropsWithChildren) {
         <HomeMobileNavigation workspace={workspace} />
       </PageMobileNavigation>
 
-      {children}
+      <UserWorkspaceContextProvider value={workspace}>
+        {children}
+      </UserWorkspaceContextProvider>
     </Page>
   );
 }

apps/web/app/home/[account]/layout.tsx

@@ -2,6 +2,7 @@ import { use } from 'react';
 
 import { cookies } from 'next/headers';
 
+import { TeamAccountWorkspaceContextProvider } from '@kit/team-accounts/components';
 import { If } from '@kit/ui/if';
 import {
   Page,
@@ -69,7 +70,9 @@ function TeamWorkspaceLayout({
         </div>
       </PageMobileNavigation>
 
-      {children}
+      <TeamAccountWorkspaceContextProvider value={data}>
+        {children}
+      </TeamAccountWorkspaceContextProvider>
     </Page>
   );
 }

packages/features/accounts/package.json

@@ -12,6 +12,7 @@
     "./personal-account-dropdown": "./src/components/personal-account-dropdown.tsx",
     "./account-selector": "./src/components/account-selector.tsx",
     "./personal-account-settings": "./src/components/personal-account-settings/index.ts",
+    "./components": "./src/components/index.ts",
     "./hooks/*": "./src/hooks/*.ts",
     "./api": "./src/server/api.ts"
   },

packages/features/accounts/src/components/index.ts

@@ -0,0 +1 @@
+export * from './user-workspace-context';

packages/features/accounts/src/components/user-workspace-context.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { createContext } from 'react';
+
+import { User } from '@supabase/supabase-js';
+
+import { Tables } from '@kit/supabase/database';
+
+interface UserWorkspace {
+  accounts: Array<{
+    label: string | null;
+    value: string | null;
+    image: string | null;
+  }>;
+
+  workspace: {
+    id: string | null;
+    name: string | null;
+    picture_url: string | null;
+    subscription_status: Tables<'subscriptions'>['status'] | null;
+  };
+
+  user: User;
+}
+
+export const UserWorkspaceContext = createContext<UserWorkspace>(
+  {} as UserWorkspace,
+);
+
+export function UserWorkspaceContextProvider(
+  props: React.PropsWithChildren<{
+    value: UserWorkspace;
+  }>,
+) {
+  return (
+    <UserWorkspaceContext.Provider value={props.value}>
+      {props.children}
+    </UserWorkspaceContext.Provider>
+  );
+}

packages/features/accounts/src/hooks/use-user-workspace.ts

@@ -0,0 +1,17 @@
+'use client';
+
+import { useContext } from 'react';
+
+import { UserWorkspaceContext } from '../components';
+
+export function useUserWorkspace() {
+  const ctx = useContext(UserWorkspaceContext);
+
+  if (!ctx) {
+    throw new Error(
+      'useUserWorkspace must be used within a UserWorkspaceProvider. This is only provided within the user workspace /home',
+    );
+  }
+
+  return ctx;
+}

packages/features/auth/src/components/magic-link-auth-container.tsx

@@ -49,8 +49,13 @@ export function MagicLinkAuthContainer({
   });
 
   const onSubmit = ({ email }: { email: string }) => {
-    const queryParams = inviteToken ? `?invite_token=${inviteToken}` : '';
-    const emailRedirectTo = [redirectUrl, queryParams].join('');
+    const url = new URL(redirectUrl);
+
+    if (inviteToken) {
+      url.searchParams.set('invite_token', inviteToken);
+    }
+
+    const emailRedirectTo = url.href;
 
     const promise = () =>
       signInWithOtpMutation.mutateAsync({

packages/features/team-accounts/package.json

@@ -11,6 +11,7 @@
   "exports": {
     "./api": "./src/server/api.ts",
     "./components": "./src/components/index.ts",
+    "./hooks/*": "./src/hooks/*.ts",
     "./webhooks": "./src/server/services/webhooks/index.ts"
   },
   "dependencies": {

packages/features/team-accounts/src/components/index.ts

@@ -5,3 +5,4 @@ export * from './invitations/account-invitations-table';
 export * from './settings/team-account-settings-container';
 export * from './invitations/accept-invitation-container';
 export * from './create-team-account-dialog';
+export * from './team-account-workspace-context';

packages/features/team-accounts/src/components/team-account-workspace-context.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { createContext } from 'react';
+
+import { User } from '@supabase/supabase-js';
+
+import { Database } from '@kit/supabase/database';
+
+interface AccountWorkspace {
+  accounts: Database['public']['Views']['user_accounts']['Row'][];
+  account: Database['public']['Functions']['team_account_workspace']['Returns'][0];
+  user: User;
+}
+
+export const TeamAccountWorkspaceContext = createContext<AccountWorkspace>(
+  {} as AccountWorkspace,
+);
+
+export function TeamAccountWorkspaceContextProvider(
+  props: React.PropsWithChildren<{ value: AccountWorkspace }>,
+) {
+  return (
+    <TeamAccountWorkspaceContext.Provider value={props.value}>
+      {props.children}
+    </TeamAccountWorkspaceContext.Provider>
+  );
+}

packages/features/team-accounts/src/hooks/use-team-account-workspace.ts

@@ -0,0 +1,22 @@
+'use client';
+
+import { useContext } from 'react';
+
+import { TeamAccountWorkspaceContext } from '../components';
+
+/**
+ * @name useAccountWorkspace
+ * @description A hook to access the account workspace data.
+ * @returns The account workspace data.
+ */
+export function useAccountWorkspace() {
+  const ctx = useContext(TeamAccountWorkspaceContext);
+
+  if (!ctx) {
+    throw new Error(
+      'useAccountWorkspace must be used within a TeamAccountWorkspaceContext.Provider. This is only provided within the account workspace /home/[account]',
+    );
+  }
+
+  return ctx;
+}