text: import React from 'react';
  import { connect } from 'react-redux';
  
  // style
  import '../../../css/editor.css';
  
  // partials
  import Breadcrumb from '../../partials/Breadcrumb';
  import AddCategoryModal from '../categories/AddModal';
  import AddTagModal from '../tags/AddModal';
  import PostForm from './PostForm';
  
  // actions
  import { listAllCategories } from '../../../store/actions/CategoryActions';
  import { listAllTags } from '../../../store/actions/TagActions';
  import { handleFieldChange, addPost, setPostDefaults, resetFields } from '../../../store/actions/PostActions';
  
  
  class Add extends React.Component
  {
      constructor(props)
      {
          super(props);
  
          this.state = {
            show_add_category_modal: false,
            show_add_tag_modal: false
          };
  
          this.submitRef = React.createRef();
  
          this.handleFieldChange = this.handleFieldChange.bind(this);
  
          this.handleSubmit = this.handleSubmit.bind(this);
  
          this.handleSave = this.handleSave.bind(this);
      }
  
      componentDidMount()
      {
          this.props.setPostDefaults();
  
          this.props.resetFields();
  
          this.props.listAllCategories();
  
          this.props.listAllTags();
      }
  
      openAddCategoryModal() {
          this.setState({
              show_add_category_modal: true
          });
      }
  
      closeAddCategoryModal() {
          this.setState({
              show_add_category_modal: false
          });
      }
  
      openAddTagModal() {
          this.setState({
              show_add_tag_modal: true
          });
      }
  
      closeAddTagModal() {
          this.setState({
              show_add_tag_modal: false
          });
      }
  
      handleFieldChange(e) {
          if(e.target.name == 'tag[]') {
              this.props.handleFieldChange(e.target.name, e.target.value, e.target.checked);
          } else if(e.target.name == 'image') {
              this.props.handleFieldChange(e.target.name, e.target.files[0]);
          } else {
              this.props.handleFieldChange(e.target.name, e.target.value);
          }
      }
  
      handleCkeditorChange(editor) {
          this.props.handleFieldChange("content", editor.getData());
      }
      
      handleSubmit(e) {
          e.preventDefault();
  
          let self = this;
  
          this.props.addPost(this.props.post.post, function () {
  
              // reset fields
              self.props.resetFields();
  
              // redirect
              setTimeout(() => self.props.history.push('/posts'), 2000);
          });
      }
  
      handleSave(e) {
          e.preventDefault();
  
          this.props.handleFieldChange('published', e.target.name=='publish'?1:2);
  
          setTimeout(() => this.submitRef.current.click(), 200);
      }
  
      render()
      {
          return (
              <div className="content-wrapper">
                  <section className="content-header">
                      <h1>
                          Add Post
                      </h1>
  
                      <Breadcrumb />
  
                  </section>
  
                  <section className="content">
                      <div className="row">
                          <form method="post" role="form" onSubmit={this.handleSubmit}>
  
                              <PostForm post={this.props.post.post} create_update_spinner={this.props.post.create_update_spinner}
                                        success_message={this.props.post.success_message} error_message={this.props.post.error_message}
                                        handleFieldChange={this.handleFieldChange} handleCkeditorChange={(event, editor) => this.handleCkeditorChange(editor)}
                                        all_categories={this.props.all_categories} all_tags={this.props.all_tags} openAddCategoryModal={this.openAddCategoryModal.bind(this)}
                                        openAddTagModal={this.openAddTagModal.bind(this)} handleSave={this.handleSave} submitRef={this.submitRef}
                                        validation_errors={this.props.post.validation_errors}
                              />
  
                          </form>
                      </div>
                  </section>
  
                  <AddCategoryModal show_modal={this.state.show_add_category_modal} close_modal={this.closeAddCategoryModal.bind(this)} />
  
                  <AddTagModal show_modal={this.state.show_add_tag_modal} close_modal={this.closeAddTagModal.bind(this)} />
  
              </div>
          );
      }
  }
  
  const mapStateToProps = (state, ownProps) => {
      return {
          all_categories: state.category.all_categories,
          all_tags: state.tag.all_tags,
          post: state.post
      };
  };
  
  const mapDispatchToProps = (dispatch) => {
  
    return {
        addPost: (payload, cb) => dispatch(addPost(payload, cb)),
        listAllCategories: () => dispatch(listAllCategories()),
        listAllTags: () => dispatch(listAllTags()),
        handleFieldChange: (field, value, checked = null) => dispatch(handleFieldChange(field, value, checked)),
        setPostDefaults: () => dispatch(setPostDefaults()),
        resetFields: () => dispatch(resetFields())
    }
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Add);