@capillarytech/creatives-library 2.0.70 → 2.0.72

package/v2Containers/TagList/index.js

@@ -0,0 +1,236 @@
+/*
+ *
+ * TagList
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { Tree } from 'antd';
+import _ from 'lodash';
+import { createStructuredSelector } from 'reselect';
+import { bindActionCreators } from 'redux';
+import makeSelectTagList from './selectors';
+import { UserIsAuthenticated } from '../../utils/authWrapper';
+import * as actions from './actions';
+import * as globalActions from '../../containers/Cap/actions';
+// import styled from styled-components;
+import CapTagList from '../../components/CapTagList';
+import './_tagList.scss';
+const TreeNode = Tree.TreeNode;
+
+export class TagList extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+    };
+    this.renderTags = this.renderTags.bind(this);
+    this.populateTags = this.populateTags.bind(this);
+    this.populateTagForChildren = this.populateTagForChildren.bind(this);
+    this.transformInjectedTags = this.transformInjectedTags.bind(this);
+  }
+
+  componentDidMount() {
+    console.log('tags props', this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (_.isEmpty(this.props.injectedTags) && _.isEmpty(this.props.tags)) {
+      this.setState({loading: true});
+    }
+    if (!_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
+      console.log('received new tags', nextProps);
+      this.setState({loading: false});
+    }
+    if (!_.isEqual(nextProps.tags, this.props.tags)) {
+      console.log('received new tags', nextProps);
+      this.setState({loading: false});
+    }
+  }
+
+  onSelect = (selectedKeys) => {
+    this.props.onTagSelect(selectedKeys[0]);
+  };
+
+  onClick = (e, data) => {
+    console.log('clicked ', e, data);
+  };
+
+  getTagsforContext = (data) => {
+    //this.setState({loading: true});
+    this.props.onContextChange(data);
+  }
+
+  populateTags(tagsList) {
+    console.log('populating tags', tagsList);
+    const mainTags = {};
+
+    //Form tags object with tag headers
+    _.forEach(tagsList, (temp) => {
+      const tag = temp.definition;
+      if (!tag['tag-header']) {
+        mainTags[tag.value] = {
+          name: tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
+          desc: tag.desc ? tag.desc : tag.label.en,
+        };
+      } else if (tag['tag-header'] && mainTags[tag.value]) {
+        mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
+      } else if (!mainTags[tag.value]) {
+        console.log('Inside ', tag.label);
+        mainTags[tag.value] = {
+          'tag-header': true,
+          "name": tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
+          "desc": tag.desc ? tag.desc : tag.label.en,
+          "subtags": tag.subtags,
+        };
+      }
+    });
+
+    const mainTagsCloned = _.cloneDeep(mainTags);
+    //Insert subtags in tag headers and reomve them from top level
+    const result = {};
+    _.forEach(mainTagsCloned, (tag, key) => {
+      if (tag['tag-header']) {
+        const tagWithChildren = this.populateTagForChildren(tag, mainTagsCloned, key);
+        tagWithChildren.resolved = true;
+        result[key] = tagWithChildren;
+      } else {
+        result[key] = tag;
+      }
+    });
+
+    //Delete extra tag headers
+    _.forEach(result, (tag) => {
+      if (tag['tag-header']) {
+        _.forEach(tag.subtags, (subtag, key) => {
+          if (result[key]) {
+            result[key].deleted = true;
+          }
+        });
+      }
+    });
+    //Actually delete them
+    _.forEach(result, (tag, key) => {
+      if (tag.deleted) {
+        delete result[key];
+      }
+    });
+    return result;
+  }
+
+  populateTagForChildren(targetTag, tagsObject, tagValue) {
+    const tag = targetTag;
+    if (tag && tag['tag-header'] && !tag.resolved) {
+      const tempSubTags = {};
+      _.forEach(tag.subtags, (subtag) => {
+        if (tagsObject[subtag]) {
+          const children = this.populateTagForChildren(tagsObject[subtag], tagsObject, subtag);
+          children.resolved = true;
+          tempSubTags[subtag] = children;
+        }
+      });
+      tag.subtags = tempSubTags;
+      return tag;
+    }
+    return tagsObject[tagValue];
+  }
+
+  transformInjectedTags(tags) {
+    _.forEach(tags, (tag) => {
+      const temp = tag;
+      let subKey = '';
+      Object.keys(tag).map( (k) => {
+        if (k.indexOf("subtags") !== -1) {
+          subKey = k;
+        }
+        return true;
+      });
+      if (subKey !== '') {
+        temp['tag-header'] = true;
+        if (subKey !== 'subtags') {
+          temp.subtags = _.cloneDeep(temp[subKey]);
+          delete temp[subKey];
+        }
+        temp.subtags = this.transformInjectedTags(temp.subtags);
+      }
+    });
+    return tags;
+  }
+
+  renderTags(tags) {
+    const list = [];
+    _.forEach(tags, (val, key) => {
+      if (_.has(val, 'subtags')) {
+        const temp = this.renderTags(val.subtags);
+        list.push((
+          <TreeNode title={val.name} key={key}>
+            {temp}
+          </TreeNode>
+        ));
+      } else {
+        const tempNode = (<TreeNode title={val.name} key={key}></TreeNode>);
+        list.push(tempNode);
+      }
+    });
+    return list;
+  }
+
+  render() {
+    let tags = {};
+    let injectedTags = {};
+    if (this.props.injectedTags && !_.isEmpty(this.props.injectedTags)) {
+      injectedTags = this.transformInjectedTags(this.props.injectedTags);
+      console.log('transformed injected Tags', injectedTags);
+    }
+    if (this.props.tags && this.props.tags.length > 0) {
+      tags = this.populateTags(this.props.tags);
+      console.log('populating tags', tags);
+    }
+    tags = _.merge( {}, tags, injectedTags);
+    console.log('merged tags', tags);
+    return (
+      <div className={this.props.className ? this.props.className : ''}>
+        <CapTagList
+          loading={this.state.loading}
+          tags={tags}
+          onSelect={this.onSelect}
+          label={this.props.label}
+          onContextChange={this.getTagsforContext}
+          moduleFilterEnabled={this.props.moduleFilterEnabled}
+        />
+      </div>
+    );
+  }
+}
+
+TagList.defaultProps = {
+  isNewVersionFlow: false,
+  userLocale: 'en',
+};
+
+TagList.propTypes = {
+  onTagSelect: PropTypes.func,
+  tags: PropTypes.array,
+  injectedTags: PropTypes.object,
+  label: PropTypes.string,
+  onContextChange: PropTypes.func,
+  moduleFilterEnabled: PropTypes.bool,
+  className: PropTypes.string,
+  userLocale: PropTypes.string,
+};
+
+const mapStateToProps = createStructuredSelector({
+  TagList: makeSelectTagList(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(TagList));

package/v2Containers/TagList/messages.js

@@ -0,0 +1,13 @@
+/*
+ * TagList Messages
+ *
+ * This contains all the text for the TagList component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.containers.TagList.header',
+    defaultMessage: 'This is TagList container !',
+  },
+});

package/v2Containers/TagList/reducer.js

@@ -0,0 +1,23 @@
+/*
+ *
+ * TagList reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import {
+  DEFAULT_ACTION,
+} from './constants';
+
+const initialState = fromJS({});
+
+function tagListReducer(state = initialState, action) {
+  switch (action.type) {
+    case DEFAULT_ACTION:
+      return state;
+    default:
+      return state;
+  }
+}
+
+export default tagListReducer;

package/v2Containers/TagList/sagas.js

@@ -0,0 +1,11 @@
+// import { take, call, put, select } from 'redux-saga/effects';
+
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in containers/HomePage/sagas.js
+}
+
+// All sagas to be loaded
+export default [
+  defaultSaga,
+];

package/v2Containers/TagList/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the tagList state domain
+ */
+const selectTagListDomain = () => (state) => state.get('tagList');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by TagList
+ */
+
+const makeSelectTagList = () => createSelector(
+  selectTagListDomain(),
+  (substate) => substate.toJS()
+);
+
+export default makeSelectTagList;
+export {
+  selectTagListDomain,
+};

