Allow custom router selector arguments + fix RouteResourceUpdater type (#95)

Author: bholloway

src/__tests__/unit/controllers/router-store/test.tsx

@@ -789,7 +789,8 @@ describe('SPA Router store', () => {
 
   describe('createRouterSelector', () => {
     it('should return selected state', () => {
-      const useRouteName = createRouterSelector(s => s.route.name);
+      const mockSelector = jest.fn().mockImplementation(s => s.route.name);
+      const useRouteName = createRouterSelector(mockSelector);
       const RouteName = () => <>{useRouteName()}</>;
       const route = { path: '', name: 'home', component: () => null };
 
@@ -799,6 +800,31 @@ describe('SPA Router store', () => {
         </MemoryRouter>
       );
 
+      expect(mockSelector).toBeCalledWith(
+        expect.objectContaining({ route }),
+        undefined
+      );
+      expect(wrapper.html()).toEqual('home');
+    });
+
+    it('should pass through single hook argument to selector', () => {
+      const mockSelector = jest.fn().mockImplementation(s => s.route.name);
+      const useRouteName = createRouterSelector(mockSelector);
+      const RouteName = ({ argument }: { argument: unknown }) => (
+        <>{useRouteName(argument)}</>
+      );
+      const route = { path: '', name: 'home', component: () => null };
+
+      const wrapper = mount(
+        <MemoryRouter routes={[route]}>
+          <RouteName argument="bar" />
+        </MemoryRouter>
+      );
+
+      expect(mockSelector).toBeCalledWith(
+        expect.objectContaining({ route }),
+        'bar'
+      );
       expect(wrapper.html()).toEqual('home');
     });
   });

src/controllers/router-store/index.tsx

@@ -426,14 +426,18 @@ export const useRouterStoreStatic = createHook<
 /**
  * Utility to create custom hooks without re-rendering on route change
  */
-export function createRouterSelector<T>(selector: (state: RouterState) => T) {
-  const useHook = createHook<EntireRouterState, AllRouterActions, T>(
+export function createRouterSelector<T, U = void>(
+  selector: (state: RouterState, props: U) => T
+) {
+  const useHook = createHook<EntireRouterState, AllRouterActions, T, U>(
     RouterStore,
     { selector }
   );
 
-  return function useRouterSelector() {
-    return useHook()[0];
+  return function useRouterSelector(
+    ...args: U extends undefined ? [] : [U]
+  ): T {
+    return useHook(...args)[0];
   };
 }
 

src/index.js.flow

@@ -80,9 +80,9 @@ declare export function useResource<T>(
 declare export function useRouter(): [RouterState, RouterActionsType];
 declare export function useRouterActions(): RouterActionsType;
 declare export function useResourceStoreContext(): ResourceStoreContext;
-declare export function createRouterSelector<T>(
-  selector: (state: RouterState) => T
-): () => T;
+declare export function createRouterSelector<T, U = void>(
+  selector: (state: RouterState, props: U) => T
+): (U) => T;
 
 declare export function useQueryParam(
   paramKey: string

src/types.js.flow

@@ -100,7 +100,7 @@ export type ResourceOptions = {
   routerContext?: RouterContext,
 };
 
-export type RouteResourceUpdater<T: RouteResourceData<any>> = (data: T) => T;
+export type RouteResourceUpdater<T> = (data: RouteResourceData<T>) => RouteResourceData<T>;
 
 export type InvariantRoute = {
   path: string,