datajunction-ui 0.0.21 → 0.0.23-dev2

package/src/app/pages/NodePage/NodeDependenciesTab.jsx

@@ -4,53 +4,51 @@ import { labelize } from '../../../utils/form';
 import LoadingIcon from '../../icons/LoadingIcon';
 
 export default function NodeDependenciesTab({ node, djClient }) {
-  const [nodeDAG, setNodeDAG] = useState({
-    upstreams: [],
-    downstreams: [],
-    dimensions: [],
-  });
-
-  const [retrieved, setRetrieved] = useState(false);
+  const [upstreams, setUpstreams] = useState(null);
+  const [downstreams, setDownstreams] = useState(null);
+  const [dimensions, setDimensions] = useState(null);
 
   useEffect(() => {
-    const fetchData = async () => {
-      if (node) {
-        let upstreams = await djClient.upstreams(node.name);
-        let downstreams = await djClient.downstreams(node.name);
-        let dimensions = await djClient.nodeDimensions(node.name);
-        setNodeDAG({
-          upstreams: upstreams,
-          downstreams: downstreams,
-          dimensions: dimensions,
-        });
-        setRetrieved(true);
-      }
-    };
-    fetchData().catch(console.error);
+    if (node) {
+      // Reset state when node changes
+      setUpstreams(null);
+      setDownstreams(null);
+      setDimensions(null);
+
+      // Load all three in parallel, display each as it loads
+      djClient.upstreamsGQL(node.name).then(setUpstreams).catch(console.error);
+      djClient
+        .downstreamsGQL(node.name)
+        .then(setDownstreams)
+        .catch(console.error);
+      djClient
+        .nodeDimensions(node.name)
+        .then(setDimensions)
+        .catch(console.error);
+    }
   }, [djClient, node]);
 
-  // Builds the block of dimensions selectors, grouped by node name + path
   return (
     <div>
       <h2>Upstreams</h2>
-      {retrieved ? (
-        <NodeList nodes={nodeDAG.upstreams} />
+      {upstreams !== null ? (
+        <NodeList nodes={upstreams} />
       ) : (
         <span style={{ display: 'block' }}>
           <LoadingIcon centered={false} />
         </span>
       )}
       <h2>Downstreams</h2>
-      {retrieved ? (
-        <NodeList nodes={nodeDAG.downstreams} />
+      {downstreams !== null ? (
+        <NodeList nodes={downstreams} />
       ) : (
         <span style={{ display: 'block' }}>
           <LoadingIcon centered={false} />
         </span>
       )}
       <h2>Dimensions</h2>
-      {retrieved ? (
-        <NodeDimensionsList rawDimensions={nodeDAG.dimensions} />
+      {dimensions !== null ? (
+        <NodeDimensionsList rawDimensions={dimensions} />
       ) : (
         <span style={{ display: 'block' }}>
           <LoadingIcon centered={false} />
@@ -128,24 +126,28 @@ export function NodeDimensionsList({ rawDimensions }) {
 export function NodeList({ nodes }) {
   return nodes && nodes.length > 0 ? (
     <ul className="backfills">
-      {nodes?.map(node => (
-        <li
-          className="backfill"
-          style={{ marginBottom: '5px' }}
-          key={node.name}
-        >
-          <span
-            className={`node_type__${node.type} badge node_type`}
-            style={{ marginRight: '5px' }}
-            role="dialog"
-            aria-hidden="false"
-            aria-label="NodeType"
+      {nodes?.map(node => {
+        // GraphQL returns uppercase types (e.g., "SOURCE"), CSS classes expect lowercase
+        const nodeType = node.type?.toLowerCase() || '';
+        return (
+          <li
+            className="backfill"
+            style={{ marginBottom: '5px' }}
+            key={node.name}
           >
-            {node.type}
-          </span>
-          <a href={`/nodes/${node.name}`}>{node.name}</a>
-        </li>
-      ))}
+            <span
+              className={`node_type__${nodeType} badge node_type`}
+              style={{ marginRight: '5px' }}
+              role="dialog"
+              aria-hidden="false"
+              aria-label="NodeType"
+            >
+              {nodeType}
+            </span>
+            <a href={`/nodes/${node.name}`}>{node.name}</a>
+          </li>
+        );
+      })}
     </ul>
   ) : (
     <span style={{ display: 'block' }}>None</span>

package/src/app/pages/NodePage/NodeInfoTab.jsx

@@ -11,9 +11,31 @@ import { labelize } from '../../../utils/form';
 SyntaxHighlighter.registerLanguage('sql', sql);
 foundation.hljs['padding'] = '2rem';
 
+// interface MetricInfo {
+//   name: string;
+//   current: MetricRevision;
+// }
+
+// interface MetricRevision {
+//   parents: array<string>;
+//   metricMetadata:
+// }
+
+// interface MetricMetadata {
+//   direction: string;
+//   unit: string;
+//   expression: string;
+//   significantDigits: string;
+//   incompatibleDruidFunctions: array<string>;
+// }
+
 export default function NodeInfoTab({ node }) {
   const [compiledSQL, setCompiledSQL] = useState('');
   const [checked, setChecked] = useState(false);
+
+  // For metrics
+  const [metricInfo, setMetricInfo] = useState(null);
+
   const nodeTags = node?.tags.map(tag => (
     <div className={'badge tag_value'}>
       <a href={`/tags/${tag.name}`}>{tag.display_name}</a>
@@ -36,17 +58,49 @@ export default function NodeInfoTab({ node }) {
     };
     fetchData().catch(console.error);
   }, [node, djClient, checked]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const metric = await djClient.getMetric(node.name);
+      setMetricInfo({
+        metric_metadata: metric.current.metricMetadata,
+        required_dimensions: metric.current.requiredDimensions,
+        upstream_node: metric.current.parents[0]?.name,
+        expression: metric.current.metricMetadata?.expression,
+        incompatible_druid_functions:
+          metric.current.metricMetadata?.incompatibleDruidFunctions || [],
+      });
+    };
+    if (node.type === 'metric') {
+      fetchData().catch(console.error);
+    }
+  }, [node, djClient]);
+
+  // For cubes
+  const [cubeElements, setCubeElements] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const cube = await djClient.cube(node.name);
+      setCubeElements(cube.cube_elements);
+    };
+    if (node.type === 'cube') {
+      fetchData().catch(console.error);
+    }
+  }, [node, djClient]);
+
   function toggle(value) {
     return !value;
   }
   const metricsWarning =
-    node?.type === 'metric' && node?.incompatible_druid_functions.length > 0 ? (
+    node?.type === 'metric' &&
+    metricInfo?.incompatible_druid_functions?.length > 0 ? (
       <div className="message warning" style={{ marginTop: '0.7rem' }}>
         ⚠{' '}
         <small>
           The following functions used in the metric definition may not be
           compatible with Druid SQL:{' '}
-          {node?.incompatible_druid_functions.map(func => (
+          {metricInfo?.incompatible_druid_functions.map(func => (
             <li
               style={{ listStyleType: 'none', margin: '0.7rem 0.7rem' }}
               key={func}
@@ -79,15 +133,15 @@ export default function NodeInfoTab({ node }) {
           <div style={{ marginBottom: '30px' }}>
             <h6 className="mb-0 w-100">Upstream Node</h6>
             <p>
-              <a href={`/nodes/${node?.upstream_node}`}>
-                {node?.upstream_node}
+              <a href={`/nodes/${metricInfo?.upstream_node}`}>
+                {metricInfo?.upstream_node}
               </a>
             </p>
           </div>
           <div>
             <h6 className="mb-0 w-100">Aggregate Expression</h6>
             <SyntaxHighlighter language="sql" style={foundation}>
-              {node?.expression}
+              {metricInfo?.expression}
             </SyntaxHighlighter>
           </div>
         </div>
@@ -163,8 +217,10 @@ export default function NodeInfoTab({ node }) {
               aria-hidden="false"
               aria-label="MetricDirection"
             >
-              {node?.metric_metadata?.direction
-                ? labelize(node?.metric_metadata?.direction?.toLowerCase())
+              {metricInfo?.metric_metadata?.direction
+                ? labelize(
+                    metricInfo?.metric_metadata?.direction?.toLowerCase(),
+                  )
                 : 'None'}
             </p>
           </div>
@@ -176,8 +232,10 @@ export default function NodeInfoTab({ node }) {
               aria-hidden="false"
               aria-label="MetricUnit"
             >
-              {node?.metric_metadata?.unit?.name
-                ? labelize(node?.metric_metadata?.unit?.name?.toLowerCase())
+              {metricInfo?.metric_metadata?.unit?.name
+                ? labelize(
+                    metricInfo?.metric_metadata?.unit?.name?.toLowerCase(),
+                  )
                 : 'None'}
             </p>
           </div>
@@ -189,7 +247,7 @@ export default function NodeInfoTab({ node }) {
               aria-hidden="false"
               aria-label="SignificantDigits"
             >
-              {node?.metric_metadata?.significantDigits || 'None'}
+              {metricInfo?.metric_metadata?.significantDigits || 'None'}
             </p>
           </div>
         </div>
@@ -218,7 +276,7 @@ export default function NodeInfoTab({ node }) {
       ''
     );
 
-  const cubeElementsDiv = node?.cube_elements ? (
+  const cubeElementsDiv = cubeElements ? (
     <div className="list-group-item d-flex">
       <div className="d-flex gap-2 w-100 justify-content-between py-3">
         <div
@@ -228,10 +286,10 @@ export default function NodeInfoTab({ node }) {
         >
           <h6 className="mb-0 w-100">Cube Elements</h6>
           <div className={`list-group-item`}>
-            {node.cube_elements.map(cubeElem =>
+            {cubeElements.map(cubeElem =>
               cubeElem.type === 'metric' ? displayCubeElement(cubeElem) : '',
             )}
-            {node.cube_elements.map(cubeElem =>
+            {cubeElements.map(cubeElem =>
               cubeElem.type !== 'metric' ? displayCubeElement(cubeElem) : '',
             )}
           </div>
@@ -375,8 +433,8 @@ export default function NodeInfoTab({ node }) {
         </div>
       </div>
       {metricMetadataDiv}
-      {node?.type !== 'cube' && node?.type !== 'metric' ? queryDiv : ''}
-      {node?.type === 'metric' ? metricQueryDiv : ''}
+      {node.type !== 'cube' && node.type !== 'metric' ? queryDiv : ''}
+      {node.type === 'metric' ? metricQueryDiv : ''}
       {customMetadataDiv}
       {cubeElementsDiv}
     </div>

package/src/app/pages/NodePage/__tests__/NodeDependenciesTab.test.jsx

@@ -6,8 +6,8 @@ describe('<NodeDependenciesTab />', () => {
   const mockDjClient = {
     node: jest.fn(),
     nodeDimensions: jest.fn(),
-    upstreams: jest.fn(),
-    downstreams: jest.fn(),
+    upstreamsGQL: jest.fn(),
+    downstreamsGQL: jest.fn(),
   };
 
   const mockNode = {
@@ -131,14 +131,20 @@ describe('<NodeDependenciesTab />', () => {
   beforeEach(() => {
     // Reset the mocks before each test
     mockDjClient.nodeDimensions.mockReset();
-    mockDjClient.upstreams.mockReset();
-    mockDjClient.downstreams.mockReset();
+    mockDjClient.upstreamsGQL.mockReset();
+    mockDjClient.downstreamsGQL.mockReset();
   });
 
   it('renders nodes with dimensions', async () => {
-    mockDjClient.nodeDimensions.mockReturnValue(mockDimensions);
-    mockDjClient.upstreams.mockReturnValue([mockNode]);
-    mockDjClient.downstreams.mockReturnValue([mockNode]);
+    // Use mockResolvedValue since the component now uses .then()
+    mockDjClient.nodeDimensions.mockResolvedValue(mockDimensions);
+    // GraphQL responses return uppercase types (e.g., "SOURCE")
+    mockDjClient.upstreamsGQL.mockResolvedValue([
+      { name: mockNode.name, type: 'SOURCE' },
+    ]);
+    mockDjClient.downstreamsGQL.mockResolvedValue([
+      { name: mockNode.name, type: 'SOURCE' },
+    ]);
     render(<NodeDependenciesTab node={mockNode} djClient={mockDjClient} />);
     await waitFor(() => {
       for (const dimension of mockDimensions) {

package/src/app/pages/NodePage/__tests__/NodePage.test.jsx

@@ -26,7 +26,7 @@ describe('<NodePage />', () => {
         getMetric: jest.fn(),
         revalidate: jest.fn().mockReturnValue({ status: 'valid' }),
         node_dag: jest.fn().mockReturnValue(mocks.mockNodeDAG),
-        clientCode: jest.fn().mockReturnValue('dj_client = DJClient()'),
+        clientCode: jest.fn().mockResolvedValue('dj_client = DJClient()'),
         columns: jest.fn(),
         history: jest.fn(),
         revisions: jest.fn(),
@@ -298,7 +298,7 @@ describe('<NodePage />', () => {
   it('renders the NodeInfo tab correctly for a metric node', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     const element = (
@@ -351,17 +351,27 @@ describe('<NodePage />', () => {
       expect(
         screen.getByRole('dialog', { name: 'NodeType' }),
       ).toHaveTextContent('metric');
+    });
 
-      expect(
-        container.getElementsByClassName('language-sql'),
-      ).toMatchSnapshot();
+    // Wait separately for getMetric to be called and data to render
+    await waitFor(() => {
+      expect(djClient.DataJunctionAPI.getMetric).toHaveBeenCalledWith(
+        'default.num_repair_orders',
+      );
+    });
+
+    // Wait for metric expression to appear (SyntaxHighlighter may split text)
+    await waitFor(() => {
+      expect(screen.getByText(/count/)).toBeInTheDocument();
     });
+
+    expect(container.getElementsByClassName('language-sql')).toMatchSnapshot();
   }, 60000);
 
   it('renders the NodeInfo tab correctly for cube nodes', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockCubeNode);
-    djClient.DataJunctionAPI.cube.mockReturnValue(mocks.mockCubesCube);
+    djClient.DataJunctionAPI.cube.mockResolvedValue(mocks.mockCubesCube);
     const element = (
       <DJClientContext.Provider value={djClient}>
         <NodePage {...defaultProps} />
@@ -420,7 +430,7 @@ describe('<NodePage />', () => {
   it('renders the NodeColumns tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockResolvedValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockResolvedValue(mocks.metricNodeColumns);
@@ -448,7 +458,7 @@ describe('<NodePage />', () => {
     );
     await waitFor(() => {
       expect(djClient.DataJunctionAPI.columns).toHaveBeenCalledWith(
-        mocks.mockMetricNode,
+        expect.objectContaining({ name: mocks.mockMetricNode.name }),
       );
       expect(
         screen.getByRole('columnheader', { name: 'ColumnName' }),
@@ -498,7 +508,7 @@ describe('<NodePage />', () => {
   it('renders the NodeHistory tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
@@ -600,7 +610,7 @@ describe('<NodePage />', () => {
   it('renders an empty NodeMaterialization tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
@@ -640,7 +650,7 @@ describe('<NodePage />', () => {
   it('renders the NodeMaterialization tab with materializations correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockTransformNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
@@ -795,7 +805,7 @@ describe('<NodePage />', () => {
   it('renders a NodeColumnLineage tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
@@ -828,7 +838,7 @@ describe('<NodePage />', () => {
   it('renders a NodeGraph tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
+    djClient.DataJunctionAPI.getMetric.mockResolvedValue(
       mocks.mockMetricNodeJson,
     );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);

package/src/app/pages/NodePage/index.jsx

@@ -17,6 +17,7 @@ import NodesWithDimension from './NodesWithDimension';
 import NodeColumnLineage from './NodeLineageTab';
 import EditIcon from '../../icons/EditIcon';
 import AlertIcon from '../../icons/AlertIcon';
+import LoadingIcon from '../../icons/LoadingIcon';
 import NodeDependenciesTab from './NodeDependenciesTab';
 import { useNavigate } from 'react-router-dom';
 
@@ -30,7 +31,7 @@ export function NodePage() {
     selectedTab: tab || 'info',
   });
 
-  const [node, setNode] = useState();
+  const [node, setNode] = useState(null);
 
   const onClickTab = id => () => {
     navigate(`/nodes/${name}/${id}`);
@@ -52,21 +53,12 @@ export function NodePage() {
   useEffect(() => {
     const fetchData = async () => {
       const data = await djClient.node(name);
-      data.createNodeClientCode = await djClient.clientCode(name);
-      if (data.type === 'metric') {
-        const metric = await djClient.getMetric(name);
-        data.metric_metadata = metric.current.metricMetadata;
-        data.required_dimensions = metric.current.requiredDimensions;
-        data.upstream_node = metric.current.parents[0].name;
-        data.expression = metric.current.metricMetadata.expression;
-        data.incompatible_druid_functions =
-          metric.current.metricMetadata.incompatibleDruidFunctions;
+      if (data.message !== undefined) {
+        // Error response
+        setNode(data);
+        return;
       }
-      if (data.type === 'cube') {
-        const cube = await djClient.cube(name);
-        data.cube_elements = cube.cube_elements;
-      }
-      setNode(data);
+      setNode({ ...data });
     };
     fetchData().catch(console.error);
   }, [djClient, name]);
@@ -124,8 +116,7 @@ export function NodePage() {
 
   switch (state.selectedTab) {
     case 'info':
-      tabToDisplay =
-        node && node.message === undefined ? <NodeInfoTab node={node} /> : '';
+      tabToDisplay = node ? <NodeInfoTab node={node} /> : '';
       break;
     case 'columns':
       tabToDisplay = <NodeColumnTab node={node} djClient={djClient} />;
@@ -168,7 +159,7 @@ export function NodePage() {
 
         <WatchButton node={node} />
 
-        <ClientCodePopover code={node?.createNodeClientCode} />
+        <ClientCodePopover nodeName={name} />
         {node?.type === 'cube' && <NotebookDownload node={node} />}
       </div>
     );
@@ -179,7 +170,11 @@ export function NodePage() {
     <div className="node__header">
       <NamespaceHeader namespace={name.split('.').slice(0, -1).join('.')} />
       <div className="card">
-        {node?.message === undefined ? (
+        {node === undefined ? (
+          <div style={{ padding: '2rem', textAlign: 'center' }}>
+            <LoadingIcon />
+          </div>
+        ) : node?.message === undefined ? (
           <div className="card-header" style={{}}>
             <div
               style={{

package/src/app/pages/SettingsPage/__tests__/index.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { SettingsPage } from '../index';
 import DJClientContext from '../../../providers/djclient';
+import { UserProvider } from '../../../providers/UserProvider';
 
 describe('SettingsPage', () => {
   const mockDjClient = {
@@ -18,7 +19,9 @@ describe('SettingsPage', () => {
   const renderWithContext = () => {
     return render(
       <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
-        <SettingsPage />
+        <UserProvider>
+          <SettingsPage />
+        </UserProvider>
       </DJClientContext.Provider>,
     );
   };

package/src/app/pages/SettingsPage/index.jsx

@@ -1,5 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import DJClientContext from '../../providers/djclient';
+import { useCurrentUser } from '../../providers/UserProvider';
 import LoadingIcon from '../../icons/LoadingIcon';
 import ProfileSection from './ProfileSection';
 import NotificationSubscriptionsSection from './NotificationSubscriptionsSection';
@@ -11,18 +12,17 @@ import '../../../styles/settings.css';
  */
 export function SettingsPage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const [currentUser, setCurrentUser] = useState(null);
+  const { currentUser, loading: userLoading } = useCurrentUser();
   const [subscriptions, setSubscriptions] = useState([]);
   const [serviceAccounts, setServiceAccounts] = useState([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    // Wait for user to be loaded from context
+    if (userLoading) return;
+
     async function fetchData() {
       try {
-        // Fetch user profile
-        const user = await djClient.whoami();
-        setCurrentUser(user);
-
         // Fetch notification subscriptions
         const prefs = await djClient.getNotificationPreferences();
 
@@ -69,7 +69,7 @@ export function SettingsPage() {
       }
     }
     fetchData();
-  }, [djClient]);
+  }, [djClient, userLoading]);
 
   // Subscription handlers
   const handleUpdateSubscription = async (sub, activityTypes) => {

package/src/app/providers/UserProvider.tsx

@@ -0,0 +1,78 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from 'react';
+import DJClientContext from './djclient';
+
+interface User {
+  id?: number;
+  username?: string;
+  email?: string;
+  name?: string;
+  last_viewed_notifications_at?: string | null;
+}
+
+interface UserContextType {
+  currentUser: User | null;
+  loading: boolean;
+  error: Error | null;
+  refetchUser: () => Promise<void>;
+}
+
+const UserContext = createContext<UserContextType>({
+  currentUser: null,
+  loading: true,
+  error: null,
+  refetchUser: async () => {},
+});
+
+export function UserProvider({ children }: { children: React.ReactNode }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchUser = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const user = await djClient.whoami();
+      setCurrentUser(user);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch user'));
+      console.error('Error fetching user:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [djClient]);
+
+  useEffect(() => {
+    fetchUser();
+  }, [fetchUser]);
+
+  const value = useMemo(
+    () => ({
+      currentUser,
+      loading,
+      error,
+      refetchUser: fetchUser,
+    }),
+    [currentUser, loading, error, fetchUser],
+  );
+
+  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+}
+
+export function useCurrentUser() {
+  const context = useContext(UserContext);
+  if (context === undefined) {
+    throw new Error('useCurrentUser must be used within a UserProvider');
+  }
+  return context;
+}
+
+export default UserContext;