@accounter/client 0.0.8-alpha-20251022130946-0923a77d2ee3f22a60a7f5b1e0623bd3bee88868 → 0.0.8-alpha-20251022131500-0d2446e83760934b05cf2c65a8b065989f7724c8

package/src/index.tsx

@@ -1,32 +1,14 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import {
-  createBrowserRouter,
-  createRoutesFromElements,
-  Route,
-  RouterProvider,
-} from 'react-router-dom';
-import { App } from './app.js';
-import { Providers } from './providers/index.js';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { routes } from './router/config.js';
 import './index.css';
 
 const rootElement = document.getElementById('root');
-
 const root = createRoot(rootElement!);
 
-const router = createBrowserRouter(
-  createRoutesFromElements(
-    <Route
-      path="*"
-      element={
-        <Providers>
-          <App />
-        </Providers>
-      }
-      errorElement={<p>error</p>} // TODO: implement
-    />,
-  ),
-);
+// Create router with object-based configuration
+const router = createBrowserRouter(routes);
 
 root.render(
   <StrictMode>

package/src/providers/auth-guard.tsx

@@ -1,7 +1,4 @@
-import { createContext, useEffect, useState, type ReactNode } from 'react';
-import { Route, Routes, useNavigate } from 'react-router-dom';
-import { NetworkError } from '@/components/screens/network-error.js';
-import { LoginPage } from '../components/login-page.js';
+import { createContext, useMemo, useState, type ReactNode } from 'react';
 import { UserService } from '../services/user-service.js';
 
 type ContextType = {
@@ -14,25 +11,19 @@ export const AuthContext = createContext<ContextType>({
   setAuthService: () => void 0,
 });
 
-export const AuthGuard = ({ children }: { children?: ReactNode }): ReactNode => {
-  const [authService, setAuthService] = useState<UserService>(new UserService());
-  const navigate = useNavigate();
+/**
+ * AuthProvider - provides authentication context
+ * Auth routing logic is now handled by route loaders
+ */
+export const AuthProvider = ({ children }: { children?: ReactNode }): ReactNode => {
+  // Use lazy initialization to prevent creating new UserService on every render
+  const [authService, setAuthService] = useState<UserService>(() => new UserService());
 
-  const loggedIn = authService.isLoggedIn();
+  // Memoize the context value to prevent unnecessary re-renders
+  const contextValue = useMemo(() => ({ authService, setAuthService }), [authService]);
 
-  useEffect(() => {
-    if (!loggedIn) {
-      navigate('/login');
-    }
-  }, [loggedIn, navigate]);
-
-  return (
-    <AuthContext.Provider value={{ authService, setAuthService }}>
-      <Routes>
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/network-error" element={<NetworkError />} />
-        <Route path="*" element={children} />
-      </Routes>
-    </AuthContext.Provider>
-  );
+  return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>;
 };
+
+// Keep AuthGuard as alias for backwards compatibility
+export const AuthGuard = AuthProvider;

package/src/providers/index.tsx

@@ -5,9 +5,14 @@ import { red } from '@mui/material/colors';
 import { createTheme } from '@mui/material/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from '../components/ui/sonner.js';
-import { AuthGuard } from './auth-guard.js';
+import { AuthContext, AuthGuard, AuthProvider } from './auth-guard.js';
 import { UrqlProvider } from './urql.js';
-import { UserProvider } from './user-provider.js';
+import { UserContext, UserProvider, type UserInfo } from './user-provider.js';
+
+export { AuthGuard, AuthProvider, AuthContext };
+export { FiltersContext } from './filters-context.js';
+export { UrqlProvider };
+export { UserProvider, UserContext, type UserInfo };
 
 const queryClient = new QueryClient();
 

package/src/providers/urql-client.ts

@@ -0,0 +1,86 @@
+import {
+  createClient,
+  fetchExchange,
+  mapExchange,
+  type AnyVariables,
+  type Client,
+  type Operation,
+} from 'urql';
+import { authExchange } from '@urql/exchange-auth';
+import { UserService } from '../services/user-service.js';
+
+/**
+ * Singleton URQL client for use in loaders and server-side operations
+ * This is separate from the Provider client to avoid React context dependencies
+ */
+let globalClient: Client | null = null;
+
+export function getUrqlClient(): Client {
+  if (globalClient) {
+    return globalClient;
+  }
+
+  const authService = new UserService();
+
+  let url: string;
+  switch (import.meta.env.MODE) {
+    case 'production': {
+      url = 'https://accounter.onrender.com/graphql';
+      break;
+    }
+    case 'staging': {
+      url = 'https://accounter-staging.onrender.com/graphql';
+      break;
+    }
+    default: {
+      url = 'http://localhost:4000/graphql';
+      break;
+    }
+  }
+
+  globalClient = createClient({
+    url,
+    exchanges: [
+      mapExchange({
+        onResult(result) {
+          if (result.error?.networkError) {
+            console.error('Network Error:', result.error.networkError);
+          }
+        },
+      }),
+      authExchange(async utils => {
+        return {
+          addAuthToOperation(operation): Operation<void, AnyVariables> {
+            const token = authService.authToken();
+            if (!token) {
+              return operation;
+            }
+            return utils.appendHeaders(operation, {
+              Authorization: token,
+            });
+          },
+          didAuthError(error, _operation): boolean {
+            return (
+              error?.response?.status === 401 ||
+              error?.graphQLErrors?.some(e => e.extensions?.code === 'FORBIDDEN')
+            );
+          },
+          async refreshAuth(): Promise<void> {
+            authService.logout();
+            // Redirect handled by route loader
+          },
+        };
+      }),
+      fetchExchange,
+    ],
+  });
+
+  return globalClient;
+}
+
+/**
+ * Reset the global client (useful for tests or logout)
+ */
+export function resetUrqlClient(): void {
+  globalClient = null;
+}

package/src/providers/urql.tsx

@@ -9,23 +9,23 @@ import {
   type Operation,
 } from 'urql';
 import { authExchange } from '@urql/exchange-auth';
+import { ROUTES } from '../router/routes.js';
 import { AuthContext } from './auth-guard.js';
 
 export function UrqlProvider({ children }: { children?: ReactNode }): ReactNode {
   const { authService } = useContext(AuthContext);
   const navigate = useNavigate();
+
+  // Track login state to trigger token updates
   const loggedIn = authService.isLoggedIn();
 
   const token = useMemo(() => {
     const token = authService.authToken();
     return token;
-  }, [authService]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- loggedIn is needed to trigger token refresh on login
+  }, [authService, loggedIn]);
 
   const client = useMemo(() => {
-    if (!loggedIn) {
-      return null;
-    }
-
     let url: string;
     switch (import.meta.env.MODE) {
       case 'production': {
@@ -47,16 +47,11 @@ export function UrqlProvider({ children }: { children?: ReactNode }): ReactNode
       exchanges: [
         mapExchange({
           onResult(result) {
-            if (result.error?.networkError) {
-              console.error('Network Error:', result.error.networkError);
-              navigate('/network-error');
-              return;
-            }
             const isAuthError =
               result?.error?.graphQLErrors.some(e => e.extensions?.code === 'FORBIDDEN') ||
               result?.error?.response?.status === 401;
             if (isAuthError) {
-              navigate('/login', {
+              navigate(ROUTES.LOGIN, {
                 state: { message: 'You are not authorized to access this page' },
               });
             }
@@ -86,7 +81,7 @@ export function UrqlProvider({ children }: { children?: ReactNode }): ReactNode
         fetchExchange,
       ],
     });
-  }, [loggedIn, navigate, token, authService]);
+  }, [navigate, token, authService]);
 
   useEffect(() => {
     if (!client) {

package/src/providers/user-provider.tsx

@@ -54,13 +54,14 @@ export function UserProvider({ children }: { children?: ReactNode }): ReactNode
   });
 
   // update active user
-  const currentUser = authService.currentUser();
   useEffect(() => {
+    const currentUser = authService.currentUser();
     if (!equal(currentUser, user)) {
       setUser(currentUser);
       fetchUserContext();
     }
-  }, [currentUser, user, fetchUserContext]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- authService and fetchUserContext are stable
+  }, [user]);
 
   // on user defaults fetched, update user defaults
   useEffect(() => {