import React from 'react';
import { connect } from 'react-redux';

import { fetchSavedPosts } from '../../actions/posts.js';
import { selectSaved } from '../../actions/selected.js';
import { SAVED_TYPE } from '../../constants.js';

class SavedItem extends React.Component {
  handleSelect() {
    this.props.selectSaved();
    this.props.fetchSavedPosts();
  }

  render() {
    const className =
      this.props.selected.type === SAVED_TYPE
        ? 'sidebar__container sidebar__container--selected'
        : 'sidebar__container';

    return (
      <li className="sidebar__item">
        <div className={className}>
          <span className="sidebar__icon saved-icon" />
          <div className="sidebar__text" onClick={() => this.handleSelect()}>
            <span>Saved posts</span>
          </div>
        </div>
      </li>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  selectSaved: () => dispatch(selectSaved()),
  fetchSavedPosts: () => dispatch(fetchSavedPosts()),
});

export default connect(null, mapDispatchToProps)(SavedItem);
