GetChatSelector extends()

in packages/communication-react/src/mergedHooks.ts [65:145]


  GetChatSelector<Component> extends (state: ChatClientState, props: any) => any
    ? ReturnType<GetChatSelector<Component>> & Common<ChatHandlers, Parameters<Component>[0]>
    : never;

/**
 * Helper type for {@link usePropsFor}.
 *
 * @public
 */
export type CallingReturnProps<Component extends (props: any) => JSX.Element> =
  GetCallingSelector<Component> extends (state: CallClientState, props: any) => any
    ? ReturnType<GetCallingSelector<Component>> & Common<CallingHandlers, Parameters<Component>[0]>
    : never;

/**
 * Helper type for {@link usePropsFor}.
 *
 * @public
 */
export type ComponentProps<Component extends (props: any) => JSX.Element> =
  ChatReturnProps<Component> extends never
    ? CallingReturnProps<Component> extends never
      ? undefined
      : CallingReturnProps<Component>
    : ChatReturnProps<Component>;

/**
 * Primary hook to get all hooks necessary for a React Component from this library.
 *
 * To call this hook, the component requires to be wrapped under these providers:
 *
 * 1. For chat components: {@link ChatClientProvider} and {@link ChatThreadClientProvider}.
 *
 * 2. For calling components: {@link CallClientProvider}, {@link CallAgentProvider} and {@link CallAgentProvider}.
 *
 * Most straightforward usage of a components looks like:
 *
 * @example
 * ```
 *     import { ParticipantList, usePropsFor } from '@azure/communication-react';
 *
 *     const App = (): JSX.Element => {
 *         // ... code to setup Providers ...
 *
 *         return <ParticipantList {...usePropsFor(ParticipantList)}/>
 *     }
 * ```
 *
 * @public
 */
export const usePropsFor = <Component extends (props: any) => JSX.Element>(
  component: Component,
  type?: 'calling' | 'chat'
): ComponentProps<Component> => {
  const callingSelector = type === 'calling' || !type ? getCallingSelector(component) : undefined;
  const chatSelector = type === 'chat' || !type ? getChatSelector(component) : undefined;
  const callProps = useCallingSelector(callingSelector);
  const chatProps = useChatSelector(chatSelector);
  const callingHandlers = useCallingHandlers<Parameters<Component>[0]>(component);
  const chatHandlers = useChatHandlers<Parameters<Component>[0]>(component);

  if (chatProps) {
    if (!chatHandlers) {
      throw 'Please initialize chatClient and chatThreadClient first!';
    }
    return { ...chatProps, ...chatHandlers } as any;
  }

  if (callProps) {
    if (!callingHandlers) {
      throw 'Please initialize callClient first!';
    }
    return { ...callProps, ...callingHandlers } as any;
  }

  if (!chatSelector && !callingSelector) {
    throw "Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List.";
  } else {
    throw 'Could not find props for this component, ensure the component is wrapped by appropriate providers.';
  }
};