Merge pull request #11 from JakeGinnivan/fix/UseHooksNaming

fix: Use hooks naming to make it clear you can use React hooks in the…

README.md

@@ -44,7 +44,9 @@ export const testComponentWithDataRegistration = createRegisterableComponentWith
 
 If you reference global variables in your data load function the data will not be re-fetched when that variable changes. This is because the data loader assumes if the arguments are the same, the result of the load function will be the same as the current data and do nothing.
 
-You can use the `getRuntimeParams` function to merge additional varibles to the data loader props when it re-renders so it can fetch the updated data as expected. For example if you had state stored in redux.
+You can use the `useRuntimeParams` function to merge additional varibles to the data loader props when it re-renders so it can fetch the updated data as expected. For example if you had state stored in redux.
+
+React hooks are supported inside this function.
 
 ```ts
 import { init } from 'json-react-layouts-data-loader'

package.json

@@ -26,8 +26,8 @@
     "devDependencies": {
         "@types/enzyme-adapter-react-16": "^1.0.5",
         "@types/jest": "^24.0.18",
-        "@types/node": "^12.7.3",
         "@types/react": "^16.9.2",
+        "@types/react-dom": "^16.9.0",
         "@typescript-eslint/eslint-plugin": "^2.1.0",
         "@typescript-eslint/parser": "^2.1.0",
         "enzyme": "^3.10.0",
@@ -38,19 +38,19 @@
         "eslint-plugin-react": "^7.14.3",
         "eslint-plugin-react-hooks": "^2.0.1",
         "jest": "^24.9.0",
+        "json-react-layouts": "^2.0.1",
         "react": "^16.9.0",
         "react-dom": "^16.9.0",
-        "react-ssr-data-loader": "^1.2.0",
+        "react-ssr-data-loader": "^1.3.0",
         "ts-jest": "^24.0.2",
         "tslib": "^1.10.0",
-        "typescript": "3.5.3",
-        "json-react-layouts": "^2.0.1"
+        "typescript": "3.5.3"
     },
     "dependencies": {
         "typescript-log": "^1.1.1"
     },
     "peerDependencies": {
         "json-react-layouts": "^2.0.1",
-        "react-ssr-data-loader": "^1.2.0"
+        "react-ssr-data-loader": "^1.3.0"
     }
 }

src/DataLoading.ts

@@ -12,8 +12,8 @@ export interface DataDefinition<
     Services extends object,
     AdditionalParams extends object = {}
 > {
-    /** Hook to provide additional dynamic parameters to the data loader */
-    getRuntimeParams?: (
+    /** Custom React Hook to provide additional dynamic parameters to the data loader */
+    useRuntimeParams?: (
         dataDefinitionArgs: DataLoadArguments,
         services: Services,
     ) => AdditionalParams

src/data-loading.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { act } from 'react-dom/test-utils'
 import Adapter from 'enzyme-adapter-react-16'
 import { init } from '.'
 import { DataDefinition } from './DataLoading'
@@ -140,6 +141,7 @@ it('cap wrap data load function', async () => {
 it('component can provide additional arguments dynamically', async () => {
     const resources = new DataLoaderResources<{}>()
     const { middleware, createRegisterableComponentWithData } = init<{}>(resources)
+    let updateMultiplier: (multiplier: number) => void = () => {}
 
     const lengthCalculatorWithMultiplierDataDefinition: DataDefinition<
         { dataArg: string },
@@ -149,9 +151,14 @@ it('component can provide additional arguments dynamically', async () => {
     > = {
         // Additional params can come from anywhere, for instance redux or
         // other environmental variables (window.location?)
-        getRuntimeParams: () => {
+        useRuntimeParams: () => {
+            const [multiplier, setMultiplier] = React.useState(2)
+            React.useEffect(() => {
+                updateMultiplier = setMultiplier
+            }, [])
+
             return {
-                multiplier: 2,
+                multiplier,
             }
         },
         loadData: props =>
@@ -210,7 +217,7 @@ it('component can provide additional arguments dynamically', async () => {
 
     await new Promise(resolve => setTimeout(resolve))
 
-    const component = wrapper.update().find(TestComponentWithData)
+    let component = wrapper.update().find(TestComponentWithData)
     expect(component.text()).toBe('Length: 6')
     expect(component.props()).toMatchObject({
         dataProps: {
@@ -219,6 +226,21 @@ it('component can provide additional arguments dynamically', async () => {
             },
         },
     })
+
+    act(() => {
+        updateMultiplier(3)
+    })
+    await new Promise(resolve => setTimeout(resolve))
+
+    component = wrapper.update().find(TestComponentWithData)
+    expect(component.text()).toBe('Length: 9')
+    expect(component.props()).toMatchObject({
+        dataProps: {
+            data: {
+                dataDefinitionArgs: { dataArg: 'Foo', multiplier: 3 },
+            },
+        },
+    })
 })
 
 const { createRegisterableComposition } = getRegistrationCreators<{}>()

src/index.tsx

@@ -122,17 +122,17 @@ export function init<Services extends object>(
             )
 
             if (dataDefinition) {
-                const dataDefinitionArgs = dataDefinition.getRuntimeParams
+                const dataDefinitionArgs = dataDefinition.useRuntimeParams
                     ? {
                           ...componentProps.dataDefinitionArgs,
-                          ...dataDefinition.getRuntimeParams(
+                          ...dataDefinition.useRuntimeParams(
                               componentProps.dataDefinitionArgs,
                               services.services,
                           ),
                       }
                     : componentProps.dataDefinitionArgs
 
-                if (dataDefinition.getRuntimeParams) {
+                if (dataDefinition.useRuntimeParams) {
                     componentProps = { ...componentProps, dataDefinitionArgs }
                 }
 

yarn.lock

@@ -399,6 +399,13 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
   integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==
 
+"@types/react-dom@^16.9.0":
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.0.tgz#ba6ddb00bf5de700b0eb91daa452081ffccbfdea"
+  integrity sha512-OL2lk7LYGjxn4b0efW3Pvf2KBVP0y1v3wip1Bp7nA79NkOpElH98q3WdCEdDj93b2b0zaeBG9DvriuKjIK5xDA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.9.2":
   version "16.9.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268"