Merge pull request #31 from trixtateam/fix/loading_status_ref_hooks

fix: loadingStatusRef for hooks
trixtateam · Sep 29, 2021 · acced5f · acced5f
2 parents 2422f55 + c360efd
commit acced5f
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 71 deletions.
diff --git a/src/React/hooks/use-trixta-action/index.test.tsx b/src/React/hooks/use-trixta-action/index.test.tsx
@@ -190,6 +190,34 @@ describe('useTrixtaAction', () => {
     expect(result.current.isInProgress).toBe(true);
   });
 
+  it('should return isInProgress true, when submitTrixtaAction for actionName: request_user_info_request and roleName: everyone_authed and loadingStatusRef: info', () => {
+    const { wrapper } = storeProviderWrapper(trixtaState);
+    const roleName = trixtaState.agentDetails[0];
+    const actionName = 'request_user_info_request';
+    const { result } = renderHook(
+      () =>
+        useTrixtaAction({
+          roleName,
+          loadingStatusRef: 'info',
+          actionName,
+        }),
+      {
+        wrapper,
+      },
+    );
+
+    expect(result.current.response).toBeUndefined();
+    expect(result.current.latestInstance).toBeUndefined();
+    expect(result.current.hasResponse).toBe(false);
+    expect(result.current.isInProgress).toBe(false);
+
+    act(() => {
+      result.current.submitTrixtaAction({ data: {} });
+    });
+
+    expect(result.current.isInProgress).toBe(true);
+  });
+
   it('should pass success response, when calling onSuccess for actionName: request_user_info_request and roleName: everyone_authed', () => {
     const { wrapper, store } = storeProviderWrapper(trixtaState);
     const roleName = trixtaState.agentDetails[0];

diff --git a/src/React/hooks/use-trixta-action/use-trixta-action.ts b/src/React/hooks/use-trixta-action/use-trixta-action.ts
@@ -76,14 +76,18 @@ export const useTrixtaAction = <
   const hasRoleAccess = useSelector<{ trixta: TrixtaState }, boolean>((state) =>
     selectHasRoleAccess(state, { roleName }),
   );
-  const roleActionProps = { roleName, actionName } as TrixtaActionBaseProps;
+  const actionRoleProps = {
+    roleName,
+    actionName,
+    loadingStatusRef,
+  } as TrixtaActionBaseProps;
 
   const selectIsTrixtaActionReady = useMemo(
     makeSelectIsTrixtaActionReadyForRole,
     [],
   );
   const isTrixtaActionReady = useSelector<{ trixta: TrixtaState }, boolean>(
-    (state) => selectIsTrixtaActionReady(state, roleActionProps),
+    (state) => selectIsTrixtaActionReady(state, actionRoleProps),
   );
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const selectActionResponses: any = useMemo(
@@ -96,7 +100,7 @@ export const useTrixtaAction = <
     [],
   );
   const requestStatus = useSelector<{ trixta: TrixtaState }, RequestStatus>(
-    (state) => selectTrixtaActionRequestStatus(state, roleActionProps),
+    (state) => selectTrixtaActionRequestStatus(state, actionRoleProps),
   );
   const isInProgress = requestStatus
     ? requestStatus === RequestStatus.REQUEST
@@ -105,7 +109,7 @@ export const useTrixtaAction = <
   const instances = useSelector<
     { trixta: TrixtaState },
     TrixtaInstance<TResponseType, TErrorType>[]
-  >((state) => selectActionResponses(state, roleActionProps));
+  >((state) => selectActionResponses(state, actionRoleProps));
   trixtaDebugger({
     type: TrixtaDebugType.Action,
     name: actionName,

diff --git a/src/React/hooks/use-trixta-reaction/index.test.tsx b/src/React/hooks/use-trixta-reaction/index.test.tsx
@@ -417,6 +417,7 @@ describe('useTrixtaReaction', () => {
           useTrixtaReaction({
             roleName,
             reactionName,
+            loadingStatusRef: 'streams',
           }),
         {
           wrapper,
@@ -430,7 +431,6 @@ describe('useTrixtaReaction', () => {
 
       act(() => {
         result.current.submitTrixtaReaction({
-          loadingStatusRef: 'streams',
           data: {},
           ref: '4a32ed8d-f47d-4e78-921c-6a4aeb996bd3',
         });

diff --git a/src/React/hooks/use-trixta-reaction/use-trixta-reaction.ts b/src/React/hooks/use-trixta-reaction/use-trixta-reaction.ts
@@ -77,6 +77,7 @@ export const useTrixtaReaction = <
   const reactionRoleProps = {
     roleName,
     requestForEffect,
+    loadingStatusRef,
     reactionName,
   } as TrixtaReactionBaseProps;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/src/React/selectors/tests/actions/selectors.test.js b/src/React/selectors/tests/actions/selectors.test.js
@@ -20,14 +20,24 @@ describe('Trixta Selectors', () => {
       };
     });
 
-    it('selectTrixtaActions', () => {
+    it('getTrixtaActionsState', () => {
       const expectedResult = mockedState.trixta.actions;
 
-      expect(trixtaActionSelectors.selectTrixtaActions(mockedState)).toEqual(
+      expect(trixtaActionSelectors.getTrixtaActionsState(mockedState)).toEqual(
         expectedResult,
       );
     });
 
+    it('selectTrixtActionsStateSelector', () => {
+      const expectedResult = trixtaActionSelectors.getTrixtaActionsState(
+        mockedState,
+      );
+
+      expect(
+        trixtaActionSelectors.selectTrixtActionsStateSelector(mockedState),
+      ).toEqual(expectedResult);
+    });
+
     it('selectTrixtaActionNameProp', () => {
       const expectedResult = props.actionName;
 
@@ -45,7 +55,7 @@ describe('Trixta Selectors', () => {
         mockedState,
         props,
       );
-      const trixtaActions = trixtaActionSelectors.selectTrixtaActions(
+      const trixtaActions = trixtaActionSelectors.selectTrixtActionsStateSelector(
         mockedState,
       );
       const expectedResult = trixtaActions[
@@ -75,7 +85,7 @@ describe('Trixta Selectors', () => {
         mockedState,
         props,
       );
-      const trixtaActions = trixtaActionSelectors.selectTrixtaActions(
+      const trixtaActions = trixtaActionSelectors.selectTrixtActionsStateSelector(
         mockedState,
       );
 
@@ -179,7 +189,7 @@ describe('Trixta Selectors', () => {
         mockedState,
         props,
       );
-      const trixtaActions = trixtaActionSelectors.selectTrixtaActions(
+      const trixtaActions = trixtaActionSelectors.selectTrixtActionsStateSelector(
         mockedState,
       );
       const expectedResult = pickBy(

diff --git a/src/React/selectors/tests/reactions/selectors.test.js b/src/React/selectors/tests/reactions/selectors.test.js
@@ -20,11 +20,21 @@ describe('Trixta Selectors', () => {
       };
     });
 
-    it('selectTrixtaReactions', () => {
+    it('getTrixtaReactionsState', () => {
       const expectedResult = mockedState.trixta.reactions;
 
       expect(
-        trixtaReactionSelectors.selectTrixtaReactions(mockedState),
+        trixtaReactionSelectors.getTrixtaReactionsState(mockedState),
+      ).toEqual(expectedResult);
+    });
+
+    it('selectTrixtReactionsStateSelector', () => {
+      const expectedResult = trixtaReactionSelectors.getTrixtaReactionsState(
+        mockedState,
+      );
+
+      expect(
+        trixtaReactionSelectors.selectTrixtReactionsStateSelector(mockedState),
       ).toEqual(expectedResult);
     });
 
@@ -48,7 +58,7 @@ describe('Trixta Selectors', () => {
         mockedState,
         props,
       );
-      const trixtaReactions = trixtaReactionSelectors.selectTrixtaReactions(
+      const trixtaReactions = trixtaReactionSelectors.getTrixtaReactionsState(
         mockedState,
       );
       const expectedResult = trixtaReactions[
@@ -80,7 +90,7 @@ describe('Trixta Selectors', () => {
         mockedState,
         props,
       );
-      const trixtaReactions = trixtaReactionSelectors.selectTrixtaReactions(
+      const trixtaReactions = trixtaReactionSelectors.getTrixtaReactionsState(
         mockedState,
       );
 
@@ -191,7 +201,7 @@ describe('Trixta Selectors', () => {
         mockedState,
         props,
       );
-      const trixtaReactions = trixtaReactionSelectors.selectTrixtaReactions(
+      const trixtaReactions = trixtaReactionSelectors.getTrixtaReactionsState(
         mockedState,
       );
 

diff --git a/src/React/selectors/trixtaActions.ts b/src/React/selectors/trixtaActions.ts
@@ -2,6 +2,7 @@
 import {
   createSelector,
   OutputParametricSelector,
+  OutputSelector,
   ParametricSelector,
 } from 'reselect';
 import { getReducerKeyName, getRequestStatusKeyName } from '../../utils';
@@ -30,16 +31,39 @@ export const selectTrixtaActionInstanceIndexProp = (
   props: DefaultSelectorProps & { instanceIndex: number },
 ): number => props.instanceIndex;
 
-export const selectTrixtaActions = (state: {
+export const getTrixtActionStateForBaseProps = (
+  state: { trixta: TrixtaState },
+  props: DefaultSelectorProps,
+): TrixtaAction | undefined =>
+  state.trixta.actions[
+    getReducerKeyName({ name: props.actionName, role: props.roleName })
+  ] &&
+  state.trixta.actions[
+    getReducerKeyName({ name: props.actionName, role: props.roleName })
+  ];
+
+export const getTrixtaActionsState = (state: {
   trixta: TrixtaState;
 }): Record<string, TrixtaAction> => state.trixta.actions;
 
+export const selectTrixtActionsStateSelector: OutputSelector<
+  {
+    trixta: TrixtaState;
+  },
+  Record<string, TrixtaAction>,
+  (res: Record<string, TrixtaAction>) => Record<string, TrixtaAction>
+> = createSelector([getTrixtaActionsState], (actions) => actions);
+
 export const selectTrixtActionStateSelector: ParametricSelector<
   { trixta: TrixtaState },
   DefaultSelectorProps,
   TrixtaAction | undefined
 > = createSelector(
-  [selectTrixtaRoleNameProp, selectTrixtaActionNameProp, selectTrixtaActions],
+  [
+    selectTrixtaRoleNameProp,
+    selectTrixtaActionNameProp,
+    selectTrixtActionsStateSelector,
+  ],
   (roleName, actionName, trixtaActions) => {
     return trixtaActions[
       getReducerKeyName({ name: actionName, role: roleName })
@@ -58,7 +82,7 @@ export const selectTrixtActionRequestStatusSelector: ParametricSelector<
     selectTrixtaRoleNameProp,
     selectTrixtaActionNameProp,
     selectTrixtaLoadingStatusRefProp,
-    selectTrixtaActions,
+    selectTrixtActionsStateSelector,
   ],
   (roleName, actionName, loadingStatusRef, trixtaActions) => {
     const requestStatusKey = getRequestStatusKeyName({
@@ -74,17 +98,6 @@ export const selectTrixtActionRequestStatusSelector: ParametricSelector<
   },
 );
 
-export const getTrixtActionState = (
-  state: { trixta: TrixtaState },
-  props: DefaultSelectorProps,
-): TrixtaAction | undefined =>
-  state.trixta.actions[
-    getReducerKeyName({ name: props.actionName, role: props.roleName })
-  ] &&
-  state.trixta.actions[
-    getReducerKeyName({ name: props.actionName, role: props.roleName })
-  ];
-
 /**
  * Selects the actions[props.roleName:props.actionName]
  * for the given props.roleName, props.actionName and returns the action
@@ -93,7 +106,8 @@ export const selectTrixtaActionForRole = (
   state: { trixta: TrixtaState },
   props: DefaultSelectorProps,
 ): TrixtaAction | undefined =>
-  getTrixtActionState(state, props) && getTrixtActionState(state, props);
+  getTrixtActionStateForBaseProps(state, props) &&
+  getTrixtActionStateForBaseProps(state, props);
 
 /**
  * Selects the actions[props.roleName:props.actionName].instances for the given props.roleName,
@@ -107,9 +121,9 @@ export const selectTrixtaActionResponseInstancesForRole = (
   state: { trixta: TrixtaState },
   props: DefaultSelectorProps,
 ): TrixtaInstance[] | undefined =>
-  getTrixtActionState(state, props) &&
-  getTrixtActionState(state, props)?.instances
-    ? getTrixtActionState(state, props)?.instances
+  getTrixtActionStateForBaseProps(state, props) &&
+  getTrixtActionStateForBaseProps(state, props)?.instances
+    ? getTrixtActionStateForBaseProps(state, props)?.instances
     : [];
 
 /**
@@ -120,8 +134,8 @@ export const selectTrixtaActionResponseInstance = (
   state: { trixta: TrixtaState },
   props: DefaultSelectorProps & { instanceIndex: number },
 ): TrixtaInstance | undefined =>
-  getTrixtActionState(state, props) &&
-  getTrixtActionState(state, props)?.instances[props.instanceIndex];
+  getTrixtActionStateForBaseProps(state, props) &&
+  getTrixtActionStateForBaseProps(state, props)?.instances[props.instanceIndex];
 
 /**
  * Selects the actions[props.roleName:props.actionName].common
@@ -131,8 +145,8 @@ export const selectTrixtaActionCommon = (
   state: { trixta: TrixtaState },
   props: DefaultSelectorProps,
 ): TrixtaCommon | undefined =>
-  getTrixtActionState(state, props) &&
-  getTrixtActionState(state, props)?.common;
+  getTrixtActionStateForBaseProps(state, props) &&
+  getTrixtActionStateForBaseProps(state, props)?.common;
 
 /**
  * Selects the actions[props.roleName:props.actionName]
@@ -283,7 +297,7 @@ export const makesSelectTrixtaLatestActionInstance = (): OutputParametricSelecto
  */
 export const makeSelectTrixtaActionsForRole = () =>
   createSelector(
-    [selectTrixtaActions, selectTrixtaRoleNameProp],
+    [selectTrixtActionsStateSelector, selectTrixtaRoleNameProp],
     (trixtaActions, roleName) =>
       pickBy(
         trixtaActions,