<commit_before>import React from 'react'
import { connect } from 'react-redux'
import {
  TextEditor,
  hashToCollection
} from 'quill-component-library/dist/componentLibrary';
import { EditorState, ContentState } from 'draft-js'
import {
  submitNewTitleCard,
  updateTitleCard,
  submitTitleCardEdit
} from '../../actions/titleCards.ts'
import _ from 'lodash'

interface TitleCardFormState {
  title: string,
  content: string
}

class TitleCardForm extends React.Component<any, TitleCardFormState> {
  constructor(props) {
    super(props)

    if (props.routeParams.titleCardID && props.titleCards.hasreceiveddata) {
      const {titleCardID} = props.routeParams
      const titleCard = props.titleCards.data[titleCardID]
      const {title, content} = titleCard
      this.state = {
        content: content ? content : '',
        title: title ? title : ''
      }
    } else {
      this.state = {
        title: '',
        content: ''
      }
    }

    this.handleTitleChange = this.handleTitleChange.bind(this)
    this.handleContentChange = this.handleContentChange.bind(this)
    this.submit = this.submit.bind(this)
    this.renderHeaderText = this.renderHeaderText.bind(this)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.titleCards.hasreceiveddata && !this.props.titleCards.hasreceiveddata) {
      if (nextProps.routeParams.titleCardID && nextProps.titleCards.hasreceiveddata) {
        const {titleCardID} = nextProps.routeParams
        const titleCard = nextProps.titleCards.data[titleCardID]
        const {title, content} = titleCard
        this.setState({
          content: content ? content : this.state.content,
          title: title ? title : this.state.title
        })
      }
    }
  }

  submit() {
    const { titleCardID } = this.props.routeParams
    if (titleCardID) {
      this.props.dispatch(submitTitleCardEdit(titleCardID, this.state))
    } else {
      this.props.dispatch(submitNewTitleCard(this.state))
    }
  }

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

  handleContentChange(e) {
    const formattedContent = e.replace(/<p><\/p>/g, '<br/>').replace(/&nbsp;/g, '<br/>')
    this.setState({content: formattedContent})
  }

  renderHeaderText() {
    const { titleCardID } = this.props.routeParams
    if (titleCardID) {
      return 'Edit this title card'
    } else {
      return 'Create a new title card'
    }
  }

  render() {
    return (
      <div className="box">
        <h6 className="control subtitle">{this.renderHeaderText()}</h6>
        <br/>
        <label className="label">Title</label>
        <textarea className="input" type="text" value={this.state.title || ""} onChange={this.handleTitleChange}/>
        <br/><commit_msg>Add full interface<commit_after>import React from 'react'
import { connect } from 'react-redux'
import {
  TextEditor,
} from 'quill-component-library/dist/componentLibrary';
import { EditorState, ContentState } from 'draft-js'
import {
  submitNewTitleCard,
  submitTitleCardEdit
} from '../../actions/titleCards'
import _ from 'lodash'

interface TitleCardFormState {
  title: string,
  content: string
}

export interface TitleCardFormProps {
  titleCards: any
  routing: any
  routeParams: any
  dispatch(any): void 
}

class TitleCardForm extends React.Component<TitleCardFormProps, TitleCardFormState> {
  constructor(props) {
    super(props)

    if (props.routeParams.titleCardID && props.titleCards.hasreceiveddata) {
      const {titleCardID} = props.routeParams
      const titleCard = props.titleCards.data[titleCardID]
      const {title, content} = titleCard
      this.state = {
        content: content ? content : '',
        title: title ? title : ''
      }
    } else {
      this.state = {
        title: '',
        content: ''
      }
    }

    this.handleTitleChange = this.handleTitleChange.bind(this)
    this.handleContentChange = this.handleContentChange.bind(this)
    this.submit = this.submit.bind(this)
    this.renderHeaderText = this.renderHeaderText.bind(this)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.titleCards.hasreceiveddata && !this.props.titleCards.hasreceiveddata) {
      if (nextProps.routeParams.titleCardID && nextProps.titleCards.hasreceiveddata) {
        const {titleCardID} = nextProps.routeParams
        const titleCard = nextProps.titleCards.data[titleCardID]
        const {title, content} = titleCard
        this.setState({
          content: content ? content : this.state.content,
          title: title ? title : this.state.title
        })
      }
    }
  }

  submit() {
    const { titleCardID } = this.props.routeParams
    if (titleCardID) {
      this.props.dispatch(submitTitleCardEdit(titleCardID, this.state))
    } else {
      this.props.dispatch(submitNewTitleCard(this.state))
    }
  }

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

  handleContentChange(e) {
    const formattedContent = e.replace(/<p><\/p>/g, '<br/>').replace(/&nbsp;/g, '<br/>')
    this.setState({content: formattedContent})
  }

  renderHeaderText() {
    const { titleCardID } = this.props.routeParams
    if (titleCardID) {
      return 'Edit this title card'
    } else {
      return 'Create a new title card'
    }
  }

  render() {
    return (
      <div className="box">
        <h6 className="control subtitle">{this.renderHeaderText()}</h6>
        <br/>
        <label className="label">Title</label>
        <textarea className="input" value={this.state.title || ""} onChange={this.handleTitleChange}/>
        <br/>
{'fraction_non_alphanumeric': 0.12556134363211785, 'fraction_numerical': 0.0007185198491108317, 'mean_word_length': 3.0701754385964914, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, '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': '4555283', 'n_tokens_mistral': 1713, 'n_tokens_neox': 1688, 'n_words': 315}