Add selectors

Author: usulpro

dev/register.js

@@ -42,14 +42,24 @@ const AddonPanel = ({
   );
 };
 
-register(({ global, local }) => ({
-  nextInd: local((store) => ({
-    currentTheme: store.currentTheme + 1,
-  })),
-  update: global(),
-}))(AddonPanel);
+register(
+  {
+    themeInd: store => store.currentTheme,
+    themeList: store => store.themes,
+  },
+  ({ global, local }) => ({
+    nextInd: local(store => ({
+      currentTheme: store.currentTheme + 1,
+    })),
+    update: global(),
+  })
+)(AddonPanel);
 
-// register({
-//   nextInd: (store) => ({ ...store, currentTheme: store.currentTheme + 1 }),
-//   update: null, // <-- it works :)
-// })(AddonPanel);
+/* Plain object example
+
+register({
+  nextInd: (store) => ({ ...store, currentTheme: store.currentTheme + 1 }),
+  update: null,
+})(AddonPanel);
+
+*/

dev/withAdk.js

@@ -17,5 +17,5 @@ const DecoratorUI = ({ context, getStory, data, parameters }) => (
   </div>
 );
 
-export const withAdk = createDecorator(DecoratorUI, {isGlobal: false});
+export const withAdk = createDecorator()(DecoratorUI, {isGlobal: false});
 export const adkParams = setParameters()

src/ChannelStore.js

@@ -62,7 +62,6 @@ export default class ChannelStore {
   onInitChannel = initData => {
     const { data, id } = initData;
     const selectorId = id || GLOBAL;
-    console.log('TCL: ChannelStore -> onConnectedFn -> selectorId', selectorId);
     const selectedData = { ...(this.store[selectorId] || {}) };
     selectedData.init = data;
     selectedData.over = selectedData.over || {};
@@ -126,8 +125,6 @@ export default class ChannelStore {
     return payload => {
       const subId = getSubId();
       const subData = this.store[subId];
-      console.log('TCL: ChannelStore -> _createAction -> subId', subId);
-      console.log('TCL: ChannelStore -> _createAction -> subData', subData);
       const current = {
         ...subData.init,
         ...subData.over,
@@ -145,8 +142,6 @@ export default class ChannelStore {
     this._createAction(reducer, () => this.selectorId || this.id);
 
   sendInit = data => {
-    console.log('TCL: ChannelStore -> onConnectedFn -> id', this.id);
-
     this.init(data);
   };
 

src/decorator.js

@@ -3,7 +3,7 @@ import withChannel from './withChannel';
 
 import { getConfig } from './config';
 
-export const createDecorator = (Component, { isGlobal = true } = {}) => initData => (getStory, context) => {
+export const createDecorator = (selectors, createActions) => (Component, { isGlobal = true } = {}) => initData => (getStory, context) => {
   const {
     ADDON_ID,
     EVENT_ID_INIT,
@@ -24,6 +24,7 @@ export const createDecorator = (Component, { isGlobal = true } = {}) => initData
     panel: false,
     parameters,
     storyId,
+    createActions,
   })(Component);
 
   return <WithChannel getStory={getStory} context={context} />;

src/register.js

@@ -90,6 +90,7 @@ class PanelHOC extends React.Component {
             <div ref={ref} name="addon-holder" style={{ height: '100%' }}>
               <Panel
                 {...this.props.actions}
+                {...this.props.selectors}
                 api={api}
                 active={active}
                 data={data}
@@ -111,7 +112,7 @@ class PanelHOC extends React.Component {
   }
 }
 
-export const register = createActions => (Panel, { type = addonTypes.PANEL, initData } = {}) => {
+export const register = (storeSelectors, createActions) => (Panel, { type = addonTypes.PANEL, initData } = {}) => {
   const config = getConfig();
   const {
     EVENT_ID_INIT,
@@ -129,6 +130,7 @@ export const register = createActions => (Panel, { type = addonTypes.PANEL, init
     ADDON_ID,
     initData,
     panel: true,
+    storeSelectors,
     createActions,
   })(PanelHOC);
 

src/withChannel.js

@@ -5,6 +5,15 @@ import ChannelStore from './ChannelStore';
 const getDisplayName = WrappedComponent =>
   WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
+const tryToSelect = fn => store => {
+  try {
+    return fn(store);
+  } catch (err) {
+    console.warn(err);
+    return undefined;
+  }
+};
+
 const withChannel = ({
   EVENT_ID_INIT,
   EVENT_ID_DATA,
@@ -14,30 +23,48 @@ const withChannel = ({
   panel,
   parameters,
   storyId,
+  storeSelectors = {},
   createActions = {},
 }) => WrappedComponent =>
   class extends React.Component {
     static displayName = `WithChannel(${getDisplayName(WrappedComponent)})`;
 
-    state = {
-      data: {
+    constructor(props, ...args) {
+      super(props, ...args);
+      const initStateData = {
         ...initData,
-        ...this.props.initData,
+        ...props.initData,
         ...parameters,
-      },
-      isReceived: false,
-    };
+      };
+
+      this.state = {
+        data: initStateData,
+        selectors: this.prepareSelectors(initStateData),
+        isReceived: false,
+      };
+
+      this.store = new ChannelStore({
+        EVENT_ID_INIT,
+        EVENT_ID_DATA,
+        EVENT_ID_BACK,
+        name: props.pointName,
+        initData: this.state.data,
+        isPanel: this.isPanel,
+        storyId,
+      });
+
+      this.actions = this.prepareActions();
+    }
 
     isPanel = this.props.panel || panel;
-    store = new ChannelStore({
-      EVENT_ID_INIT,
-      EVENT_ID_DATA,
-      EVENT_ID_BACK,
-      name: this.props.pointName,
-      initData: this.state.data,
-      isPanel: this.isPanel,
-      storyId,
-    });
+
+    prepareSelectors = store => {
+      return Object.entries(storeSelectors)
+        .map(([name, selector]) => ({
+          [name]: tryToSelect(selector)(store),
+        }))
+        .reduce((akk, cur) => ({ ...akk, ...cur }), {});
+    };
 
     prepareActions = () => {
       const {
@@ -52,7 +79,6 @@ const withChannel = ({
             .reduce((acc, cur) => ({ ...acc, ...cur }), {});
       return actions;
     };
-    actions = this.prepareActions();
 
     componentDidMount() {
       this.debugLog('componentDidMount');
@@ -83,12 +109,16 @@ const withChannel = ({
     };
 
     onData = data => {
-      this.setState({ data, isReceived: true });
+      this.setState({
+        data,
+        isReceived: true,
+        selectors: this.prepareSelectors(data),
+      });
     };
 
     render() {
       const { pointName, initData, active, onData, ...props } = this.props;
-      const { data, isReceived } = this.state;
+      const { data, isReceived, selectors } = this.state;
 
       if (active === false) return null;
       if (!isReceived) return null;
@@ -100,6 +130,7 @@ const withChannel = ({
           store={this.store}
           active={active}
           parameters={parameters}
+          selectors={selectors}
           actions={this.actions}
           {...props}
         />