<commit_before>import React from 'react';
import request from 'request';
import ItemDropdown from '../../general_components/dropdown_selectors/item_dropdown.jsx'
import MarkdownParser from '../../shared/markdown_parser.jsx'
import PreviewCard from '../../shared/preview_card.jsx';

const defaultPreviewCardContent = `<img class='preview-card-image' src='http://cultofthepartyparrot.com/parrots/hd/middleparrot.gif' />
<div class='preview-card-body'>
   <h3>Party Parrot Parade</h3>
   <p>There exist many excellent party parrots.</p>
   <p class='author'>by <NAME></p>
</div>`;

export default class extends React.Component {
  constructor(props) {
    super(props);
    const p = this.props.postToEdit
    // set state to empty values or those of the postToEdit
    this.state = {
      id: p ? p.id : null,
      title: p ? p.title : '',
      subtitle: p ? p.subtitle : '',
      body: p ? p.body : '',
      author_id: p ? p.author_id : 11 /* <NAME> */,
      topic: p ? p.topic : 'Webinars',
      draft: p ? p.draft : true,
      preview_card_content: p ? p.preview_card_content : null,
      custom_preview_card_content: p ? p.preview_card_content : defaultPreviewCardContent,
      preview_card_type: this.props.action === 'new' ? 'Blog Post' : 'Custom HTML',
      blogPostPreviewImage: 'http://placehold.it/300x135',
      blogPostPreviewTitle: 'Write Your Title Here',
      blogPostPreviewDescription: 'Write your description here, but be careful not to make it too long!',
      videoLink: 'https://www.youtube.com/watch?v=O_HyZ5aW76c',
      videoDescription: "I'll write it myself, and we'll do it live!",
      tweetLink: 'https://twitter.com/EdSurge/status/956861254982873088',
      tweetImage: 'http://placehold.it/300x135/00998a/fff',
      tweetText: '"Climbing up <NAME>’s learning hierarchy won’t be easy, but it is necessary if we want to build education technology capable of helping learners move beyond basic remembering and understanding."',
      tweetAuthor: 'EdSurge'
    };

    this.handleTitleChange = this.handleTitleChange.bind(this)
    this.handleSubtitleChange = this.handleSubtitleChange.bind(this)
    this.handleBodyChange = this.handleBodyChange.bind(this)
    this.handleSubmitClick = this.handleSubmitClick.bind(this)
    this.handleUnpublishClick = this.handleUnpublishClick.bind(this)
    this.handleTopicChange = this.handleTopicChange.bind(this)
    this.handleAuthorChange = this.handleAuthorChange.bind(this)
    this.handleCustomPreviewChange = this.handleCustomPreviewChange.bind(this)
    this.handlePreviewCardTypeChange = this.handlePreviewCardTypeChange.bind(this)
    this.handleBlogPostPreviewImageChange = this.handleBlogPostPreviewImageChange.bind(this)
    this.handleBlogPostPreviewTitleChange = this.handleBlogPostPreviewTitleChange.bind(this)
    this.handleBlogPostPreviewDescriptionChange = this.handleBlogPostPreviewDescriptionChange.bind(this)
    this.updatePreviewCardFromBlogPostPreview = this.updatePreviewCardFromBlogPostPreview.bind(this)
    this.renderPreviewCardContentFields = this.renderPreviewCardContentFields.bind(this)
    this.updatePreviewCardVideoLink = this.updatePreviewCardVideoLink.bind(this)
    this.updatePreviewCardVideoDescription = this.updatePreviewCardVideoDescription.bind(this)
    this.updatePreviewCardVideoContent = this.updatePreviewCardVideoContent.bind(this)
    this.updateTweetLink = this.updateTweetLink.bind(this)
    this.updateTweetImage = this.updateTweetImage.bind(this)
    this.updateTweetText = this.updateTweetText.bind(this)
    this.updateTweetAuthor = this.updateTweetAuthor.bind(this)
    this.updatePreviewCardTweetContent = this.updatePreviewCardTweetContent.bind(this)
  }

  componentDidMount() {
    this.updatePreviewCardBasedOnType()
  }

  handleTitleChange(e) {
    this.setState({title: e.target.value})
  }

  handleSubtitleChange(e) {
    this.setState({subtitle: e.target.value})
  }

  handleBodyChange(e) {
    this.setState({body: e.target.value})
    const container = document.getElementById('markdown-content');
    container.rows = 4;
    const rows = Math.ceil((container.scrollHeight - 64) / 20.3);
    container.rows = 2 + rows;
  }

  handleTopicChange(e) {
    this.setState({topic: e})
  }

  handleAuthorChange(e) {
    this.setState({author_id: e.id}, this.updatePreviewCardFromBlogPostPreview)
  }

