<commit_before>import React, {Component} from 'react'
import { connect } from 'react-redux';
import {
  getClassroomLessonScriptItem
} from './helpers';
import * as IntF from '../interfaces';

import ScriptComponent from '../shared/scriptComponent'

class showScriptItem extends Component<any, any> {
  constructor(props){
    super(props);
  }

  getCurrentScriptItem(): IntF.ScriptItem {
    const {classroomLessonID, slideID, scriptItemID} = this.props.params;
    return getClassroomLessonScriptItem(this.props.classroomLessons.data, classroomLessonID, slideID, scriptItemID)
  }

  render() {
    if (this.props.classroomLessons.hasreceiveddata) {
      return <ScriptComponent script={[this.getCurrentScriptItem()]}
      // return (
      //   <div>
      //     {this.getCurrentScriptItem().data.heading}
      //   </div>
      // )
    } else {
      return (
        <p>Loading...</p>
      )
    }

  }

}

function select(props) {
  return {
    classroomLessons: props.classroomLessons
  };
}

export default connect(select)(showScriptItem)
<commit_msg>changing input field on scriptItem updates preview<commit_after>import React, {Component} from 'react'
import { connect } from 'react-redux';
import _ from 'lodash';
import {
  getClassroomLessonScriptItem
} from './helpers';
import * as IntF from '../interfaces';

import ScriptComponent from '../shared/scriptComponent'

class showScriptItem extends Component<any, any> {
  constructor(props){
    super(props);

    this.state = {}
  }

  componentDidUpdate() {
    if (this.props.classroomLessons.hasreceiveddata && !this.state.scriptItem) {
      this.setState({scriptItem: this.getCurrentScriptItem()})
    }
  }

  getCurrentScriptItem(): IntF.ScriptItem {
    const {classroomLessonID, slideID, scriptItemID} = this.props.params;
    return getClassroomLessonScriptItem(this.props.classroomLessons.data, classroomLessonID, slideID, scriptItemID)
  }

  updateValue(e, value) {
    const newScriptItem = _.merge({}, this.state.scriptItem)
    newScriptItem.data[value] = e.target.value
    this.setState({scriptItem: newScriptItem})
  }

  // updateBody(e) {
  //   const newScriptItem = _.merge({}, this.state.scriptItem)
  //   newScriptItem.data.body = e.target.value
  //   this.setState({scriptItem: newScriptItem})
  // }
  //
  renderForm() {
    switch (this.state.scriptItem.type) {
      case 'STEP-HTML':
        return (<div>
          <textarea onChange={(e) => this.updateValue(e, 'heading')} value={this.state.scriptItem.data.heading}></textarea>
          <textarea onChange={this.updateBody} value={this.state.scriptItem.data.body}></textarea>
        </div>)
    }
  }

  render() {
    if (this.state.scriptItem) {
      return (
        <div>
          <ScriptComponent script={[this.state.scriptItem]} />
          {this.renderForm()}
        </div>
      )
      // return (
      //   <div>
      //     {this.getCurrentScriptItem().data.heading}
      //   </div>
      // )
    } else {
      return (
        <p>Loading...</p>
      )
    }

  }

}

function select(props) {
  return {
    classroomLessons: props.classroomLessons
  };
}

export default connect(select)(showScriptItem)

{'fraction_non_alphanumeric': 0.13904582548650346, 'fraction_numerical': 0.0, 'mean_word_length': 3.013853904282116, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, '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': '133571', 'n_tokens_mistral': 999, 'n_tokens_neox': 996, 'n_words': 178}