react#Context TypeScript Examples

function makeUseContext<T>(context: Context<T>) {
  function useCustomContext() {
    const value = useContext(context)

    if (!guard(value)) {
      throw new Error('Missing store context provider')
    }

    return value
  }

  return useCustomContext
}

constructor(props: QueryFieldProps, context: Context<any>) {
    super(props, context);

    this.runOnChangeDebounced = _.debounce(this.runOnChange, 500);

    const { onTypeahead, cleanText, portalOrigin, onWillApplySuggestion } = props;

    // Base plugins
    this.plugins = [
      NewlinePlugin(),
      SuggestionsPlugin({ onTypeahead, cleanText, portalOrigin, onWillApplySuggestion }),
      ClearPlugin(),
      RunnerPlugin({ handler: this.runOnChangeAndRunQuery }),
      SelectionShortcutsPlugin(),
      IndentationPlugin(),
      ClipboardPlugin(),
      ...(props.additionalPlugins || []),
    ].filter(p => p);

    this.state = {
      suggestions: [],
      typeaheadContext: null,
      typeaheadPrefix: '',
      typeaheadText: '',
      value: makeValue(props.query || '', props.syntax),
    };
  }

createUseContextFn =
  <T>(context: Context<T>, checkNull?: boolean) =>
  (): T => {
    const value = useContext(context)

    if (checkNull && value == null) {
      throw new Error(`${context.displayName} must be used inside a ${context.Provider.name}.`)
    }

    return value
  }

/**
 * Get the existing or create a new versioned React context that's
 * stored inside a global singleton.
 *
 * @param key - A key that uniquely identifies the context.
 * @public
 * @example
 *
 * ```ts
 * const MyContext = createVersionedContext<{ 1: string }>('my-context');
 *
 * const MyContextProvider = ({children}) => (
 *   <MyContext.Provider value={createVersionedValueMap({ 1: 'value-for-version-1' })}>
 *     {children}
 *   <MyContext.Provider>
 * )
 * ```
 */
export function createVersionedContext<
  Versions extends { [version in number]: unknown },
>(key: string): Context<VersionedValue<Versions> | undefined> {
  return getOrCreateGlobalSingleton(key, () =>
    createContext<VersionedValue<Versions> | undefined>(undefined),
  );
}

createToggleContext = (
  defaultInitialValue = false,
): Readonly<[() => Toggle, FC<{ initialValue?: boolean }>, Context<Toggle>]> => {
  const context = createContext<Toggle>(undefined as never)

  const ToggleProvider: FC<{ initialValue?: boolean }> = ({ children, initialValue }) => {
    const toggle = useToggle(initialValue !== undefined ? initialValue : defaultInitialValue)
    return providerFactory(context, { value: toggle }, children)
  }

  return [createUseContextFn(context, true), ToggleProvider, context] as const
}

createExchangeContext = (
  defaultInitialValue = ExchangeAction.Default,
): Readonly<[() => State, FC<{ initialValue?: ExchangeAction }>, Context<State>]> => {
  const context = createContext<State>(undefined as never)

  const ExchangeProvider: FC<{ initialValue?: ExchangeAction }> = ({ children, initialValue }) => {
    const state = useState(initialValue !== undefined ? initialValue : defaultInitialValue)
    return providerFactory(context, { value: state }, children)
  }

  return [createUseContextFn(context, true), ExchangeProvider, context] as const
}

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] }]
}

export function useRequiredContext<T>(context: Context<T | undefined>): T {
  const contextValue = useContext(context);

  if (contextValue == null) {
    throw new Error('Missing context provider');
  }

  return contextValue;
}

useVisibility = () => useContext<VisibilityProviderValue>(VisibilityCtx as Context<VisibilityProviderValue>)

RowContext: Context<RowContextState> = createContext({ gutters: [0, 0] })

