Merge pull request #29 from trixtateam/feature/timeout_event

feat: timeout events for trixta actions and reactions

package.json

@@ -11,7 +11,8 @@
     "types"
   ],
   "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
   },
   "repository": {
     "type": "git",
@@ -42,7 +43,7 @@
     "link:phoenix-to-redux": "npm link @trixta/phoenix-to-redux",
     "build": "kcd-scripts build --bundle 'esm,cjs' --no-clean",
     "prebuild": "rimraf dist types && yarn run lint:fix",
-    "checkTs": "tsc --noEmit",
+    "lint:ts": "tsc --noEmit",
     "lint": "yarn run eslint src",
     "lint:fix": "yarn run lint --fix",
     "prettify": "prettier --write",

src/React/components/actions/TrixtaActionComponent/TrixtaActionComponent.tsx

@@ -30,6 +30,7 @@ function TrixtaActionComponent({
 }: TrixtaActionComponentProps &
   DispatchProps &
   ConnectProps &
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Record<string, any>) {
   trixtaDebugger({
     type: TrixtaDebugType.Action,
@@ -103,6 +104,10 @@ function mapDispatchToProps(
           errorEvent: ownProps.errorEvent,
           responseEvent: ownProps.responseEvent,
           requestEvent: ownProps.requestEvent,
+          timeoutEvent: ownProps.setTimeoutEventAsErrorEvent
+            ? ownProps.errorEvent
+            : ownProps.timeoutEvent,
+          timeout: ownProps.timeout,
           debugMode: ownProps.debugMode,
           formData,
           actionOptions: ownProps.actionOptions,

src/React/components/actions/TrixtaActionComponent/types.ts

@@ -28,6 +28,19 @@ export interface TrixtaActionComponentProps extends TrixtaActionBaseProps {
    * [see Redux `dispatch` documentation for complete info](https://redux.js.org/api/store#dispatchaction)
    */
   errorEvent?: string;
+  /**
+   * Event name / dispatch action type for data to dispatch after Trixta action time out error response
+   * [see Redux `dispatch` documentation for complete info](https://redux.js.org/api/store#dispatchaction)
+   */
+  timeoutEvent?: string;
+  /**
+   * timeout in milliseconds for submitting data to Trixta, default is 15000
+   */
+  timeout?: number;
+  /**
+   * If 'true', will set the timeoutEvent the same as the ErrorEvent
+   */
+  setTimeoutEventAsErrorEvent?: boolean;
   /**
    * Options for action in Trixta flow
    */

src/React/components/actions/TrixtaActionInstanceComponent/TrixtaActionInstanceComponent.tsx

@@ -14,8 +14,10 @@ function TrixtaActionInstanceComponent({
   roleName,
   instance,
   debugMode = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ...props
-}: TrixtaActionInstanceComponentProps & ConnectProps & Record<string, any>) {
+}: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+TrixtaActionInstanceComponentProps & ConnectProps & Record<string, any>) {
   trixtaInstanceDebugger({
     type: TrixtaDebugType.Action,
     debugMode,

src/React/components/reactions/TrixtaReactionComponent/TrixtaReactionComponent.tsx

@@ -24,7 +24,8 @@ function TrixtaReactionComponent({
   debugMode = false,
   instances,
   ...rest
-}: ConnectProps & TrixtaReactionComponentProps & Record<string, any>) {
+}: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ConnectProps & TrixtaReactionComponentProps & Record<string, any>) {
   trixtaDebugger({
     type: TrixtaDebugType.Reaction,
     debugMode,

src/React/components/reactions/TrixtaReactionComponent/types.ts

@@ -16,6 +16,19 @@ export interface TrixtaReactionComponentProps extends TrixtaReactionBaseProps {
    * [see Redux `dispatch` documentation for complete info](https://redux.js.org/api/store#dispatchaction)
    */
   errorEvent?: string;
+  /**
+   * Event name / dispatch action type for data to dispatch after Trixta reaction time out error response
+   * [see Redux `dispatch` documentation for complete info](https://redux.js.org/api/store#dispatchaction)
+   */
+  timeoutEvent?: string;
+  /**
+   * timeout in milliseconds for submitting data to Trixta, default is 15000
+   */
+  timeout?: number;
+  /**
+   * If 'true', will set the timeoutEvent the same as the ErrorEvent
+   */
+  setTimeoutEventAsErrorEvent?: boolean;
   /**
    * Enables Trixta console debugging
    */

src/React/components/reactions/TrixtaReactionInstanceComponent/TrixtaReactionInstanceComponent.tsx

@@ -32,6 +32,7 @@ const TrixtaReactionInstanceComponent = ({
 }: ConnectProps &
   DispatchProps &
   TrixtaReactionInstanceComponentProps &
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Record<string, any>) => {
   const response = get<TrixtaInstanceResponse>(instance, 'response', {
     success: false,
@@ -102,6 +103,10 @@ function mapDispatchToProps(
         submitTrixtaReactionResponse({
           formData,
           errorEvent: ownProps.errorEvent,
+          timeoutEvent: ownProps.setTimeoutEventAsErrorEvent
+            ? ownProps.errorEvent
+            : ownProps.timeoutEvent,
+          timeout: ownProps.timeout,
           requestEvent: ownProps.requestEvent,
           responseEvent: ownProps.responseEvent,
           ref: ownProps.instanceRef,

src/React/components/reactions/TrixtaReactionInstanceComponent/types.ts

@@ -15,6 +15,19 @@ export interface TrixtaReactionInstanceComponentProps
    * Event name / dispatch action type for data to dispatch after Trixta reaction error response
    */
   errorEvent?: string;
+  /**
+   * Event name / dispatch action type for data to dispatch after Trixta reaction time out error response
+   * [see Redux `dispatch` documentation for complete info](https://redux.js.org/api/store#dispatchaction)
+   */
+  timeoutEvent?: string;
+  /**
+   * timeout in milliseconds for submitting data to Trixta, default is 15000
+   */
+  timeout?: number;
+  /**
+   * If 'true', will set the timeoutEvent the same as the ErrorEvent
+   */
+  setTimeoutEventAsErrorEvent?: boolean;
   common: TrixtaCommon;
   /**
    * Enables Trixta console debbugging

src/React/constants/actions/index.ts

@@ -2,6 +2,7 @@ export const CLEAR_TRIXTA_ACTION_RESPONSE = `@trixtateam/trixta-js/CLEAR_TRIXTA_
 export const CLEAR_TRIXTA_ACTION_REQUEST_STATUS = `@trixtateam/trixta-js/CLEAR_TRIXTA_ACTION_REQUEST_STATUS`;
 export const SUBMIT_TRIXTA_ACTION_RESPONSE = `@trixtateam/trixta-js/SUBMIT_TRIXTA_ACTION_RESPONSE`;
 export const SUBMIT_TRIXTA_ACTION_RESPONSE_FAILURE = `@trixtateam/trixta-js/SUBMIT_TRIXTA_ACTION_RESPONSE_FAILURE`;
+export const SUBMIT_TRIXTA_ACTION_TIMEOUT_RESPONSE_FAILURE = `@trixtateam/trixta-js/SUBMIT_TRIXTA_ACTION_TIMEOUT_RESPONSE_FAILURE`;
 export const SUBMIT_TRIXTA_ACTION_RESPONSE_SUCCESS = `@trixtateam/trixta-js/SUBMIT_TRIXTA_ACTION_RESPONSE_SUCCESS`;
 export const UPDATE_TRIXTA_ACTION_RESPONSE = `@trixtateam/trixta-js/UPDATE_TRIXTA_ACTION_RESPONSE`;
 export const UPDATE_TRIXTA_ACTION = `@trixtateam/trixta-js/UPDATE_TRIXTA_ACTION`;

src/React/constants/reactions/index.ts

@@ -5,6 +5,7 @@ export const CLEAR_TRIXTA_REACTION_RESPONSE = `@trixtateam/trixta-js/CLEAR_TRIXT
 export const CLEAR_TRIXTA_REACTION_REQUEST_STATUS = `@trixtateam/trixta-js/CLEAR_TRIXTA_REACTION_REQUEST_STATUS`;
 export const SUBMIT_TRIXTA_REACTION_RESPONSE = `@trixtateam/trixta-js/SUBMIT_TRIXTA_REACTION_RESPONSE`;
 export const SUBMIT_TRIXTA_REACTION_RESPONSE_FAILURE = `@trixtateam/trixta-js/SUBMIT_TRIXTA_REACTION_RESPONSE_FAILURE`;
+export const SUBMIT_TRIXTA_REACTION_TIMEOUT_RESPONSE_FAILURE = `@trixtateam/trixta-js/SUBMIT_TRIXTA_REACTION_TIMEOUT_RESPONSE_FAILURE`;
 export const SUBMIT_TRIXTA_REACTION_RESPONSE_SUCCESS = `@trixtateam/trixta-js/SUBMIT_TRIXTA_REACTION_RESPONSE_SUCCESS`;
 export const TRIXTA_REACTION = '@trixtateam/trixta-js/TRIXTA_REACTION';
 

src/React/hooks/use-respond-to-reaction-effect/index.test.tsx

@@ -65,6 +65,7 @@ describe('useRespondToReactionEffect', () => {
     const { wrapper, store } = mockStoreProviderWrapper(trixtaState);
     const roleName = trixtaState.agentDetails[1];
     const reactionName = 'new_waitroom_status';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const actionToDispatch = (payload: any) => ({
       type: 'TEST_ACTION',
       payload,

src/React/hooks/use-trixta-action/index.test.tsx

@@ -204,6 +204,7 @@ describe('useTrixtaAction', () => {
     };
     const actionName = 'request_user_info_request';
     let responseData = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onSuccess = (payload: any) => (responseData = payload);
     const { result } = renderHook(
       () =>
@@ -248,6 +249,7 @@ describe('useTrixtaAction', () => {
     };
     const actionName = 'request_user_info_request';
     let responseData = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onError = (error: any) => (responseData = error);
     const { result } = renderHook(
       () =>

src/React/hooks/use-trixta-action/types.ts

@@ -7,6 +7,10 @@ import {
 } from '../../types/common';
 export interface UseTrixtaActionProps extends TrixtaActionBaseProps {
   options?: {
+    /**
+     * If 'true', will set the timeoutEvent the same as the ErrorEvent
+     */
+    setTimeoutEventAsErrorEvent?: boolean;
     /**
      * Enables Trixta console debbugging
      */

src/React/hooks/use-trixta-action/use-trixta-action.ts

@@ -1,4 +1,3 @@
-// ! WORK IN PROGRESS
 import deequal from 'deequal';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -41,7 +40,11 @@ export const useTrixtaAction = <
   roleName,
   actionName,
   actionParameters,
-  options = { debugMode: false, autoSubmit: false },
+  options = {
+    debugMode: false,
+    autoSubmit: false,
+    setTimeoutEventAsErrorEvent: false,
+  },
   onSuccess,
   onError,
 }: UseTrixtaActionProps): UseTrixtaActionHookReturn<
@@ -84,6 +87,7 @@ export const useTrixtaAction = <
     makeSelectTrixtaActionResponseInstancesForRole,
     [],
   );
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const selectTrixtaActionRequestStatus: any = useMemo(
     makeSelectTrixtaActionRequestStatus,
     [],
@@ -127,6 +131,8 @@ export const useTrixtaAction = <
       responseEvent,
       requestEvent,
       errorEvent,
+      timeoutEvent,
+      timeout,
     }: submitTrixtaFunctionParameters) => {
       if (!hasRoleAccess || !isTrixtaActionReady) return;
 
@@ -137,11 +143,22 @@ export const useTrixtaAction = <
           requestEvent,
           responseEvent,
           errorEvent,
+          timeoutEvent: options.setTimeoutEventAsErrorEvent
+            ? errorEvent
+            : timeoutEvent,
+          timeout,
           actionName,
         }),
       );
     },
-    [dispatch, isTrixtaActionReady, roleName, actionName, hasRoleAccess],
+    [
+      hasRoleAccess,
+      isTrixtaActionReady,
+      dispatch,
+      roleName,
+      options.setTimeoutEventAsErrorEvent,
+      actionName,
+    ],
   );
 
   useEffect(() => {

src/React/hooks/use-trixta-auth/use-trixta-auth.ts

@@ -35,6 +35,7 @@ export const useTrixtaAuth = ({
     roleAccessSelector(state, { roles: rolesArr }),
   );
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const phoenixDetails = useSelector<any, { token?: string }>((state) =>
     socketPhoenixDetailsSelector(state),
   );

src/React/hooks/use-trixta-reaction/index.test.tsx

@@ -424,6 +424,7 @@ describe('useTrixtaReaction', () => {
       };
 
       let responseData = {};
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const onSuccess = (payload: any) => (responseData = payload);
       const { result } = renderHook(
         () =>
@@ -469,6 +470,7 @@ describe('useTrixtaReaction', () => {
           getReducerKeyName({ name: reactionName, role: roleName })
         ].instances.requestForResponse[0].details.ref;
       let responseData = {};
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const onError = (error: any) => (responseData = error);
       const { result } = renderHook(
         () =>

src/React/hooks/use-trixta-reaction/types.ts

@@ -1,16 +1,20 @@
 import { TrixtaReactionBaseProps } from '../../../React/types/reactions';
 import {
   DefaultUnknownType,
+  submitTrixtaFunctionParameters,
   TrixtaInstanceResponse,
   TrixtaReactionInstance,
-  submitTrixtaFunctionParameters,
 } from '../../types/common';
 
 export interface UseTrixtaReactionProps extends TrixtaReactionBaseProps {
   /**
    * Enables Trixta console debbugging
    */
   debugMode?: boolean;
+  /**
+   * If 'true', will set the timeoutEvent the same as the ErrorEvent
+   */
+  setTimeoutEventAsErrorEvent?: boolean;
   /**
    * This function will fire any time the response from Trixta successfully returns data and will be passed the data.
    */

src/React/hooks/use-trixta-reaction/use-trixta-reaction.ts

@@ -47,6 +47,7 @@ export const useTrixtaReaction = <
   debugMode = false,
   onSuccess,
   onError,
+  setTimeoutEventAsErrorEvent = false,
 }: UseTrixtaReactionProps): UseTrixtaReactionHookReturn<
   TInitialData,
   TResponseType,
@@ -77,17 +78,20 @@ export const useTrixtaReaction = <
   } as TrixtaReactionBaseProps;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const selectIsTrixtaReactionReadyForRole: any = useMemo(
     makesSelectIsTrixtaReactionReadyForRole,
     [],
   );
   const isTrixtaReactionReady = useSelector<{ trixta: TrixtaState }, boolean>(
     (state) => selectIsTrixtaReactionReadyForRole(state, reactionRoleProps),
   );
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const selectReactionResponses: any = useMemo(
     makeSelectTrixtaReactionResponseInstancesForRole,
     [],
   );
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const selectTrixtaReactionRequestStatus: any = useMemo(
     makeSelectTrixtaReactionRequestStatus,
     [],
@@ -130,6 +134,8 @@ export const useTrixtaReaction = <
       data,
       responseEvent,
       errorEvent,
+      timeoutEvent,
+      timeout,
       ref,
       requestEvent,
     }: submitTrixtaFunctionParameters) => {
@@ -140,6 +146,8 @@ export const useTrixtaReaction = <
           formData: data ?? {},
           ref: ref ?? latestInstance?.details.ref,
           roleName,
+          timeoutEvent: setTimeoutEventAsErrorEvent ? errorEvent : timeoutEvent,
+          timeout,
           responseEvent,
           requestEvent,
           errorEvent,
@@ -148,12 +156,13 @@ export const useTrixtaReaction = <
       );
     },
     [
+      hasRoleAccess,
+      isTrixtaReactionReady,
       dispatch,
+      latestInstance?.details.ref,
       roleName,
+      setTimeoutEventAsErrorEvent,
       reactionName,
-      isTrixtaReactionReady,
-      hasRoleAccess,
-      latestInstance,
     ],
   );
 

src/React/reducers/trixtaReducer.ts

@@ -22,6 +22,7 @@ import {
   SUBMIT_TRIXTA_ACTION_RESPONSE,
   SUBMIT_TRIXTA_ACTION_RESPONSE_FAILURE,
   SUBMIT_TRIXTA_ACTION_RESPONSE_SUCCESS,
+  SUBMIT_TRIXTA_ACTION_TIMEOUT_RESPONSE_FAILURE,
   SUBMIT_TRIXTA_REACTION_RESPONSE,
   SUBMIT_TRIXTA_REACTION_RESPONSE_FAILURE,
   SUBMIT_TRIXTA_REACTION_RESPONSE_SUCCESS,
@@ -38,6 +39,7 @@ import {
   TrixtaRoleParameter,
 } from '../types';
 import { SIGN_OUT_TRIXTA } from './../constants/index';
+import { SUBMIT_TRIXTA_REACTION_TIMEOUT_RESPONSE_FAILURE } from './../constants/reactions/index';
 import { TrixtaReducerActions } from './../reduxActions/types';
 import { TrixtaState } from './../types';
 
@@ -137,6 +139,7 @@ export const trixtaReducer = (
         }
         break;
       case SUBMIT_TRIXTA_REACTION_RESPONSE_FAILURE:
+      case SUBMIT_TRIXTA_REACTION_TIMEOUT_RESPONSE_FAILURE:
         {
           const reactionName = action.additionalData.reactionName;
           const roleName = action.additionalData.roleName;
@@ -403,6 +406,7 @@ export const trixtaReducer = (
         }
         break;
       case SUBMIT_TRIXTA_ACTION_RESPONSE_FAILURE:
+      case SUBMIT_TRIXTA_ACTION_TIMEOUT_RESPONSE_FAILURE:
         {
           const actionName = action.additionalData.actionName;
           const roleName = action.additionalData.roleName;