content: import React from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  
  import {
    getAllBookmarks,
    changeCurItem
  } from '../actions';
  import * as types from '../constants/ItemTypes'
  
  import Levels from '../components/Levels';
  import Parents from '../components/Parents';
  
  class FoldersContainer extends React.Component {
    componentDidMount() {
      this.props.fetchBookmarks()
        .then(() => {
          this.props.newCurItem(types.ID_STEP);
        });
    }
    
    /**
     * Method to get full three from root to selected item.
     * If our item is folder -> add children to levels
     * @param bookmarks Normalized bookmarks object
     * @param curItem Current selected link or folder
     */
    getLevels(bookmarks, curItem) {
      if (curItem == 0) return [];
      const item = bookmarks[curItem];
      const items = item.type === types.FOLDER
        ? item.parents.concat(item.id)
        : item.parents;
    
      return items.reduce((arr, itemId) => {
        const children = bookmarks[itemId].children;
        return children
          ? arr.concat([
              children.reduce((obj, el) => {
                const item = bookmarks[el];
                return item.type === types.FOLDER
                  ? Object.assign({}, obj, { folders: obj.folders.concat(item)})
                  : Object.assign({}, obj, { links: obj.links.concat(item)});
              }, { folders: [], links: [] })
            ])
          : arr;
      }, []);
    }
    
    render() {
      const bookmarks = this.props.bookmarks;
      if (!bookmarks[0]) return <div></div>;
      
      const curItem = this.props.curItem;
      const levels = this.getLevels(bookmarks, curItem);
      const parents = bookmarks[curItem].parents.concat(curItem);
      
      return (
        <div className="levels--wrap">
          <div className="levels__parents">
            <Parents
              folderClick={this.props.newCurItem}
              parents={parents.map(item => bookmarks[item])}
            />
          </div>
          <Levels
            levels={levels}
            folderClick={this.props.newCurItem}
            parents={parents}
          />
        </div>
      );
    }
  }
  
  FoldersContainer.propTypes = {
    bookmarks: PropTypes.objectOf(PropTypes.shape({
      id: PropTypes.number.isRequired,
      type: PropTypes.oneOf([types.FOLDER, types.LINK]).isRequired,
      name: PropTypes.string.isRequired,
      parents: PropTypes.array,
      children: PropTypes.array
    })).isRequired,
    curItem: PropTypes.number.isRequired,
    fetchBookmarks: PropTypes.func.isRequired,
    newCurItem: PropTypes.func.isRequired
  };
  
  const mapStateToProps = (state, ownProps) => ({
    bookmarks: state.bookmarks,
    curItem: state.curItem
  });
  
  const mapDispatchToProps = (dispatch) => ({
    fetchBookmarks: () =>
      dispatch(getAllBookmarks()),
    newCurItem: (newItem) => {
      dispatch(changeCurItem(newItem))
    }
  });
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(FoldersContainer);