DistrictDisplay

DistrictDisplay

The DistrictDisplay component is a specialized wrapper for HeaderDistrictDisplay that fetches and displays the currently selected district for IDIR (government) users.

Props

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

Usage

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

<DistrictDisplay isActive={isHeaderPanelOpen} />

Features

District Code Access

Fetches all available district codes from the codes service.

Selected District Display

Displays the currently selected district from user preferences, showing:

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

Data Fetching

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

Data Flow

Query Configuration

const { data, isLoading } = useQuery({
  queryKey: ['districtOptions'],
  queryFn: async () => await APIs.codes.getDistricts(),
  enabled: true,
  select: (data) =>
    data
      .map((district) => ({ 
        id: district.code, 
        name: district.description, 
        kind: 'D' 
      }))
      .find((client) => client.id === userPreference.selectedDistrict),
});

Data Transformation

Raw district data is transformed to DistrictType format:

• id: district.code
• name: district.description
• kind: 'D' (District type)

Then filters to find the selected district matching userPreference.selectedDistrict.

State Management

Preference Context

const { userPreference } = usePreference();

Retrieves selectedDistrict preference key to identify which district is currently selected.

Query Behavior

Always Enabled

enabled: true

The query executes immediately as district data is publicly available and doesn't depend on user permissions.

Cache Key

queryKey: ['districtOptions']

Simple cache key as district data is the same for all users.

Data Selection

The select function:

1. Maps all districts to DistrictType format
2. Finds the district matching userPreference.selectedDistrict
3. Returns single district object or undefined

Integration with HeaderDistrictDisplay

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

Configuration

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

Dependencies

Required Context Providers

• PreferenceProvider: For selectedDistrict preference
• QueryClientProvider: For React Query functionality

API Services

• APIs.codes.getDistricts: Fetches district codes

Sub-Components

• HeaderDistrictDisplay: Generic display component

Use Cases

IDIR Users

This component is specifically for government users who:

• Have access to all districts
• Need to see which district context they're working in
• Want to quickly identify their selected district in the header

Data Requirements

Available Districts

Districts are loaded from the codes service and are available to all users.

Selected District Preference

User may or may not have a selected district:

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

Responsive Behavior

Inherits responsive behavior from HeaderDistrictDisplay:

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

Integration Example

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

const queryClient = new QueryClient();

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

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

Query Performance

Caching

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

Stale Time

Uses default stale time, but district codes rarely change so cached data is usually fresh.

Refetch Conditions

• On mount (if stale)
• On window focus (if stale)
• Manual invalidation

Query Optimization

Consider setting a longer staleTime for district data:

useQuery({
  queryKey: ['districtOptions'],
  queryFn: async () => await APIs.codes.getDistricts(),
  staleTime: Infinity, // Districts rarely change
  // ...
});

Error Handling

If the query fails:

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

Related Components

• HeaderDistrictDisplay: Base display component
• ClientDisplay: Alternative for BCeID Business users
• LayoutHeaderGlobalBar: Parent component
• DistrictListing: Selection interface in profile panel

Best Practices

1. Cache Management: Consider longer stale time for district data
2. Error Boundaries: Wrap in error boundary for graceful error handling
3. Loading States: Query handles loading automatically
4. Preference Updates: Invalidate cache when districts are updated

Differences from ClientDisplay

Aspect	ClientDisplay	DistrictDisplay
Users	BCeID Business	IDIR
Data Source	Forest Client API	Codes API
Enabled Logic	Based on client access	Always enabled
Query Dependency	User's client list	None
Cache Key	Includes client list	Simple key

Notes

• Component is specifically for IDIR (government) users
• All districts are available to all users (no permission checks)
• Automatically updates when selection changes in preferences
• Data fetching is optimized with React Query caching
• Seamlessly integrates with the selection interface in HeaderPanelProfile
• Uses the same display component as ClientDisplay for consistency