Entity.tsx

import React, { Context, useContext } from 'react'

export interface IEntityProviderProps<EntityType> {
  children: React.ReactNode
  context: Context<ValueType<EntityType>>
  entity: EntityType | undefined
}

type ValueType<EntityType> = { initialized: true; entity: EntityType } | { initialized: false }

export const createContext = <EntityType extends unknown>(): Context<ValueType<EntityType>> =>
  React.createContext<ValueType<EntityType>>({ initialized: false })

export function EntityProvider<EntityType extends unknown>({
  context,
  children,
  entity,
}: IEntityProviderProps<EntityType>): JSX.Element {
  return (
    <context.Provider value={entity ? { initialized: true, entity } : { initialized: false }}>
      {children}
    </context.Provider>
  )
}

export const useEntity = <EntityType extends unknown>(
  Context: Context<ValueType<EntityType>>,
  name: string
) => {
  const context = useContext(Context)
  if (context === undefined) {
    throw new Error(`useContext must be used within a ${name}Provider`)
  }
  return context.initialized ? context.entity : undefined
}