Skip to main content

Provider

Overview​

The ServiceMessageProvider component is a React context provider that integrates with a real-time messaging system (presumably SignalR) to manage and distribute service messages within the application. It utilizes the useServiceMessageQuery hook to fetch initial service messages and the useSignalR hook to subscribe to real-time updates.

Props​

PropsWithChildren​

  • Type: PropsWithChildren
  • Description: React prop type that includes the children prop, allowing the rendering of child components.

State​

apps​

  • Type: string[] | undefined
  • Description: State variable holding an array of app keys. Used to filter service messages based on relevant apps.

Methods​

registerCurrentApps(apps?: string[]): void​

  • Parameters:
    • apps: (Optional) An array of app keys. If provided, service messages will be filtered based on these app keys.
  • Description: Sets the apps state variable, enabling the filtering of service messages based on relevant apps.

Hooks​

useEffect​

  • Dependencies:

    • data: The result of the useServiceMessageQuery hook.
    • apps: The current array of app keys.

  • Description: Handles the initial setup of service messages based on fetched data. If apps are provided, it filters and updates service messages accordingly.

useLayoutEffect​

  • Dependencies:

    • topic: The result of the useSignalR hook.
    • apps: The current array of app keys.

  • Description: Listens for real-time updates from the SignalR topic. Filters and updates service messages based on relevant apps if apps are provided.

Context Provider​

ServiceMessageContext.Provider​

  • Type: React.Provider<{ serviceMessages: ServiceMessages; registerCurrentApps: (apps?: string[]) => void }>

  • Value:

    • serviceMessages: An instance of the ServiceMessages class.
    • registerCurrentApps: A function to set the current array of app keys for filtering.

  • Description: Provides the ServiceMessageContext with the serviceMessages instance and the registerCurrentApps function to its descendants.

Usage Example​

import { ServiceMessageProvider } from 'path-to-ServiceMessageProvider';

const App = () => {
  return (
    <ServiceMessageProvider>
      {/* Other components and content */}
    </ServiceMessageProvider>
  );
};

This documentation provides a clear overview of the ServiceMessageProvider component, including its props, state, methods, hooks, and usage example.