feat(hooks): Apply PR feedback

- rename ComponentIdContext by NavigationContext
- remove useCompoentId hook just use useContext(NavigationContext)
- rename withComponentIdProvider hoc

Author: jpgarcia

src/contexts/ComponentIdContext.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react'
+
+export type NavigationContext = {
+  componentId?: string
+}
+
+const NavigationContext = createContext<NavigationContext>({})
+
+export const NavigationProvider = NavigationContext.Provider
+export const NavigationConsumer = NavigationContext.Consumer
+
+export default NavigationContext

src/contexts/NavigationContext.ts

@@ -1 +1 @@
-export { default as ComponentIdContext, ComponentIdProvider, ComponentIdConsumer } from './ComponentIdContext'
+export { default as NavigationContext, NavigationProvider, NavigationConsumer } from './NavigationContext'

src/contexts/index.ts

@@ -1 +1 @@
-export { default as withComponentIdProvider } from './withComponentIdProvider'
+export { default as withNavigationProvider } from './withNavigationProvider'

src/hocs/index.ts

@@ -1,20 +1,20 @@
 import React from 'react'
 import { render, cleanup } from '@testing-library/react-native'
-import withComponentIdProvider from './withComponentIdProvider'
+import withNavigationProvider from './withNavigationProvider'
 import { View } from 'react-native'
-import { ComponentIdConsumer } from '../contexts/ComponentIdContext'
+import { NavigationConsumer } from '../contexts/NavigationContext'
 
-describe('withComponentIdProvider', () => {
+describe('withNavigationProvider', () => {
   afterEach(cleanup)
 
-  it('should wrap compenent with ComponentIdProvider and bypass props', () => {
+  it('should wrap compenent with NavigationProvider and bypass props', () => {
     const Component = ({ componentId, prop1 }) => (
       <View testID={`root-${componentId}`}>
-        <ComponentIdConsumer>{id => <View testID={`with-${id}-${prop1}`} />}</ComponentIdConsumer>
+        <NavigationConsumer>{({ componentId: id }) => <View testID={`with-${id}-${prop1}`} />}</NavigationConsumer>
       </View>
     )
 
-    const WrappedComponent = withComponentIdProvider(Component)
+    const WrappedComponent = withNavigationProvider(Component)
 
     const { getByTestId } = render(<WrappedComponent componentId="id" prop1="value1" />)
 

src/hocs/withComponentIdProvider.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { NavigationFunctionComponent } from 'react-native-navigation'
+import hoistNonReactStatic from 'hoist-non-react-statics'
+import { NavigationProvider } from '../contexts/NavigationContext'
+import setCompositionDisplayName from '../helpers/setCompositionDisplayName'
+
+/**
+ * A public higher-order component to access the NavigationContext componentId value
+ */
+const withNavigationProvider = <P extends {}>(WrappedComponent: NavigationFunctionComponent<P>) => {
+  const NavigationProviderContainer: NavigationFunctionComponent<P> = ({ componentId, ...props }) => (
+    <NavigationProvider value={{ componentId }}>
+      <WrappedComponent componentId={componentId} {...(props as P)} />
+    </NavigationProvider>
+  )
+
+  setCompositionDisplayName(NavigationProviderContainer, WrappedComponent)
+
+  hoistNonReactStatic(NavigationProviderContainer, WrappedComponent)
+
+  return NavigationProviderContainer
+}
+
+export default withNavigationProvider

src/hocs/withComponentIdProvider.test.tsx renamed to src/hocs/withNavigationProvider.test.tsx

@@ -1,3 +1,4 @@
+export { default as useNavigation } from './useNavigation'
 export { default as useNavigationComponentDidAppear } from './useNavigationComponentDidAppear'
 export { default as useNavigationComponentDidDisappear } from './useNavigationComponentDidDisappear'
 export { default as useNavigationCommand } from './useNavigationCommand'