sync features and bugfixs from 25a535d (#1669)

Author: embbnux

.sync

@@ -1 +1 @@
-f9b619e8a4dfcf524a7f4fa2cf8aed7452d2273d
+25a535d1b5764390c1d0407963d4bc6bf4a9f3e4

packages/babel-settings/lib/jestTransform.js

@@ -1,4 +1,4 @@
-module.exports = require('babel-jest').createTransformer({
+module.exports = require('babel-jest').default.createTransformer({
   ignore: [/node_modules/],
   rootMode: 'upward',
 });

packages/babel-settings/package.json

@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "@babel/polyfill": "^7.10.4",
-    "babel-jest": "^26.3.0"
+    "babel-jest": "^27.0.1"
   },
   "ci": {
     "ringcentral-js-widgets": "**"

packages/core/README.md

@@ -333,6 +333,45 @@ class Counter extends RcModuleV2<Deps> {
 }
 ```
 
+- `watchEffect`
+
+It is used to watch multiple states, where the callback with the second parameter returns an array of dependency collection.
+
+
+```ts
+class Counter extends RcModuleV2<Deps> {
+  constructor(deps: Deps) {
+    super({
+      deps,
+    });
+    const dispose = watchEffect(
+      this,
+      () => [this.a, this.b],
+      (newValue, oldValue) => {
+        // do something
+      },
+    );
+  }
+
+  @state
+  a = 0;
+
+  @state
+  b = 0;
+
+  @action
+  increaseA() {
+    this.a += 1;
+  }
+
+  @action
+  increaseB() {
+    this.b += 1;
+  }
+}
+```
+
+
 - `subscribe`
 
 The subscribed function will be triggered after each Redux dispatch action update event. It has a similar mechanism to the RcModuleV2 API `onStateChange()`, except that `onStateChange()` cannot be unsubscribed, but the unsubscribed function returned by `subscribe()` can be used to cancel the subscription.

packages/core/lib/RcModule/RcModule.ts

@@ -6,6 +6,7 @@ import {
   computed,
   createStore,
   watch,
+  watchEffect,
   Service,
   storeKey,
   identifierKey,
@@ -50,8 +51,11 @@ export const spawnStorageReducersKey: unique symbol = Symbol(
   'spawnStorageReducers',
 );
 
-interface Options<T> {
-  deps?: T;
+export interface RcModuleOptions<T> {
+  deps?: T & {
+    storage?: any;
+    globalStorage?: any;
+  };
   enableCache?: boolean;
   enableGlobalCache?: boolean;
   storageKey?: string;
@@ -106,7 +110,7 @@ abstract class RcModuleV2<T = {}> {
     enableCache = false,
     enableGlobalCache = false,
     ...options
-  }: Options<T & { storage?: any; globalStorage?: any }> = {}) {
+  }: RcModuleOptions<T> = {}) {
     this._deps = deps;
     this[storageKey] = options.storageKey;
     this[enableCacheKey] = enableCache;
@@ -439,6 +443,7 @@ export {
   computed,
   createStore,
   watch,
+  watchEffect,
   stateKey,
   storeKey,
   identifierKey,

packages/core/lib/track.ts

@@ -59,6 +59,7 @@ export const track = (trackEvent: TrackEvent) => {
         }
       } catch (e) {
         console.warn(`Analytics Error: ${target[identifierKey]}.${name}`);
+        console.error(e);
       }
       return result;
     };

packages/core/lib/usm-redux/createStore.ts

@@ -144,6 +144,8 @@ export const createStore = (
         },
         {},
       );
+      // support custom reducers
+      service._reducers = serviceReducers;
       const reducer = combineReducers(serviceReducers);
       Object.assign(reducers, {
         [identifier]: reducer,

packages/core/lib/usm-redux/index.ts

@@ -1,5 +1,5 @@
 export { createStore, setPatchesToggle } from './createStore';
-export { subscribe, watch } from './subscribe';
+export { subscribe, watch, watchEffect } from './subscribe';
 export { action, computed, state } from './decorators/index';
 export { getStagedState } from './utils/index';
 export * from 'immer';

packages/core/lib/usm-redux/interface.ts

@@ -61,3 +61,9 @@ export type Watch = <T>(
   selector: () => T,
   watcher: (newValue: T, oldValue: T) => void,
 ) => Unsubscribe;
+
+export type WatchEffect = <T extends any[]>(
+  module: any,
+  selector: () => [...T],
+  watcher: (newValue: T, oldValue: T) => void,
+) => Unsubscribe;

packages/core/lib/usm-redux/subscribe.ts

@@ -4,6 +4,7 @@ import {
   Unsubscribe,
   Subscription,
   Service,
+  WatchEffect,
 } from './interface';
 import { storeKey, subscriptionsKey } from './constant';
 import { isEqual } from './utils/index';
@@ -60,4 +61,32 @@ const watch: Watch = (module, selector, watcher) => {
   });
 };
 
-export { subscribe, watch };
+const watchEffect: WatchEffect = (module, selector, watcher) => {
+  if (typeof watcher !== 'function') {
+    const className = Object.getPrototypeOf(module).constructor.name;
+    throw new Error(
+      `The 'watcher' should be a function in the class '${className}'.`,
+    );
+  }
+  let oldValues = selector();
+  if (!Array.isArray(oldValues)) {
+    const className = Object.getPrototypeOf(module).constructor.name;
+    throw new Error(
+      `The 'selector' should be a function that returns an array in the class '${className}'.`,
+    );
+  }
+  return subscribe(module, () => {
+    const newValues = selector();
+    const length = oldValues.length;
+    for (let i = 0; i < length; i++) {
+      if (!isEqual(newValues[i], oldValues[i])) {
+        const lastValues = oldValues;
+        oldValues = newValues;
+        watcher(newValues, lastValues);
+        break;
+      }
+    }
+  });
+};
+
+export { subscribe, watch, watchEffect };

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral-integration/core",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "The foundation package for RingCentral Integration products.",
   "main": "index.js",
   "directories": {

packages/core/test/features/usm-redux.test.tsx

@@ -17,6 +17,7 @@ import {
   watch,
   subscribe,
   Store,
+  watchEffect,
 } from '../../lib/usm-redux/index';
 
 @autorun(test)
@@ -694,6 +695,133 @@ export class WatchBasic extends Step {
   }
 }
 
+@autorun(test)
+@title('watchEffect::basic')
+export class WatchEffect extends Step {
+  run() {
+    const fn = jest.fn();
+    class Counter {
+      constructor() {
+        watchEffect(
+          this,
+          () => [this.count.sum, this.a],
+          (...args) => {
+            fn(...args);
+          },
+        );
+      }
+
+      @state
+      count = { sum: 0 };
+
+      @state
+      a = 0;
+
+      @state
+      b = 0;
+
+      @action
+      increaseA() {
+        this.a += 1;
+      }
+
+      @action
+      increaseB() {
+        this.b += 1;
+      }
+
+      @action
+      increase() {
+        this.count.sum += 1;
+      }
+    }
+    let counter: Counter;
+    let store: Store;
+    return (
+      <Scenario desc="">
+        <Given
+          desc="create instances and create store"
+          action={() => {
+            counter = new Counter();
+
+            store = createStore({
+              modules: [counter],
+            });
+
+            const oldState = Object.values(store.getState())[0] as Counter;
+            expect(oldState.count).toEqual({ sum: 0 });
+          }}
+        />
+        <When
+          desc="call counter 'increase'"
+          action={() => {
+            counter.increase();
+          }}
+        />
+        <Then
+          desc="'count' in counter should be updated and 'watchEffect' should be triggered"
+          action={() => {
+            const newState = Object.values(store.getState())[0] as Counter;
+            expect(newState.count).toEqual({ sum: 1 });
+            expect(fn.mock.calls).toEqual([
+              [
+                [1, 0],
+                [0, 0],
+              ],
+            ]);
+          }}
+        />
+        <When
+          desc="call counter 'increaseA'"
+          action={() => {
+            counter.increaseA();
+          }}
+        />
+        <Then
+          desc="'a' in counter should be updated and 'watchEffect' should be triggered"
+          action={() => {
+            const newState = Object.values(store.getState())[0] as Counter;
+            expect(newState.a).toEqual(1);
+            expect(fn.mock.calls).toEqual([
+              [
+                [1, 0],
+                [0, 0],
+              ],
+              [
+                [1, 1],
+                [1, 0],
+              ],
+            ]);
+          }}
+        />
+        <When
+          desc="call counter 'increaseB'"
+          action={() => {
+            counter.increaseB();
+          }}
+        />
+        <Then
+          desc="'b' in counter should be updated and 'watchEffect' should not be triggered"
+          action={() => {
+            const newState = Object.values(store.getState())[0] as Counter;
+            expect(newState.b).toEqual(1);
+            expect(fn.mock.calls).toEqual([
+              [
+                [1, 0],
+                [0, 0],
+              ],
+              [
+                [1, 1],
+                [1, 0],
+              ],
+            ]);
+          }}
+        />
+      </Scenario>
+    );
+  }
+}
+
 @autorun(test)
 @title('createStore::inheritance')
 export class CreateStoreInheritance extends Step {

packages/engage-voice-widget/components/ActiveCallListPanel/i18n/en-US.ts

@@ -4,5 +4,5 @@ export default {
   everyone: 'Everyone',
   caller: 'Caller',
   callee: 'Callee',
-  unKnown: 'Unknown',
+  unknown: 'Unknown',
 };

packages/engage-voice-widget/components/ActivityCallLogPanel/ActivityCallLogPanel.spec.tsx

@@ -138,7 +138,7 @@ const getControlButton = (type) => {
   };
 };
 
-describe('<ActivityCallLogPanel />:: Call Disposition', async () => {
+describe('<ActivityCallLogPanel />:: Call Disposition', () => {
   const status = 'callEnd';
   it('When call is ended, user will on disposition page and can dispose the call', () => {
     const disposeCall = jest.fn();
@@ -196,7 +196,7 @@ describe('<ActivityCallLogPanel />:: Call Disposition', async () => {
   });
 });
 
-describe('<ActivityCallLogPanel />', async () => {
+describe('<ActivityCallLogPanel />', () => {
   it('When call is onHold, HoldCallButton should display and work correctly', () => {
     const onHold = jest.fn();
     const onUnHold = jest.fn();

packages/engage-voice-widget/components/AlertRenderer/EvCallAlert/EvCallAlert.tsx

@@ -29,6 +29,6 @@ EvCallAlert.handleMessage = ({ message }: { message: string }) =>
     messageTypes.DROP_SESSION_ERROR,
     messageTypes.HOLD_ERROR,
     messageTypes.LOGOUT_FAIL_WITH_CALL_CONNECTED,
-    messageTypes.RECORD_PAUSE,
+    messageTypes.RECORD_PAUSED,
     messageTypes.RECORD_RESUME,
   ]);

packages/engage-voice-widget/components/AlertRenderer/EvCallAlert/i18n/en-US.ts

@@ -14,7 +14,7 @@ export default {
   [messageTypes.HOLD_ERROR]: 'Internal error hold/unhold call occurred.',
   [messageTypes.LOGOUT_FAIL_WITH_CALL_CONNECTED]:
     'Logout is not working while the call is still connected.',
-  [messageTypes.RECORD_PAUSE]: 'Call recording paused.',
+  [messageTypes.RECORD_PAUSED]: 'Call recording paused.',
   [messageTypes.RECORD_RESUME]: 'Call recording resumed.',
   [messageTypes.INTERCEPT]:
     'The dial result for your manual outbound call was INTERCEPT.',

packages/engage-voice-widget/components/BasicSessionPanel/BasicSessionPanel.spec.tsx

@@ -102,7 +102,7 @@ afterEach(async () => {
   wrapper.unmount();
 });
 
-describe('<BasicSessionPanel />', async () => {
+describe('<BasicSessionPanel />', () => {
   // TODO
 
   // it("Page display user's selected Inbound queue, and navigate to InboundQueuesPage when click the field.", () => {