react#Provider TypeScript Examples

export function useRecordRoot<K extends string | number, T>(
  context: Context<RootContext>,
  recRoot: Record<K, T>,
  onChange: (updater: Updater<Record<K, T>>) => void
): RootProviderDesc<T> {
  const setter = useCallback(
    (key: string | number, updater: Updater<T>) =>
      onChange((prev) => {
        checkKeyInRecord(key, prev)
        const updated = updater(prev[key as K])
        return isEqual(prev[key as K], updated) ? prev : { ...prev, [key]: updated }
      }),
    [onChange]
  )

  const getter = useCallback(
    (key: string | number): T => {
      checkKeyInRecord(key, recRoot)
      return recRoot[key as K]
    },
    [recRoot]
  )

  return [context.Provider as Provider<RootContext<T>>, { value: [getter, setter] }]
}

function makeStoreProvider<State, Actions, StoreParams extends object>(
  useStore: (params: StoreParams) => readonly [State, Actions],
  ...selectors: ((state: State) => any)[]
) {
  const [StateProvider, useState] = makeProvider<State>()
  const [ActionsProvider, useActions] = makeProvider<Actions>()

  const selectorProviders: Provider<any>[] = []
  const useSelectorHooks: any[] = []

  selectors.forEach(() => {
    const [SelectorProvider, useSelector] = makeProvider<any>()
    selectorProviders.push(SelectorProvider)
    useSelectorHooks.push(useSelector)
  })

  function StoreProvider(props: StoreParams & { children: ReactNode }) {
    const { children, ...storeParams } = props
    const [state, methods] = useStore(storeParams as StoreParams)

    let finalChildren = children

    selectorProviders.forEach((SelectorProvider, index) => {
      const selector = selectors[index]
      const value = selector(state)
      finalChildren = (
        <SelectorProvider value={value}>{finalChildren}</SelectorProvider>
      )
    })

    return (
      <ActionsProvider value={methods}>
        <StateProvider value={state}>{finalChildren}</StateProvider>
      </ActionsProvider>
    )
  }

  return [StoreProvider, useState, useActions, ...useSelectorHooks] as const
}

export function useArrayRoot<T>(
  context: Context<RootContext>,
  arrRoot: T[],
  onChange: (updater: Updater<T[]>) => void,
  getKey: (value: T, index: number) => string | number
): RootProviderDesc<T> {
  const setter = useCallback(
    (key: number | string, updater: Updater<T>) =>
      onChange((prev) => {
        const updatedIndex = prev.findIndex((item, index) => key === getKey(item, index))

        if (updatedIndex < 0) {
          throw new RangeError(`Invalid key "${key}" for update Array Root. Available keys: ${prev.map(getKey)}`)
        }

        const updated = updater(prev[updatedIndex])
        if (!isEqual(prev[updatedIndex], updated)) {
          const updatedRoot = [...prev]
          updatedRoot[updatedIndex] = updated
          return updatedRoot
        }

        return prev
      }),
    [onChange, getKey]
  )

  const getter = useCallback(
    (key: string | number): T => {
      const getIndex = arrRoot.findIndex((item, index) => key === getKey(item, index))

      if (getIndex < 0) {
        throw new RangeError(`Invalid key "${key}" for Array Root. Available keys: ${arrRoot.map(getKey)}`)
      }

      return arrRoot[getIndex]
    },
    [arrRoot, getKey]
  )

  return [context.Provider as Provider<RootContext<T>>, { value: [getter, setter] }]
}

/**
 * Создаёт единый компонент-провайдер для нескольких контекстов. Props
 * компонента определяются либо по соответствию ключ-значение переданного
 * словаря, либо на основе прокси-функции, с помощью которой будут
 * преобразовываться.
 *
 * @example
 * Создаём общего провайдера для двух контекстов
 * ```
 * const Root = makeCommonRoot({
 *   first: createContext(false),
 *   second: createContext(10)
 * })
 *
 * // <Root first={true} second={12}>...</Root>
 * ```
 *
 * @see {@link makeDistributedContext} для общей картины
 *
 * @param contexts - словарь контекстов, для которых будет создан общий провайдер
 * @param proxy - коллбэк, вызываемый при рендере компонента с переданными props,
 * длф подготовки к пробросу их в контексты.
 */
export function makeCommonProvider<Contexts extends ContextsRecord, RootProps = ContextsData<Contexts>>(
  contexts: Contexts,
  proxy?: (props: RootProps) => ContextsData<Contexts>
): FC<RootProps> {
  const providerPairs = Object.entries(contexts).map(
    ([key, ctx]) => [key, ctx.Provider] as [keyof Contexts, Provider<unknown>]
  )

  return ({ children, ...props }) => {
    const proxiedProps = proxy ? proxy(props as RootProps) : (props as ContextsData<Contexts>)
    const root = providerPairs.reduce(
      (curChildren, [key, provider]): ReactElement =>
        createElement(provider, { value: proxiedProps[key] }, curChildren),
      children
    ) as ReactElement | undefined

    return root || createElement(Fragment, {}, children)
  }
}

function makeProvider<T>() {
  const Context = createContext<T | undefined>(undefined)
  const useContext = makeUseContext(Context)

  return [Context.Provider, useContext] as const
}