refactor(banners): react context doesnt work with generics

Author: stackchain

packages/banners/src/translators/reactjs/BannersProvider.test.tsx

@@ -10,18 +10,18 @@ import {renderHook, act} from '@testing-library/react-hooks'
 
 import {BannersProvider, useBanners} from './BannersProvider'
 
-const bannersManagerMock: Banners.Manager = {
+const bannersManagerMock: Banners.Manager<'t'> = {
   dismiss: jest.fn(),
   dismissedAt: jest.fn(),
 }
 
-type Props = {
+type Props<K extends string = string> = {
   queryClient: QueryClient
-  bannersManager?: Banners.Manager
+  bannersManager?: Banners.Manager<K>
 }
 
 export const wrapperManagerFixture =
-  ({queryClient, bannersManager}: Props) =>
+  <K extends string = string>({queryClient, bannersManager}: Props<K>) =>
   ({children}: {children: React.ReactNode}) =>
     (
       <QueryClientProvider client={queryClient}>
@@ -36,7 +36,7 @@ export const wrapperManagerFixture =
     )
 
 export const wrapperManagerFixtureMissing =
-  ({queryClient}: Props) =>
+  ({queryClient}: {queryClient: QueryClient}) =>
   ({children}: {children: React.ReactNode}) =>
     (
       <QueryClientProvider client={queryClient}>
@@ -46,7 +46,7 @@ export const wrapperManagerFixtureMissing =
       </QueryClientProvider>
     )
 
-describe('ResolverProvider', () => {
+describe('BannersProvider', () => {
   let queryClient: QueryClient
 
   beforeEach(() => {
@@ -58,14 +58,13 @@ describe('ResolverProvider', () => {
     queryClient.clear()
   })
 
-  it('works', () => {
+  it('works when provider is set', () => {
     const wrapper = wrapperManagerFixture({
       queryClient,
       bannersManager: bannersManagerMock,
     })
-    const {result} = renderHook(() => useBanners(), {
-      wrapper,
-    })
+
+    const {result} = renderHook(() => useBanners(), {wrapper})
 
     act(() => {
       result.current.manager.dismiss('test-banner')
@@ -76,15 +75,11 @@ describe('ResolverProvider', () => {
     expect(bannersManagerMock.dismissedAt).toHaveBeenCalledWith('test-banner')
   })
 
-  it('fails', () => {
-    const wrapper = wrapperManagerFixtureMissing({
-      queryClient,
-    })
-    const {result} = renderHook(() => useBanners(), {
-      wrapper,
-    })
+  it('fails when provider is missing', () => {
+    const wrapper = wrapperManagerFixtureMissing({queryClient})
+
+    const {result} = renderHook(() => useBanners(), {wrapper})
 
-    expect(() => result.current.manager.dismiss('test-banner')).toThrow()
-    expect(() => result.current.manager.dismissedAt('test-banner')).toThrow()
+    expect(result.current).toBeUndefined()
   })
 })

packages/banners/src/translators/reactjs/BannersProvider.tsx

@@ -1,33 +1,37 @@
-import {invalid} from '@yoroi/common'
 import {Banners} from '@yoroi/types'
 import * as React from 'react'
 
-interface BannersContextProps {
-  manager: Readonly<Banners.Manager>
+interface BannersContextProps<K extends string = string> {
+  manager: Readonly<Banners.Manager<K>>
 }
 
-const bannersManagerInitial: Banners.Manager = {
-  dismiss: (_id: string) => invalid('Banners Manager not provided'),
-  dismissedAt: (_id: string) => invalid('Banners Manager not provided'),
-}
-const BannersContext = React.createContext<BannersContextProps>({
-  manager: bannersManagerInitial,
-})
+const BannersContext = React.createContext<
+  BannersContextProps<any> | undefined
+>(undefined)
 
-export const BannersProvider = ({
+export const BannersProvider = <K extends string>({
   children,
   manager,
-}: {
-  children: React.ReactNode
-  manager: Readonly<Banners.Manager>
-}) => {
+}: React.PropsWithChildren<{
+  manager: Readonly<Banners.Manager<K>>
+}>) => {
   const context = React.useMemo(() => ({manager}), [manager])
+
   return (
     <BannersContext.Provider value={context}>
       {children}
     </BannersContext.Provider>
   )
 }
 
-export const useBanners = (): BannersContextProps =>
-  React.useContext(BannersContext)
+export const useBanners = <
+  K extends string = string,
+>(): BannersContextProps<K> => {
+  const context = React.useContext(BannersContext)
+
+  if (!context) {
+    throw new Error('useBanners must be used within a BannersProvider')
+  }
+
+  return context as BannersContextProps<K>
+}

packages/banners/src/translators/reactjs/useBanner.ts

@@ -2,12 +2,12 @@ import {Banners} from '@yoroi/types'
 import {freeze} from 'immer'
 import * as React from 'react'
 
-export function useBanner({
+export function useBanner<K extends string = string>({
   id,
   manager,
 }: Readonly<{
-  id: string
-  manager: Readonly<Banners.Manager>
+  id: K
+  manager: Readonly<Banners.Manager<K>>
 }>) {
   const [dismissedAt, setDismissedAt] = React.useState(manager.dismissedAt(id))
   return React.useMemo(() => {