  handleCustomPreviewChange(e) {
    this.setState({
      preview_card_content: e.target.value,
      custom_preview_card_content: e.target.value
    })
    const container = document.getElementById('preview-markdown-content');
    container.rows = 4;
    const rows = Math.ceil((container.scrollHeight - 64) / 20.3);
    container.rows = 2 + rows;
  }

  handleSubmitClick(e, shouldPublish) {
    e.preventDefault();
    let action
    let url = `${process.env.DEFAULT_URL}/cms/blog_posts/`
    if (this.props.action === 'new') {
      action = 'post'
    } else {
      action = 'put'
      url += this.props.postToEdit.id
    }
    request[action]({
      url,
      form: {
        blog_post: {
          title: this.state.title,
          subtitle: this.state.subtitle,
          body: this.state.body,
          topic: this.state.topic,
          author_id: this.state.author_id,
          preview_card_content: this.state.preview_card_content,
          draft: !shouldPublish
        },
        authenticity_token: ReactOnRails.authenticityToken()
      }
    }, (error, httpStatus, body) => {
      if (httpStatus.statusCode === 200 && this.props.action === 'new') {
        alert('Post added successfully!');
        window.location.href = `/cms/blog_posts/${JSON.parse(body).id}/edit`
      } else if (httpStatus.statusCode === 200) {
        alert('Update successful!');
      } else {
        alert("😨 Rut roh. Something went wrong! (Don't worry, it's probably not your fault.)");
      }
    })
  }

  handleUnpublishClick(e) {
    e.preventDefault();
    if(window.prompt('To unpublish this post, please type UNPUBLISH.') === 'UNPUBLISH') {
      window.location = `${process.env.DEFAULT_URL}/cms/blog_posts/${this.state.id}/unpublish`;
    }
  }

  renderSaveDraftButton() {
    if(this.props.action === 'new') {
      return <input type="submit" value="Save Draft" onClick={(e) => { this.handleSubmitClick(e, false) }} style={{background: 'white', color: '#00c2a2'}} />
    }
  }

  renderUnpublishButton() {
    if(this.props.action === 'edit' && !this.state.draft) {
      return <input type="submit" value="Unpublish" onClick={(e) => { this.handleUnpublishClick(e) }} style={{background: 'white', color: '#00c2a2'}} />
    }
  }<commit_msg>Add button for saving unpublished draft<commit_after>import React from 'react';
import request from 'request';
import ItemDropdown from '../../general_components/dropdown_selectors/item_dropdown.jsx'
import MarkdownParser from '../../shared/markdown_parser.jsx'
import PreviewCard from '../../shared/preview_card.jsx';

const defaultPreviewCardContent = `<img class='preview-card-image' src='http://cultofthepartyparrot.com/parrots/hd/middleparrot.gif' />
<div class='preview-card-body'>
   <h3>Party Parrot Parade</h3>
   <p>There exist many excellent party parrots.</p>
   <p class='author'>by <NAME></p>
</div>`;

export default class extends React.Component {
  constructor(props) {
    super(props);
    const p = this.props.postToEdit
    // set state to empty values or those of the postToEdit
    this.state = {
      id: p ? p.id : null,
      title: p ? p.title : '',
      subtitle: p ? p.subtitle : '',
      body: p ? p.body : '',
      author_id: p ? p.author_id : 11 /* <NAME> */,
      topic: p ? p.topic : 'Webinars',
      draft: p ? p.draft : true,
      preview_card_content: p ? p.preview_card_content : null,
      custom_preview_card_content: p ? p.preview_card_content : defaultPreviewCardContent,
      preview_card_type: this.props.action === 'new' ? 'Blog Post' : 'Custom HTML',
      blogPostPreviewImage: 'http://placehold.it/300x135',
      blogPostPreviewTitle: 'Write Your Title Here',
      blogPostPreviewDescription: 'Write your description here, but be careful not to make it too long!',
      videoLink: 'https://www.youtube.com/watch?v=O_HyZ5aW76c',
      videoDescription: "I'll write it myself, and we'll do it live!",
      tweetLink: 'https://twitter.com/EdSurge/status/956861254982873088',
      tweetImage: 'http://placehold.it/300x135/00998a/fff',
      tweetText: '"Climbing up <NAME>’s learning hierarchy won’t be easy, but it is necessary if we want to build education technology capable of helping learners move beyond basic remembering and understanding."',
      tweetAuthor: 'EdSurge'
    };

    this.handleTitleChange = this.handleTitleChange.bind(this)
    this.handleSubtitleChange = this.handleSubtitleChange.bind(this)
    this.handleBodyChange = this.handleBodyChange.bind(this)
    this.handleSubmitClick = this.handleSubmitClick.bind(this)
    this.handleUnpublishClick = this.handleUnpublishClick.bind(this)
    this.handleTopicChange = this.handleTopicChange.bind(this)
    this.handleAuthorChange = this.handleAuthorChange.bind(this)
    this.handleCustomPreviewChange = this.handleCustomPreviewChange.bind(this)
    this.handlePreviewCardTypeChange = this.handlePreviewCardTypeChange.bind(this)
    this.handleBlogPostPreviewImageChange = this.handleBlogPostPreviewImageChange.bind(this)
    this.handleBlogPostPreviewTitleChange = this.handleBlogPostPreviewTitleChange.bind(this)
    this.handleBlogPostPreviewDescriptionChange = this.handleBlogPostPreviewDescriptionChange.bind(this)
    this.updatePreviewCardFromBlogPostPreview = this.updatePreviewCardFromBlogPostPreview.bind(this)
    this.renderPreviewCardContentFields = this.renderPreviewCardContentFields.bind(this)
    this.updatePreviewCardVideoLink = this.updatePreviewCardVideoLink.bind(this)
    this.updatePreviewCardVideoDescription = this.updatePreviewCardVideoDescription.bind(this)
    this.updatePreviewCardVideoContent = this.updatePreviewCardVideoContent.bind(this)
    this.updateTweetLink = this.updateTweetLink.bind(this)
    this.updateTweetImage = this.updateTweetImage.bind(this)
    this.updateTweetText = this.updateTweetText.bind(this)
    this.updateTweetAuthor = this.updateTweetAuthor.bind(this)
    this.updatePreviewCardTweetContent = this.updatePreviewCardTweetContent.bind(this)
  }

