Merge pull request #30 from trixtateam/feature/loading_status_ref

feat: loading status ref

.gitignore

@@ -106,3 +106,6 @@ lib
 
 # TernJS port file
 .tern-port
+
+#story book files
+storybook-static/

package.json

@@ -63,7 +63,9 @@
     "test:coveralls": "jest --coverage --coverageReporters=text-lcov | coveralls",
     "test:badges": "yarn test --coverage --watchAll=false --silent && yarn run coverage-badges",
     "coverage-badges": "jest-coverage-badges --output ./badges",
-    "test:staged": "jest --findRelatedTests"
+    "test:staged": "jest --findRelatedTests",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -128,7 +130,7 @@
   },
   "dependencies": {
     "@trixta/phoenix-to-redux": "3.5.1-beta.0",
-    "deequal": "^0.13.0",
+    "fast-deep-equal":"3.1.3",
     "nanoid": "3.1.23",
     "phoenix": "1.5.9"
   },
@@ -144,6 +146,7 @@
     "@babel/preset-typescript": "^7.13.0",
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
+    "@etchteam/storybook-addon-status": "^4.0.0",
     "@redux-saga/core": "1.0.3",
     "@redux-saga/types": "1.1.0",
     "@rjsf/core": "^2.5.1",
@@ -157,18 +160,12 @@
     "@semantic-release/github": "^7.2.0",
     "@semantic-release/npm": "^7.0.10",
     "@semantic-release/release-notes-generator": "^9.0.1",
-    "@storybook/addon-actions": "^6.1.20",
-    "@storybook/addon-docs": "^6.1.20",
-    "@storybook/addon-essentials": "^6.1.20",
-    "@storybook/addon-knobs": "^6.1.20",
-    "@storybook/addon-links": "^6.1.20",
-    "@storybook/addon-storysource": "^6.1.20",
-    "@storybook/client-api": "^6.1.20",
-    "@storybook/node-logger": "^6.1.20",
-    "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "^6.1.20",
-    "@storybook/storybook-deployer": "^2.8.7",
-    "@storybook/theming": "^6.1.20",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-docs": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-links": "^6.3.8",
+    "@storybook/addon-storysource": "^6.3.8",
+    "@storybook/react": "^6.3.8",
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^7.0.0",
@@ -206,6 +203,7 @@
     "eslint-plugin-react": "7.20.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-redux-saga": "1.1.3",
+    "github-markdown-css": "~4.0.0",
     "husky": "^7.0.2",
     "jest": "26.6.3",
     "jest-canvas-mock": "^2.3.1",
@@ -228,8 +226,6 @@
     "redux-saga": "1.0.5",
     "rimraf": "^3.0.2",
     "rollup": "^2.40.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-watch": "^4.3.1",
     "semantic-release": "^17.4.2",
     "typescript": "~4.1.5"

rollup.config.js

@@ -1,5 +1,5 @@
-const commonjs = require('rollup-plugin-commonjs');
-const babel = require('rollup-plugin-babel');
+import commonjs from '@rollup/plugin-commonjs';
+import { babel } from '@rollup/plugin-babel';
 const config = require('kcd-scripts/dist/config/rollup.config.js');
 
 const babelPluginIndex = config.plugins.findIndex(
@@ -10,12 +10,11 @@ const cjsPluginIndex = config.plugins.findIndex(
 );
 
 config.plugins[babelPluginIndex] = babel({
-  runtimeHelpers: true,
+  babelHelpers: 'runtime',
   extensions: ['.js', '.jsx', '.ts', '.tsx'],
 });
 config.plugins[cjsPluginIndex] = commonjs({
   include: /node_modules/,
-  namedExports: {},
 });
 
 module.exports = config;

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

@@ -114,6 +114,7 @@ function mapDispatchToProps(
           debugOptions: ownProps.debugOptions,
           roleName: ownProps.roleName,
           actionName: ownProps.actionName,
+          loadingStatusRef: ownProps.loadingStatusRef,
         }),
       ),
   };

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

