work on team enrollment

src/contexts/auth-context.tsx

@@ -1,10 +1,15 @@
-import { createContext, PropsWithChildren, useCallback, useContext, useMemo } from "react";
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useMemo,
+} from "react";
 import { MantineColor, MantineColorScheme } from "@mantine/core";
 import { useQueryClient } from "@tanstack/react-query";
 import { Player } from "@/features/players/types";
 import { playerKeys, playerQueries, useMe } from "@/features/players/queries";
 
-
 interface AuthData {
   user: Player | undefined;
   metadata: { accentColor: MantineColor; colorScheme: MantineColorScheme };
@@ -13,9 +18,9 @@ interface AuthData {
 
 export const defaultAuthData: AuthData = {
   user: undefined,
-  metadata: { accentColor: 'blue', colorScheme: 'auto' },
+  metadata: { accentColor: "blue", colorScheme: "auto" },
   roles: [],
-}
+};
 
 export interface AuthContextType extends AuthData {
   set: ({ user, metadata, roles }: Partial<AuthContextType>) => void;
@@ -27,39 +32,45 @@ const AuthContext = createContext<AuthContextType>({
 });
 
 export const AuthProvider: React.FC<PropsWithChildren> = ({ children }) => {
-  const queryClient = useQueryClient();  
+  const queryClient = useQueryClient();
   const { data } = useMe();
-  
-  const set = useCallback((updates: Partial<AuthData>) => {
-    queryClient.setQueryData(playerKeys.auth, (oldData: AuthData | undefined) => {
-      const currentData = oldData || defaultAuthData;
-      return {
-        ...currentData,
-        ...updates,
-        metadata: updates.metadata 
-          ? { ...currentData.metadata, ...updates.metadata }
-          : currentData.metadata
-      };
-    });
-  }, [queryClient]);
 
-  return (
-    <AuthContext
-      value={{ 
-        user: data?.user || defaultAuthData.user,
-        metadata: data?.metadata || defaultAuthData.metadata,
-        roles: data?.roles || defaultAuthData.roles,
-        set
-      }}>
-      {children}
-    </AuthContext>
-  )
+  const set = useCallback(
+    (updates: Partial<AuthData>) => {
+      queryClient.setQueryData(
+        playerKeys.auth,
+        (oldData: AuthData | undefined) => {
+          const currentData = oldData || defaultAuthData;
+          return {
+            ...currentData,
+            ...updates,
+            metadata: updates.metadata
+              ? { ...currentData.metadata, ...updates.metadata }
+              : currentData.metadata,
+          };
+        }
+      );
+    },
+    [queryClient]
+  );
+
+  const value = useMemo(
+    () => ({
+      user: data?.user || defaultAuthData.user,
+      metadata: data?.metadata || defaultAuthData.metadata,
+      roles: data?.roles || defaultAuthData.roles,
+      set,
+    }),
+    [data, defaultAuthData]
+  );
+
+  return <AuthContext value={value}>{children}</AuthContext>;
 };
 
 export const useAuth = () => {
   const context = useContext(AuthContext);
   if (!context) {
-    throw new Error('useAuth must be used within an AuthProvider');
+    throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
 };