feat(hooks): improve event handler hooks:

- refactor: create helper to reuse event tigger logic
- feat(hooks): warn if no componentId nor global option for handlers
- feat(hooks): obtain componentId from context on event handlers
-  feat(hooks): Add new (backward-compatible) method signature
- chore: create tests for new cases

Author: jpgarcia

src/helpers/extractComponentIdFromArgs.test.ts

@@ -0,0 +1,18 @@
+import extractComponentIdFromArgs from './extractComponentIdFromArgs'
+
+describe('extractComponentIdFromArgs', () => {
+  it('should return undefined ', () => {
+    const componentId = extractComponentIdFromArgs(undefined)
+    expect(componentId).toBeUndefined()
+  })
+
+  it('should return componentId is string argument', () => {
+    const componentId = extractComponentIdFromArgs('componentId')
+    expect(componentId).toBe('componentId')
+  })
+
+  it('should return componentId options provided', () => {
+    const componentId = extractComponentIdFromArgs({ componentId: 'componentId' })
+    expect(componentId).toBe('componentId')
+  })
+})

src/helpers/extractComponentIdFromArgs.ts

@@ -0,0 +1,18 @@
+import isString from './isString'
+import { BaseEventHandlerOptions } from '../types/BaseEventHandlerOptions'
+
+function extractComponentIdFromArgs<T extends BaseEventHandlerOptions>(
+  componentIdOrOptions?: string | T
+): string | undefined {
+  if (componentIdOrOptions === undefined) {
+    return
+  }
+
+  if (isString(componentIdOrOptions)) {
+    return componentIdOrOptions
+  }
+
+  return (componentIdOrOptions as T).componentId
+}
+
+export default extractComponentIdFromArgs

src/helpers/isString.test.ts

@@ -0,0 +1,15 @@
+import isString from './isString'
+
+describe('isString', () => {
+  it('should return false', () => {
+    expect(isString()).toBeFalsy()
+    expect(isString({})).toBeFalsy()
+    expect(isString([])).toBeFalsy()
+    expect(isString(false)).toBeFalsy()
+    expect(isString(1)).toBeFalsy()
+  })
+
+  it('should return true', () => {
+    expect(isString('str')).toBeTruthy()
+  })
+})

src/helpers/isString.ts

@@ -0,0 +1,5 @@
+function isString(value?: any): value is string {
+  return typeof value === 'string'
+}
+
+export default isString

src/helpers/triggerIfComponentIdMatches.ts

@@ -0,0 +1,15 @@
+import { ComponentEvent } from 'react-native-navigation'
+
+function triggerIfComponentIdMatches<T extends ComponentEvent>(
+  handler: (event: T) => any,
+  event: T,
+  componentId?: string
+): void {
+  if (componentId && event.componentId !== componentId) {
+    return
+  }
+
+  handler(event)
+}
+
+export default triggerIfComponentIdMatches

src/helpers/warnIfMissingComponentId.test.ts

@@ -0,0 +1,43 @@
+import warnIfMissingComponentId from './warnIfMissingComponentId'
+
+describe('warnIfMissingComponentId', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockReturnValue()
+  })
+
+  afterEach(jest.clearAllMocks)
+
+  it('should warn if componentId not provided and global is false', () => {
+    warnIfMissingComponentId('hook', undefined, false)
+
+    expect(console.warn).toBeCalledWith(
+      '"hook" hook declared without providing "componentId" context. Make sure you are passing "componentId" as argument or wrapping your screen with "NavigationProvider" or "withNavigation" HOC'
+    )
+  })
+
+  it('should warn if componentId not nor global params provided', () => {
+    warnIfMissingComponentId('hook')
+
+    expect(console.warn).toBeCalledWith(
+      '"hook" hook declared without providing "componentId" context. Make sure you are passing "componentId" as argument or wrapping your screen with "NavigationProvider" or "withNavigation" HOC'
+    )
+  })
+
+  it('should not warn if global parameter provided provided ', () => {
+    warnIfMissingComponentId('hook', undefined, true)
+
+    expect(console.warn).not.toBeCalled()
+  })
+
+  it('should not warn componentId provided and global is true', () => {
+    warnIfMissingComponentId('hook', 'componentId', true)
+
+    expect(console.warn).not.toBeCalled()
+  })
+
+  it('should not warn componentId provided and global is false', () => {
+    warnIfMissingComponentId('hook', 'componentId', false)
+
+    expect(console.warn).not.toBeCalled()
+  })
+})

src/helpers/warnIfMissingComponentId.ts

@@ -0,0 +1,11 @@
+function warnIfMissingComponentId(hookName: string, componentId?: string, global?: boolean): void {
+  if (global || componentId) {
+    return
+  }
+
+  console.warn(
+    `"${hookName}" hook declared without providing "componentId" context. Make sure you are passing "componentId" as argument or wrapping your screen with "NavigationProvider" or "withNavigation" HOC`
+  )
+}
+
+export default warnIfMissingComponentId

src/hooks/useNavigation.ts

@@ -1,6 +1,6 @@
 import { useMemo, useContext } from 'react'
-import createNavigationHelpers from '../helpers/createNavigationHelpers'
 import { NavigationContext } from '../contexts'
+import createNavigationHelpers from '../helpers/createNavigationHelpers'
 
 /**
  * Returns a set of action helpers for
@@ -17,11 +17,10 @@ const useNavigation = (
    */
   componentId?: string
 ) => {
-  const { componentId: componentIdFromContext } = useContext(NavigationContext)
-  const id = componentId || componentIdFromContext
+  const { componentId: id = componentId } = useContext(NavigationContext)
 
   if (!id) {
-    throw new Error('Missing componentId. Use NavigationContext or pass componentId as argument.')
+    throw new Error('Missing "componentId". Use NavigationContext or pass "componentId" as argument.')
   }
 
   return useMemo(() => createNavigationHelpers(id), [id])

src/hooks/useNavigationBottomTabLongPress.test.ts

@@ -20,6 +20,8 @@ describe('useNavigationBottomTabLongPress', () => {
     })
   })
 
+  afterEach(jest.clearAllMocks)
+
   it('should remove the event listener on unmount', () => {
     const { result, unmount } = renderHook(() => {
       useNavigationBottomTabLongPress(() => {})

src/hooks/useNavigationBottomTabLongPress.ts

@@ -9,8 +9,8 @@ function useNavigationBottomTabLongPress(
   /**
    * Function called each time the event is triggered.
    */
-  handler: (event: BottomTabLongPressedEvent) => void
-) {
+  handler: (event: BottomTabLongPressedEvent) => any
+): void {
   useLayoutEffect(() => {
     const subscription = Navigation.events().registerBottomTabLongPressedListener(handler)