@@ -112,6 +112,7 @@ function mapDispatchToProps(
           ref: ownProps.instanceRef,
           roleName: ownProps.roleName,
           reactionName: ownProps.reactionName,
+          loadingStatusRef: ownProps.loadingStatusRef,
         }),
       ),
   };

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

@@ -260,6 +260,38 @@ describe('useTrixtaActionReaction', () => {
     expect(result.current.isInProgress).toBe(true);
   });
 
+  it('should return isInProgress true, when submitTrixtaActionResponse 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(
+      () =>
+        useTrixtaActionReaction({
+          actionProps: {
+            roleName,
+            actionName,
+          },
+          reactionProps: { reactionName: 'test' },
+        }),
+      {
+        wrapper,
+      },
+    );
+
+    expect(result.current.actionResponse).toBeUndefined();
+    expect(result.current.hasResponse).toBe(false);
+    expect(result.current.loading).toBe(true);
+
+    act(() => {
+      result.current.submitTrixtaActionResponse({
+        data: {},
+        loadingStatusRef: 'info',
+      });
+    });
+
+    expect(result.current.isInProgress).toBe(true);
+  });
+
   it('should autosubmit trixta action on mount, when autosubmit true for actionName: request_user_info_request and roleName: everyone_authed', () => {
     const { wrapper } = storeProviderWrapper(trixtaState);
     const roleName = trixtaState.agentDetails[0];

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

@@ -62,7 +62,7 @@ describe('useTrixtaAction', () => {
     expect(result.current.hasRoleAccess).toBe(true);
   });
 
-  it('should return callbacks clearActionResponses  and submitTrixtaAction', () => {
+  it('should return callbacks clearActionResponses and submitTrixtaAction', () => {
     const { wrapper } = storeProviderWrapper(trixtaState);
     const roleName = trixtaState.agentDetails[0];
     const { result } = renderHook(
@@ -231,7 +231,7 @@ describe('useTrixtaAction', () => {
       store.dispatch({
         type: SUBMIT_TRIXTA_ACTION_RESPONSE_SUCCESS,
         data: successResponse,
-        additionalData: { actionName, roleName },
+        additionalData: { trixtaMeta: { actionName, roleName } },
       });
     });
     expect(result.current.response).toBeDefined();
@@ -276,7 +276,7 @@ describe('useTrixtaAction', () => {
       store.dispatch({
         type: SUBMIT_TRIXTA_ACTION_RESPONSE_FAILURE,
         error: errorResponse,
-        additionalData: { actionName, roleName },
+        additionalData: { trixtaMeta: { actionName, roleName } },
       });
     });
     expect(result.current.response).toBeDefined();

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

@@ -1,4 +1,4 @@
-import deequal from 'deequal';
+import deequal from 'fast-deep-equal';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { isNullOrEmpty } from '../../../utils';
@@ -40,6 +40,7 @@ export const useTrixtaAction = <
   roleName,
   actionName,
   actionParameters,
+  loadingStatusRef,
   options = {
     debugMode: false,
     autoSubmit: false,
@@ -66,8 +67,10 @@ export const useTrixtaAction = <
   >(undefined);
 
   const clearActionResponses = useCallback(() => {
-    dispatch(clearTrixtaActionResponse({ roleName, actionName }));
-  }, [actionName, roleName, dispatch]);
+    dispatch(
+      clearTrixtaActionResponse({ roleName, actionName, loadingStatusRef }),
+    );
+  }, [dispatch, roleName, actionName, loadingStatusRef]);
 
   const selectHasRoleAccess = useMemo(makeSelectHasTrixtaRoleAccess, []);
   const hasRoleAccess = useSelector<{ trixta: TrixtaState }, boolean>((state) =>
@@ -139,6 +142,7 @@ export const useTrixtaAction = <
       dispatch(
         submitTrixtaActionResponse({
           formData: data ?? {},
+          loadingStatusRef,
           roleName,
           requestEvent,
           responseEvent,
@@ -155,6 +159,7 @@ export const useTrixtaAction = <
       hasRoleAccess,
       isTrixtaActionReady,
       dispatch,
+      loadingStatusRef,
       roleName,
       options.setTimeoutEventAsErrorEvent,
       actionName,

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

@@ -408,6 +408,37 @@ describe('useTrixtaReaction', () => {
       expect(result.current.isInProgress).toBe(true);
     });
 
+    it('should return isInProgress true, when submitTrixtaReaction for reactionName: request_guest_stream and roleName: host[d1be63be-c0e4-4468-982c-5c04714a2987] and loadingStatusRef: streams', () => {
+      const { wrapper } = storeProviderWrapper(trixtaState);
+      const roleName = trixtaState.agentDetails[2];
+      const reactionName = 'request_guest_stream';
+      const { result } = renderHook(
+        () =>
+          useTrixtaReaction({
+            roleName,
+            reactionName,
+          }),
+        {
+          wrapper,
+        },
+      );
+
+      expect(result.current.latestResponse).toBeDefined();
+      expect(result.current.latestInstance).toBeDefined();
+      expect(result.current.hasResponse).toBe(true);
+      expect(result.current.isInProgress).toBe(false);
+
+      act(() => {
+        result.current.submitTrixtaReaction({
+          loadingStatusRef: 'streams',
+          data: {},
+          ref: '4a32ed8d-f47d-4e78-921c-6a4aeb996bd3',
+        });
+      });
+
+      expect(result.current.isInProgress).toBe(true);
+    });
+
     it('should pass success response, when calling onSuccess for actionName: request_guest_stream and roleName: host[d1be63be-c0e4-4468-982c-5c04714a2987]', () => {
       const { wrapper, store } = storeProviderWrapper(trixtaState);
       const roleName = trixtaState.agentDetails[2];
@@ -451,7 +482,7 @@ describe('useTrixtaReaction', () => {
         store.dispatch({
           type: SUBMIT_TRIXTA_REACTION_RESPONSE_SUCCESS,
           data: successResponse,
-          additionalData: { reactionName, roleName, ref },
+          additionalData: { trixtaMeta: { reactionName, roleName, ref } },
         });
       });
       expect(result.current.isInProgress).toBe(false);
@@ -497,7 +528,7 @@ describe('useTrixtaReaction', () => {
         store.dispatch({
           type: SUBMIT_TRIXTA_REACTION_RESPONSE_FAILURE,
           error: errorResponse,
-          additionalData: { reactionName, roleName, ref },
+          additionalData: { trixtaMeta: { reactionName, roleName, ref } },
         });
       });
       expect(result.current.isInProgress).toBe(false);

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

@@ -45,6 +45,7 @@ export const useTrixtaReaction = <
   reactionName,
   requestForEffect = false,
   debugMode = false,
+  loadingStatusRef,
   onSuccess,
   onError,
   setTimeoutEventAsErrorEvent = false,
@@ -64,8 +65,10 @@ export const useTrixtaReaction = <
   }
 
   const clearReactionResponses = useCallback(() => {
-    dispatch(clearTrixtaReactionResponse({ roleName, reactionName }));
-  }, [reactionName, roleName, dispatch]);
+    dispatch(
+      clearTrixtaReactionResponse({ roleName, reactionName, loadingStatusRef }),
+    );
+  }, [dispatch, roleName, reactionName, loadingStatusRef]);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const selectHasRoleAccess: any = useMemo(makeSelectHasTrixtaRoleAccess, []);
   const hasRoleAccess = useSelector<{ trixta: TrixtaState }, boolean>((state) =>
@@ -145,6 +148,7 @@ export const useTrixtaReaction = <
         submitTrixtaReactionResponse({
           formData: data ?? {},
           ref: ref ?? latestInstance?.details.ref,
+          loadingStatusRef,
           roleName,
           timeoutEvent: setTimeoutEventAsErrorEvent ? errorEvent : timeoutEvent,
           timeout,
@@ -156,6 +160,7 @@ export const useTrixtaReaction = <
       );
     },
     [
+      loadingStatusRef,
       hasRoleAccess,
       isTrixtaReactionReady,
       dispatch,