createRewardsEarnedContext = (): Readonly<[() => RewardsEarned, FC, Context<RewardsEarned>]> => {
  const context = createContext<RewardsEarned>(null as never)

  const RewardEarnedProvider: FC = ({ children }) => {
    const stakedTokenQuery = useStakedTokenQuery()
    const stakedTokenData = stakedTokenQuery.data?.stakedToken
    const stakedToken = useTokenSubscription(stakedTokenData?.id)
    const stakedTokenBalance = stakedToken?.balance

    const [value, setValue] = useState<RewardsEarned>({ rewards: 0 })

    useInterval(() => {
      if (!(stakedTokenBalance && stakedTokenData?.stakingRewards && stakedTokenData.accounts?.[0])) {
        return setValue({ rewards: 0 })
      }

      const {
        stakingRewards: { lastUpdateTime, periodFinish, rewardPerTokenStored: _rewardPerTokenStored, rewardRate },
        token: {
          totalSupply: { bigDecimal: totalTokens },
        },
        accounts: [{ rewards: _rewards, rewardPerTokenPaid }],
      } = stakedTokenData

      // TODO as @client Apollo fields
      const rewardPerTokenStored = BigNumber.from(_rewardPerTokenStored)
      const rewards = BigNumber.from(_rewards)

      const rewardPerToken = (() => {
        if (totalTokens.exact.eq(0)) {
          // If there is no StakingToken liquidity, avoid div(0)
          return rewardPerTokenStored
        }

        const lastTimeRewardApplicable = Math.min(periodFinish, getUnixTime(Date.now()))

        const timeSinceLastUpdate = lastTimeRewardApplicable - lastUpdateTime

        // New reward units to distribute = rewardRate * timeSinceLastUpdate
        const rewardUnitsToDistribute = BigNumber.from(rewardRate).mul(timeSinceLastUpdate)

        // New reward units per token = (rewardUnitsToDistribute * 1e18) / totalTokens
        const unitsToDistributePerToken = rewardUnitsToDistribute.mul(SCALE).div(totalTokens.exact)

        return rewardPerTokenStored.add(unitsToDistributePerToken)
      })()

      // Current rate per token - rate user previously received
      const userRewardDelta = rewardPerToken.sub(rewardPerTokenPaid)

      if (userRewardDelta.eq(0)) {
        return { rewards: new BigDecimal(rewards).simple, canClaim: rewards.gt(0) }
      }

      // New reward = staked tokens * difference in rate
      const userNewReward = stakedTokenBalance.mulTruncate(userRewardDelta)

      // Add to previous rewards
      const summedRewards = rewards.add(userNewReward.exact)

      return setValue({
        canClaim: summedRewards.gt(0),
        rewards: new BigDecimal(summedRewards).simple,
      })
    }, 5e3)

    return providerFactory(context, { value }, children)
  }

  return [createUseContextFn(context), RewardEarnedProvider, context] as const
}

providerFactory = <T>(context: Context<T>, props: { value: T }, children: ReactNode): ReactElement =>
  createElement(context.Provider, props, children)

ConfigContext: Context<ConfigContextState> = createContext({
  prefix: config.prefix,
})

export function newContentStoreContext(): Context<ContentStore> {
  return React.createContext<ContentStore>(newContentStore());
}

export function newMediaStoreContext(): Context<MediaStore> {
  return React.createContext<MediaStore>(newMediaStore());
}

export function newServerInfoStoreContext(): Context<ServerInfoStore> {
  return React.createContext<ServerInfoStore>(newServerInfoStore());
}

formContainerContext: Context<FormContainerProps> = createContext(
  getProps()
)

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

  return [Context.Provider, useContext] as const
}

AnchorWebappContext: Context<AnchorWebapp> =
  // @ts-ignore
  createContext<AnchorWebapp>()

SwitchContext: Context<SwitchContextState> = createContext({})

RadioContext: Context<RadioContextState> = createContext({})

NavigationContext: Context<NavigationContextState> = createContext({})

RowContext: Context<RowContextState> = createContext({})

FloatingLabelSelectContext: Context<FloatingLabelSelectContextState> = createContext({})

export function useLeaf(context: Context<RootContext>, key: string | number): [LeafData, (updater: Updater) => void] {
  const [getKey, updateKey] = useContext(context)

  const updateLeaf = useCallback((updater: Updater) => updateKey(key, updater), [key, updateKey])

  return [getKey(key), updateLeaf]
}

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] }]
}

useVisibility = () => useContext<VisibilityProviderValue>(VisibilityCtx as Context<VisibilityProviderValue>)

JobsContext: Context<Jobs> = createContext<Jobs>()

ThemeContext: Context<ThemeState> = createContext<ThemeState>()