feat(cmf): add redux-saga integration at component level

BREAKING_CHANGES_LOG.md

@@ -3,6 +3,19 @@ Before 1.0, the stack do NOT follow semver version in releases.
 This document aims to ease the WIP migration from a version to another by providing intels about what to do to migrate.
 
 ## v0.156.0
+* cmf: selectors
+* PR: https://github.com/Talend/ui/pull/1055
+* Change: move to collections
+
+| name | new location |
+|---|---|
+| getCollectionFromPath | selectors.collections.find
+| findCollectionPathListItem | selectors.collections.findListItem
+
+* cmf: putActionCreator
+* PR: https://github.com/Talend/ui/pull/1055
+* Change: move from api.saga.putActionCreator to api.sagas.putActionCreator
+
 * Container: DeleteResource
 * PR: https://github.com/Talend/ui/pull/1053
 * Changes: deleteResource Saga params has changed

output/cmf.eslint.txt

@@ -5,7 +5,7 @@
 The react/require-extension rule is deprecated. Please use the import/extensions rule from eslint-plugin-import instead.
 
 /home/travis/build/Talend/ui/packages/cmf/src/cmfConnect.js
-  151:4  warning  Unexpected console statement  no-console
+  152:4  warning  Unexpected console statement  no-console
 
 /home/travis/build/Talend/ui/packages/cmf/src/componentState.js
   88:3  warning  Unexpected console statement  no-console
@@ -21,5 +21,8 @@ The react/require-extension rule is deprecated. Please use the import/extensions
   163:54  error    There should be no spaces inside this paren  space-in-parens
   177:51  error    There should be no spaces inside this paren  space-in-parens
 
-✖ 7 problems (2 errors, 5 warnings)
+/home/travis/build/Talend/ui/packages/cmf/src/sagas/collection.js
+  9:1  error  Prefer default export  import/prefer-default-export
+
+✖ 8 problems (3 errors, 5 warnings)
 

packages/cmf/__tests__/actions/saga.test.js

@@ -0,0 +1,25 @@
+import {
+	start,
+	stop,
+} from '../../src/actions/saga';
+import CONST from '../../src/constant';
+
+describe('actions.saga', () => {
+	it('start should return action object with DID_MOUNT_SAGA_START', () => {
+		const event = { type: 'DID_MOUNT' };
+		const data = { saga: 'mySaga' };
+		expect(start(event, data)).toEqual({
+			type: CONST.DID_MOUNT_SAGA_START,
+			saga: data.saga,
+			event,
+		});
+	});
+	it('start should return action object with WILL_UNMUNT_SAGA_STOP', () => {
+		const event = { type: 'WILL_UNMOUNT' };
+		const data = { saga: 'mySaga' };
+		expect(stop(event, data)).toEqual({
+			type: `${CONST.WILL_UNMOUNT_SAGA_STOP}_${data.saga}`,
+			event,
+		});
+	});
+});

packages/cmf/__tests__/api.test.js

@@ -3,5 +3,25 @@ import api from '../src/api';
 describe('CMF api', () => {
 	it('provide action, route access', () => {
 		expect(typeof api.action).toBe('object');
+		expect(api.action).toBeDefined();
+		expect(api.actions).toBeDefined();
+		expect(api.actionCreator).toBeDefined();
+		expect(api.component).toBeDefined();
+		expect(api.expression).toBeDefined();
+		expect(api.route).toBeDefined();
+		expect(api.registry).toBeDefined();
+		expect(api.registerInternals).toBeDefined();
+		expect(api.sagas).toBeDefined();
+		expect(api.saga).toBeDefined();
+	});
+	it('registerInternals should add internal actionCreators to the registry', () => {
+		const context = {
+			registry: {},
+		};
+		expect(() => api.actionCreator.get(context, 'cmf.saga.start')).toThrow();
+		expect(() => api.actionCreator.get(context, 'cmf.saga.stop')).toThrow();
+		api.registerInternals(context);
+		expect(api.actionCreator.get(context, 'cmf.saga.start')).toBeDefined();
+		expect(api.actionCreator.get(context, 'cmf.saga.stop')).toBeDefined();
 	});
 });

