Fixed team selection (#124)

* fixed selected team switcher

* fixed selected team switcher

* updated lock files

apps/backend/src/lib/users.tsx

@@ -109,7 +109,6 @@ export async function updateServerUser(
         primaryEmailVerified: update.primaryEmailVerified,
         clientMetadata: update.clientMetadata as any,
         serverMetadata: update.serverMetadata as any,
-        selectedTeamId: update.selectedTeamId,
       }),
     });
   } catch (e) {

apps/dashboard/src/lib/users.tsx

@@ -111,7 +111,6 @@ export async function updateServerUser(
         primaryEmailVerified: update.primaryEmailVerified,
         clientMetadata: update.clientMetadata as any,
         serverMetadata: update.serverMetadata as any,
-        selectedTeamId: update.selectedTeamId,
       }),
     });
   } catch (e) {

docs/fern/docs/pages/concepts/team-selection.mdx

@@ -96,14 +96,14 @@ export default function TeamsPage() {
   const user = useUser({ or: 'redirect' });
   const teams = user.useTeams();
   const router = useRouter();
+  const selectedTeam = user.selectedTeam;
 
   return (
     <div>
-      {user.selectedTeam && 
-        <button onClick={() => router.push(`/team/${user.selectedTeam.id}`)}>
+      {selectedTeam && 
+        <button onClick={() => router.push(`/team/${selectedTeam.id}`)}>
           Most recent team
-        </button>
-      }
+        </button>}
 
       <h2>All Teams</h2>
       {teams.map(team => (

examples/docs-examples/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@stackframe/custom-pages-example",
+  "name": "@stackframe/docs-examples",
   "version": "2.4.28",
   "description": "",
   "private": true,

examples/docs-examples/src/app/team/[teamId]/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useUser, SelectedTeamSwitcher } from "@stackframe/stack";
+
+export default function TeamPage({ params }: { params: { teamId: string } }) {
+  const user = useUser({ or: 'redirect' });
+  const team = user.useTeam(params.teamId);
+
+  if (!team) {
+    return <div>Team not found</div>;
+  }
+
+  return (
+    <div>
+      <SelectedTeamSwitcher 
+        urlMap={team => `/team/${team.id}`} 
+        selectedTeam={team}
+      />
+      
+      <p>Team Name: {team.displayName}</p>
+      <p>You are a member of this team.</p>
+    </div>
+  );
+}

examples/docs-examples/src/app/team/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useUser } from "@stackframe/stack";
+
+export default function TeamsPage() {
+  const user = useUser({ or: 'redirect' });
+  const teams = user.useTeams();
+  const router = useRouter();
+  const selectedTeam = user.selectedTeam;
+
+  return (
+    <div>
+      {selectedTeam && 
+        <button onClick={() => router.push(`/team/${selectedTeam.id}`)}>
+          Most recent team
+        </button>}
+
+      <h2>All Teams</h2>
+      {teams.map(team => (
+        <button key={team.id} onClick={() => router.push(`/team/${team.id}`)}>
+          Open {team.displayName}
+        </button>
+      ))}
+    </div>
+  );
+}

packages/stack/src/components/selected-team-switcher.tsx

@@ -15,7 +15,7 @@ import {
 import { useEffect, useMemo } from "react";
 
 type SelectedTeamSwitcherProps = {
-  urlMap?: (projectId: string) => string,
+  urlMap?: (team: Team) => string,
   selectedTeam?: Team,
   noUpdateSelectedTeam?: boolean,
 };
@@ -36,32 +36,36 @@ export function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {
   const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);
 
   useEffect(() => {
-    if (!props.noUpdateSelectedTeam && teams && selectedTeam && !teams.find(team => team.id === selectedTeam.id)) {
-      runAsynchronouslyWithAlert(user?.setSelectedTeam(selectedTeam));
+    if (!props.noUpdateSelectedTeam && props.selectedTeam) {
+      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));
     }
-  }, [teams, selectedTeam, props.noUpdateSelectedTeam]);
+  }, [props.noUpdateSelectedTeam, props.selectedTeam]);
 
   return (
-    <Select>
+    <Select 
+      value={selectedTeam?.id}
+      onValueChange={(value) => {
+        runAsynchronouslyWithAlert(async () => {
+          const team = teams?.find(team => team.id === value);
+          if (!team) {
+            throw new Error('Team not found, this should not happen');
+          }
+
+          if (!props.noUpdateSelectedTeam) {
+            await user?.setSelectedTeam(team);
+          }
+          if (props.urlMap) {
+            router.push(props.urlMap(team));
+          }
+        });
+      }}
+    >
       <SelectTrigger className="stack-scope">
         <SelectValue placeholder="Select team"/>
       </SelectTrigger>
       <SelectContent className="stack-scope">
         {teams && teams.map(team => (
-          <SelectItem
-            value={team.id}
-            key={team.id}
-            onClick={() => {
-              runAsynchronouslyWithAlert(async () => {
-                if (!props.noUpdateSelectedTeam) {
-                  await user?.setSelectedTeam(team);
-                }
-                if (props.urlMap) {
-                  router.push(props.urlMap(team.id));
-                }
-              });
-            }}
-          >
+          <SelectItem value={team.id} key={team.id}>
             <div className="flex items-center">
               <TeamIcon displayName={team.displayName} />
               <Typography>{team.displayName}</Typography>

pnpm-lock.yaml

@@ -566,7 +566,7 @@ importers:
         specifier: ^5
         version: 5.3.3
 
-  examples/custom-pages-example:
+  examples/demo:
     dependencies:
       '@emotion/react':
         specifier: ^11.11.3
@@ -621,7 +621,7 @@ importers:
         specifier: ^3.4.1
         version: 3.4.4
 
-  examples/demo:
+  examples/docs-examples:
     dependencies:
       '@emotion/react':
         specifier: ^11.11.3