refactor(hooks): Replace useViewContextState with useParentView

Author: christopherthielen

src/hooks/useIsActive.ts

@@ -1,21 +1,14 @@
 /** @packageDocumentation @reactapi @module react_hooks */
 
-import { StateDeclaration } from '@uirouter/core';
 import { useEffect, useMemo, useState } from 'react';
 import { UIRouterReact } from '../core';
 import { useDeepObjectDiff } from './useDeepObjectDiff';
 import { useOnStateChanged } from './useOnStateChanged';
+import { useParentView } from './useParentView';
 import { useRouter } from './useRouter';
-import { useViewContextState } from './useViewContextState';
 
 /** @hidden */
-function checkIfActive(
-  router: UIRouterReact,
-  stateName: string,
-  params: object,
-  relative: StateDeclaration,
-  exact: boolean
-) {
+function checkIfActive(router: UIRouterReact, stateName: string, params: object, relative: string, exact: boolean) {
   return exact
     ? router.stateService.is(stateName, params, { relative })
     : router.stateService.includes(stateName, params, { relative });
@@ -49,7 +42,7 @@ function checkIfActive(
  */
 export function useIsActive(stateName: string, params = null, exact = false) {
   const router = useRouter();
-  const relative = useViewContextState(router);
+  const relative = useParentView().context.name;
   // Don't re-compute initialIsActive on every render
   const initialIsActive = useMemo(() => checkIfActive(router, stateName, params, relative, exact), []);
   const [isActive, setIsActive] = useState(initialIsActive);

src/hooks/useParentView.ts

@@ -0,0 +1,14 @@
+/** @packageDocumentation @internalapi @module react_hooks */
+
+import { useContext, useMemo } from 'react';
+import { UIViewAddress, UIViewContext } from '../components';
+import { useRouter } from './useRouter';
+
+/** Gets the parent UIViewAddress from context, or the root UIViewAddress */
+export function useParentView(): UIViewAddress {
+  const router = useRouter();
+  const parentUIViewContext: UIViewAddress = useContext(UIViewContext);
+  return useMemo(() => {
+    return parentUIViewContext ? parentUIViewContext : { fqn: '', context: router.stateRegistry.root() };
+  }, [parentUIViewContext, router]);
+}

src/hooks/useSref.ts

@@ -6,8 +6,8 @@ import { isString, StateDeclaration, TransitionOptions } from '@uirouter/core';
 import { UISrefActiveContext } from '../components';
 import { UIRouterReact } from '../core';
 import { useDeepObjectDiff } from './useDeepObjectDiff';
+import { useParentView } from './useParentView';
 import { useRouter } from './useRouter';
-import { useViewContextState } from './useViewContextState';
 
 export interface LinkProps {
   onClick: React.MouseEventHandler<any>;
@@ -26,12 +26,12 @@ function useListOfAllStates(router: UIRouterReact) {
 }
 
 /** @hidden Gets the StateDeclaration that this sref targets */
-function useTargetState(router: UIRouterReact, stateName: string, context: StateDeclaration): StateDeclaration {
+function useTargetState(router: UIRouterReact, stateName: string, relative: string): StateDeclaration {
   // Whenever any states are added/removed from the registry, get the target state again
   const allStates = useListOfAllStates(router);
   return useMemo(() => {
-    return router.stateRegistry.get(stateName, context);
-  }, [router, stateName, context, allStates]);
+    return router.stateRegistry.get(stateName, relative);
+  }, [router, stateName, relative, allStates]);
 }
 
 /**
@@ -74,9 +74,9 @@ export function useSref(stateName: string, params: object = {}, options: Transit
   // memoize the params object until the nested values actually change so they can be used as deps
   const paramsMemo = useMemo(() => params, [useDeepObjectDiff(params)]);
 
-  const contextState: StateDeclaration = useViewContextState(router);
-  const optionsMemo = useMemo(() => ({ relative: contextState, inherit: true, ...options }), [contextState, options]);
-  const targetState = useTargetState(router, stateName, contextState);
+  const relative: string = useParentView().context.name;
+  const optionsMemo = useMemo(() => ({ relative, inherit: true, ...options }), [relative, options]);
+  const targetState = useTargetState(router, stateName, relative);
   // Update href when the target StateDeclaration changes (in case the the state definition itself changes)
   // This is necessary to handle things like future states
   const href = useMemo(() => {