package/v2Containers/TagList/tests/actions.test.js

@@ -0,0 +1,18 @@
+
+import {
+  defaultAction,
+} from '../actions';
+import {
+  DEFAULT_ACTION,
+} from '../constants';
+
+describe('TagList actions', () => {
+  describe('Default Action', () => {
+    it('has a type of DEFAULT_ACTION', () => {
+      const expected = {
+        type: DEFAULT_ACTION,
+      };
+      expect(defaultAction()).toEqual(expected);
+    });
+  });
+});

package/v2Containers/TagList/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import { TagList } from '../index';
+
+describe('<TagList />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/v2Containers/TagList/tests/reducer.test.js

@@ -0,0 +1,9 @@
+
+import { fromJS } from 'immutable';
+import tagListReducer from '../reducer';
+
+describe('tagListReducer', () => {
+  it('returns the initial state', () => {
+    expect(tagListReducer(undefined, {})).toEqual(fromJS({}));
+  });
+});

package/v2Containers/TagList/tests/sagas.test.js

@@ -0,0 +1,15 @@
+/**
+ * Test  sagas
+ */
+
+/* eslint-disable redux-saga/yield-effects */
+// import { take, call, put, select } from 'redux-saga/effects';
+// import { defaultSaga } from '../sagas';
+
+// const generator = defaultSaga();
+
+describe('defaultSaga Saga', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/v2Containers/TagList/tests/selectors.test.js

@@ -0,0 +1,10 @@
+// import { fromJS } from 'immutable';
+// import { makeSelectTagListDomain } from '../selectors';
+
+// const selector = makeSelectTagListDomain();
+
+describe('makeSelectTagListDomain', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});