packages/cmf/__tests__/cmfConnect.test.js

@@ -269,6 +269,45 @@ describe('cmfConnect', () => {
 			expect(props.initState.mock.calls[0][0]).toBe(props.initialState);
 		});
 
+		it('should componentDidMount support saga', () => {
+			const TestComponent = jest.fn();
+			TestComponent.displayName = 'TestComponent';
+			const CMFConnected = cmfConnect({})(TestComponent);
+			const props = {
+				saga: 'hello',
+				dispatchActionCreator: jest.fn(),
+			};
+			const context = mock.context();
+			const instance = new CMFConnected.CMFContainer(props, context);
+			instance.componentDidMount();
+			expect(props.dispatchActionCreator).toHaveBeenCalledWith(
+				'cmf.saga.start',
+				{ type: 'DID_MOUNT' },
+				instance.props,
+				instance.context
+			);
+		});
+
+		it('should componentWillUnmount support saga', () => {
+			const TestComponent = jest.fn();
+			TestComponent.displayName = 'TestComponent';
+			const CMFConnected = cmfConnect({})(TestComponent);
+			const props = {
+				saga: 'hello',
+				dispatchActionCreator: jest.fn(),
+				deleteState: jest.fn(),
+			};
+			const context = mock.context();
+			const instance = new CMFConnected.CMFContainer(props, context);
+			instance.componentWillUnmount();
+			expect(props.dispatchActionCreator).toHaveBeenCalledWith(
+				'cmf.saga.stop',
+				{ type: 'WILL_UNMOUNT' },
+				instance.props,
+				instance.context
+			);
+		});
+
 		it('should componentWillUnMount dispatchActionCreator', () => {
 			const TestComponent = jest.fn();
 			TestComponent.displayName = 'TestComponent';

packages/cmf/__tests__/sagas/component.test.js

@@ -0,0 +1,33 @@
+import { fork, take, takeEvery, cancel } from 'redux-saga/effects';
+import { createMockTask } from 'redux-saga/utils';
+import registry from '../../src/registry';
+import { onSagaStart, handle } from '../../src/sagas/component';
+import CONST from '../../src/constant';
+
+describe('sagas.component', () => {
+	it('should onSagaStart fork action.saga and wait for unmount to cancel', () => {
+		// given
+		const testAction = { type: 'TEST', saga: 'my-saga' };
+		function* saga() {}
+		const reg = registry.getRegistry();
+		reg['SAGA:my-saga'] = saga;
+		const task = createMockTask();
+		// when
+		const gen = onSagaStart(testAction);
+
+		// then
+		expect(gen.next().value).toEqual(fork(saga));
+		expect(gen.next(task).value).toEqual(take(`${CONST.WILL_UNMOUNT_SAGA_STOP}_my-saga`));
+		expect(gen.next().value).toEqual(cancel(task));
+	});
+	it('should handle takeEvery didmount', () => {
+		// given
+		const gen = handle();
+		const didMountAction = { type: CONST.DID_MOUNT_SAGA_START };
+
+		// then
+		expect(gen.next(didMountAction).value).toEqual(
+			takeEvery(CONST.DID_MOUNT_SAGA_START, onSagaStart)
+		);
+	});
+});

packages/cmf/src/saga.test.js → packages/cmf/__tests__/sagas/putActionCreator.test.js

@@ -1,6 +1,6 @@
 import { put, select } from 'redux-saga/effects';
-import registry from './registry';
-import saga from './saga';
+import registry from '../../src/registry';
+import putActionCreator from '../../src/sagas/putActionCreator';
 
 describe('saga', () => {
 	it('should putActionCreator call put of a registred actionCreator without context', () => {
@@ -13,7 +13,7 @@ describe('saga', () => {
 		const event = { type: 'click', source: 'MyComponent' };
 
 		// when
-		const gen = saga.putActionCreator('myActionCreator', event, data);
+		const gen = putActionCreator('myActionCreator', event, data);
 
 		// then
 		expect(gen.next().value).toEqual(select());
@@ -41,7 +41,7 @@ describe('saga', () => {
 		const event = { type: 'click', source: 'MyComponent' };
 
 		// when
-		const gen = saga.putActionCreator('myActionCreator', event, data, context);
+		const gen = putActionCreator('myActionCreator', event, data, context);
 
 		// then
 		expect(gen.next().value).toEqual(select());

packages/cmf/__tests__/selectors/index.test.js

@@ -1,8 +1,8 @@
 import { Map, List } from 'immutable';
 import cases from 'jest-in-case';
-import { getCollectionFromPath, findCollectionPathListItem } from '../../src/selectors';
+import selectors from '../../src/selectors';
 
-describe('getCollectionFromPath', () => {
+describe('selectors.collections.get', () => {
 	const collection = new Map({ id: 'id' });
 	const collectionSubset = new Map({ subset: 'subset' });
 	const collectionWithSubset = new Map({ collectionSubset });
@@ -15,18 +15,18 @@ describe('getCollectionFromPath', () => {
 		},
 	};
 	it('try to find the collection if collectionPath is a string', () => {
-		expect(getCollectionFromPath(state, 'collection')).toEqual(collection);
+		expect(selectors.collections.get(state, 'collection')).toEqual(collection);
 	});
 
 	it('try to find the collection subset if collectionPath is an array', () => {
-		expect(getCollectionFromPath(state, ['collectionWithSubset', 'collectionSubset'])).toEqual(
+		expect(selectors.collections.get(state, ['collectionWithSubset', 'collectionSubset'])).toEqual(
 			collectionSubset,
 		);
 	});
 
 	it('throw an exception if collection path is neither a string or an array', () => {
 		expect(() => {
-			getCollectionFromPath(state, {});
+			selectors.collections.get(state, {});
 		}).toThrowError(`Type mismatch: collectionPath should be a string or an array of string
 got [object Object]`);
 	});
@@ -47,9 +47,9 @@ const state = {
 };
 
 cases(
-	'findCollectionPathListItem(state, pathDescriptor, resourceId)',
+	'find(state, pathDescriptor, resourceId)',
 	opts => {
-		expect(findCollectionPathListItem(opts.state, opts.pathDescriptor, opts.resourceId)).toBe(
+		expect(selectors.collections.findListItem(opts.state, opts.pathDescriptor, opts.resourceId)).toBe(
 			opts.result,
 		);
 	},
@@ -79,10 +79,10 @@ cases(
 );
 
 cases(
-	'findCollectionPathListItem(state, pathDescriptor, resourceId)',
+	'selectors.collections.findListItem(state, pathDescriptor, resourceId)',
 	opts => {
 		expect(() => {
-			findCollectionPathListItem(opts.state, opts.pathDescriptor, opts.resourceId);
+			selectors.collections.findListItem(opts.state, opts.pathDescriptor, opts.resourceId);
 		}).toThrow(opts.result);
 	},
 	[
@@ -91,15 +91,15 @@ cases(
 			state,
 			pathDescriptor: 'isNotList',
 			resourceId: id,
-			result: `Type mismatch: isNotList does not resolve as an instance of Immutable.List, 
+			result: `Type mismatch: isNotList does not resolve as an instance of Immutable.List,
 got Map { "id": Map { "id": "id" } }`,
 		},
 		{
 			name: 'throw if collection can\'t be found',
 			state,
 			pathDescriptor: 'notFound',
 			resourceId: id,
-			result: `Type mismatch: notFound does not resolve as an instance of Immutable.List, 
+			result: `Type mismatch: notFound does not resolve as an instance of Immutable.List,
 got undefined`,
 		},
 	],

packages/cmf/src/actions/index.js

@@ -7,6 +7,7 @@
 import * as collectionsActions from './collectionsActions';
 import * as componentsActions from './componentsActions';
 import * as settingsActions from './settingsActions';
+import * as saga from './saga';
 import http from './http';
 
 /**
@@ -27,4 +28,5 @@ export default {
 	collections: collectionsActions,
 	components: componentsActions,
 	settings: settingsActions,
+	saga,
 };

packages/cmf/src/actions/saga.js

@@ -0,0 +1,16 @@
+import CONST from '../constant';
+
+export function start(event = {}, data) {
+	return {
+		type: CONST.DID_MOUNT_SAGA_START,
+		saga: data.saga,
+		event,
+	};
+}
+
+export function stop(event, data) {
+	return {
+		type: `${CONST.WILL_UNMOUNT_SAGA_STOP}_${data.saga}`,
+		event,
+	};
+}

packages/cmf/src/api.js

@@ -27,9 +27,15 @@ import action from './action';
 import actions from './actions';
 import actionCreator from './actionCreator';
 import expression from './expression';
-import saga from './saga';
+import sagas from './sagas';
+import selectors from './selectors';
 import component from './component';
 
+function registerInternals(context) {
+	actionCreator.register('cmf.saga.start', actions.saga.start, context);
+	actionCreator.register('cmf.saga.stop', actions.saga.stop, context);
+}
+
 export default {
 	action,
 	actions,
@@ -38,5 +44,8 @@ export default {
 	expression,
 	route,
 	registry,
-	saga,
+	registerInternals,
+	saga: sagas,
+	sagas,
+	selectors,
 };

packages/cmf/src/api.md

@@ -103,11 +103,25 @@ api.expressions.register('myExpression', myExpression);
 Expressions can be used for props resolution.
 In this case, the payload is the current props.
 
-api.saga
+api.sagas
 --
 
+You can register your saga in the cmf registry to be able to use the saga props
+supported by `cmfConnect`.
+
+```javascript
+function* mySaga(action) {
+    //...
+}
+api.sagas.register('mySaga', mySaga);
+```
+
+This is related to the `component` saga that you must initialize.
+
+Most of them are documented [here](sagas/index.md)
+
 ```javascript
-api.saga.putActionCreator('myAction', event, data, optionalContext);
+api.sagas.putActionCreator('myaction', event, data, optionalContext);
 ```
 
 This will call the registered `myAction` action creator.

packages/cmf/src/cmfConnect.js

@@ -46,6 +46,7 @@ const CMF_PROPS = [
 	'didMountActionCreator', // componentDidMount action creator id in registry
 	'keepComponentState', // redux state management on unmount
 	'view', // view component id in registry
+	'saga',
 	'willUnMountActionCreator', // componentWillUnmount action creator id in registry
 ];
 
@@ -247,6 +248,9 @@ export default function cmfConnect({
 				if (this.props.didMountActionCreator) {
 					this.dispatchActionCreator(this.props.didMountActionCreator, null, this.props);
 				}
+				if (this.props.saga) {
+					this.dispatchActionCreator('cmf.saga.start', { type: 'DID_MOUNT' }, this.props);
+				}
 			}
 
 			componentWillUnmount() {
@@ -260,6 +264,9 @@ export default function cmfConnect({
 				) {
 					this.props.deleteState();
 				}
+				if (this.props.saga) {
+					this.dispatchActionCreator('cmf.saga.stop', { type: 'WILL_UNMOUNT' }, this.props);
+				}
 			}
 
 			dispatchActionCreator(actionCreatorId, event, data, context) {

packages/cmf/src/constant.js

@@ -3,4 +3,7 @@ export default {
 	REGISTRY_COMPONENT_PREFIX: '_.route.component',
 	REGISTRY_HOOK_PREFIX: '_.route.hook',
 	REGISTRY_ACTION_CREATOR_PREFIX: 'actionCreator',
+	SAGA_PREFIX: 'saga',
+	DID_MOUNT_SAGA_START: 'DID_MOUNT_SAGA_START',
+	WILL_UNMOUNT_SAGA_STOP: 'WILL_UNMOUNT_SAGA_STOP',
 };