  componentDidMount() {
    this.updatePreviewCardBasedOnType()
  }

  handleTitleChange(e) {
    this.setState({title: e.target.value})
  }

  handleSubtitleChange(e) {
    this.setState({subtitle: e.target.value})
  }

  handleBodyChange(e) {
    this.setState({body: e.target.value})
    const container = document.getElementById('markdown-content');
    container.rows = 4;
    const rows = Math.ceil((container.scrollHeight - 64) / 20.3);
    container.rows = 2 + rows;
  }

  handleTopicChange(e) {
    this.setState({topic: e})
  }

  handleAuthorChange(e) {
    this.setState({author_id: e.id}, this.updatePreviewCardFromBlogPostPreview)
  }

  handleCustomPreviewChange(e) {
    this.setState({
      preview_card_content: e.target.value,
      custom_preview_card_content: e.target.value
    })
    const container = document.getElementById('preview-markdown-content');
    container.rows = 4;
    const rows = Math.ceil((container.scrollHeight - 64) / 20.3);
    container.rows = 2 + rows;
  }

  handleSubmitClick(e, shouldPublish) {
    e.preventDefault();
    let action
    let url = `${process.env.DEFAULT_URL}/cms/blog_posts/`
    if (this.props.action === 'new') {
      action = 'post'
    } else {
      action = 'put'
      url += this.props.postToEdit.id
    }
    request[action]({
      url,
      form: {
        blog_post: {
          title: this.state.title,
          subtitle: this.state.subtitle,
          body: this.state.body,
          topic: this.state.topic,
          author_id: this.state.author_id,
          preview_card_content: this.state.preview_card_content,
          draft: !shouldPublish
        },
        authenticity_token: ReactOnRails.authenticityToken()
      }
    }, (error, httpStatus, body) => {
      if (httpStatus.statusCode === 200 && this.props.action === 'new') {
        alert('Post added successfully!');
        window.location.href = `/cms/blog_posts/${JSON.parse(body).id}/edit`
      } else if (httpStatus.statusCode === 200) {
        alert('Update successful!');
      } else {
        alert("😨 Rut roh. Something went wrong! (Don't worry, it's probably not your fault.)");
      }
    })
  }

  handleUnpublishClick(e) {
    e.preventDefault();
    if(window.prompt('To unpublish this post, please type UNPUBLISH.') === 'UNPUBLISH') {
      window.location = `${process.env.DEFAULT_URL}/cms/blog_posts/${this.state.id}/unpublish`;
    }
  }

  renderSaveDraftButton() {
    if(this.props.action === 'new' || this.state.draft) {
      return <input type="submit" value="Save Draft" onClick={(e) => { this.handleSubmitClick(e, false) }} style={{background: 'white', color: '#00c2a2'}} />
    }
  }

  renderUnpublishButton() {
    if(this.props.action === 'edit' && !this.state.draft) {
      return <input type="submit" value="Unpublish" onClick={(e) => { this.handleUnpublishClick(e) }} style={{background: 'white', color: '#00c2a2'}} />
    }
  }
{'fraction_non_alphanumeric': 0.12752487187217365, 'fraction_numerical': 0.010551703346397347, 'mean_word_length': 3.715351812366738, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 37, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4445370', 'n_tokens_mistral': 4198, 'n_tokens_neox': 4045, 'n_words': 760}