ClientDisplay

ClientDisplay

The ClientDisplay component is a specialized wrapper for HeaderDistrictDisplay that fetches and displays the currently selected forest client for BCeID Business users.

Props

Name	Type	Required	Description
isActive	boolean	✅	Whether the header panel is currently open

Usage

import ClientDisplay from '@/components/Layout/HeaderDistrictDisplay/ClientDisplay';

<ClientDisplay isActive={isHeaderPanelOpen} />

Features

Authenticated Client Access

Fetches clients based on the authenticated user's access list using the getClients() method from the auth context.

Selected Client Display

Displays the currently selected client from user preferences, showing:

• Client name
• Panel state indicator (chevron up/down)

Data Fetching

Uses React Query to fetch client details and automatically finds the selected client from the user's preference.

Data Flow

Query Configuration

const { data, isLoading } = useQuery({
  queryKey: ['forest-clients', 'search', getClients()],
  queryFn: () => APIs.forestclient.searchByClientNumbers(
    getClients(), 
    0, 
    getClients().length
  ),
  enabled: !!getClients().length,
  select: (data) =>
    data
      .map((client) => ({
        id: client.clientNumber,
        name: client.name ?? client.clientName,
        kind: client.clientTypeCode?.code,
      }))
      .find((client) => client.id === userPreference.selectedClient),
});

Data Transformation

Raw client data is transformed to DistrictType format:

• id: client.clientNumber
• name: client.name with fallback to client.clientName
• kind: client.clientTypeCode?.code

Then filters to find the selected client matching userPreference.selectedClient.

State Management

Authentication Context

const { getClients } = useAuth();

Provides access to the list of client numbers the user has permission to view.

Preference Context

const { userPreference } = usePreference();

Retrieves selectedClient preference key to identify which client is currently selected.

Query Behavior

Enabled Condition

enabled: !!getClients().length

The query only executes when the user has at least one accessible client.

Cache Key

queryKey: ['forest-clients', 'search', getClients()]

Includes the client list in the cache key, ensuring refetch when accessible clients change.

Data Selection

The select function:

1. Maps all clients to DistrictType format
2. Finds the client matching userPreference.selectedClient
3. Returns single client object or undefined

Integration with HeaderDistrictDisplay

<HeaderDistrictDisplay
  isActive={isActive}
  noSelectionText="No client selected"
  queryHook={() => ({ data, isLoading })}
/>

Configuration

• isActive: Passed through from props
• noSelectionText: "No client selected" (shown when no preference set)
• queryHook: Returns current query state

Dependencies

Required Context Providers

• AuthProvider: For getClients() method
• PreferenceProvider: For selectedClient preference
• QueryClientProvider: For React Query functionality

API Services

• APIs.forestclient.searchByClientNumbers: Fetches client details

Sub-Components

• HeaderDistrictDisplay: Generic display component

Use Cases

BCeID Business Users

This component is specifically for business users who:

• Have access to multiple forest clients
• Need to see which client context they're working in
• Want to quickly identify their selected client in the header

Data Requirements

Accessible Clients

User must have at least one client in their access list:

getClients().length > 0

Selected Client Preference

User may or may not have a selected client:

• With selection: Displays client name
• No selection: Displays "No client selected"

Responsive Behavior

Inherits responsive behavior from HeaderDistrictDisplay:

• Mobile: Hidden (only avatar shown)
• Desktop/Tablet: Full display with client name and chevron

Integration Example

import { AuthProvider } from '@/context/auth/AuthProvider';
import { PreferenceProvider } from '@/context/preference/PreferenceProvider';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import ClientDisplay from '@/components/Layout/HeaderDistrictDisplay/ClientDisplay';

const queryClient = new QueryClient();

function HeaderGlobalBar() {
  const { isHeaderPanelOpen } = useLayout();

  return (
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <PreferenceProvider>
          <HeaderGlobalAction>
            <AvatarImage />
            <ClientDisplay isActive={isHeaderPanelOpen} />
          </HeaderGlobalAction>
        </PreferenceProvider>
      </AuthProvider>
    </QueryClientProvider>
  );
}

Query Performance

Caching

Client data is cached by React Query, reducing unnecessary API calls.

Stale Time

Uses default stale time, meaning data refetches on mount if stale.

Refetch Conditions

• On mount (if stale)
• On window focus (if stale)
• When getClients() array changes

Error Handling

If the query fails:

• Component continues to render
• Shows "No client selected" text
• Error can be caught by Error Boundary if needed

Related Components

• HeaderDistrictDisplay: Base display component
• DistrictDisplay: Alternative for IDIR users
• LayoutHeaderGlobalBar: Parent component
• ClientListing: Selection interface in profile panel

Best Practices

1. Context Order: Ensure AuthProvider wraps PreferenceProvider
2. Error Boundaries: Wrap in error boundary for graceful error handling
3. Loading States: Query handles loading automatically
4. Cache Invalidation: Invalidate cache when client access changes

Notes

• Component is specifically for BCeID Business users
• Only displays when user has client access
• Automatically updates when selection changes in preferences
• Data fetching is optimized with React Query caching
• Seamlessly integrates with the selection interface in HeaderPanelProfile