<commit_before>import React, {PropTypes} from 'react'
import JSONView from './JSONView'

import {createFormBuilderState} from '../../../src/state/FormBuilderState'

import styles from './styles/Demo.css'

import {
  FormBuilder,
  FormBuilderProvider
} from '../../../src'

const DEBUG_JSON_STYLE = {
  zIndex: 10000,
  overflow: 'scroll',
  padding: 50,
  backgroundColor: 'white',
  position: 'fixed',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0
}

function preventDefault(e) {
  e.preventDefault()
}

function restore(schema, type) {
  try {
    return JSON.parse(localStorage.getItem(`form-builder-demo-${schema.name}-${type.name}`))
  } catch (error) {
    console.log('Error reading from local storage: ', error)
  }
}

function save(schema, type, editorValue) {
  localStorage.setItem(`form-builder-demo-${schema.name}-${type.name}`, JSON.stringify(editorValue))
}

export default class Demo extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.handleChange = this.handleChange.bind(this)
    const {schema, type, resolveInputComponent} = props
    const resolveContainer = (field, fieldType) => {
      const input = resolveInputComponent(field, fieldType)
      return input.valueContainer
    }
    const value = restore(schema, type) || void 0

    this.state = {
      value: createFormBuilderState(value, {
        type: type,
        schema: schema,
        resolveContainer
      }),
      saved: false,
      shouldInspect: false
    }
  }

  static propTypes = {
    schema: PropTypes.object.isRequired,
    resolveInputComponent: PropTypes.func.isRequired,
    resolveFieldComponent: PropTypes.func.isRequired,
    type: PropTypes.object.isRequired
  };

  handleChange(event) {
    const {value} = this.state
    const nextValue = value.patch(event.patch)
    const validation = nextValue.validate()
    this.setState({
      shouldInspect: false,
      saved: false,
      value: nextValue,
      validation: validation
    })
  }

  clear() {
    const {schema, type, resolveInputComponent} = this.props
    const newValue = createFormBuilderState(void 0, {
      type: type,
      schema: schema,
      resolveInputComponent
    })
    this.setState({value: newValue})
  }

  save() {
    const {value} = this.state
    const {schema, type} = this.props
    save(schema, type, value.unwrap())
    this.setState({saved: true})
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.shouldInspect !== this.state.shouldInspect) {
      document.body.style.overflow = this.state.shouldInspect ? 'hidden' : ''
    }
  }

  render() {
    const {value, saved, validation, shouldInspect} = this.state
    const {schema, type, resolveInputComponent, resolveFieldComponent} = this.props

    if (shouldInspect) {
      console.log('CURRENT VALUE', value) // eslint-disable-line no-console
    }

    return (
      <div className={styles.root}>
        <button onClick={() => this.save()}>{saved ? 'Saved' : 'Save'} to local storage</button>
        <button onClick={() => this.clear()}>Clear value</button>
        {!shouldInspect && <button onClick={() => this.setState({shouldInspect: true})}>Inspect</button>}<commit_msg>Fix wrong call to .uwrap form builder value when saving to localstorage<commit_after>import React, {PropTypes} from 'react'
import JSONView from './JSONView'

import {createFormBuilderState} from '../../../src/state/FormBuilderState'

import styles from './styles/Demo.css'

import {
  FormBuilder,
  FormBuilderProvider
} from '../../../src'

const DEBUG_JSON_STYLE = {
  zIndex: 10000,
  overflow: 'scroll',
  padding: 50,
  backgroundColor: 'white',
  position: 'fixed',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0
}

function preventDefault(e) {
  e.preventDefault()
}

function restore(schema, type) {
  try {
    return JSON.parse(localStorage.getItem(`form-builder-demo-${schema.name}-${type.name}`))
  } catch (error) {
    console.log('Error reading from local storage: ', error)
  }
}

function save(schema, type, editorValue) {
  localStorage.setItem(`form-builder-demo-${schema.name}-${type.name}`, JSON.stringify(editorValue))
}

export default class Demo extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.handleChange = this.handleChange.bind(this)
    const {schema, type, resolveInputComponent} = props
    const resolveContainer = (field, fieldType) => {
      const input = resolveInputComponent(field, fieldType)
      return input.valueContainer
    }
    const value = restore(schema, type) || void 0

    this.state = {
      value: createFormBuilderState(value, {
        type: type,
        schema: schema,
        resolveContainer
      }),
      saved: false,
      shouldInspect: false
    }
  }

  static propTypes = {
    schema: PropTypes.object.isRequired,
    resolveInputComponent: PropTypes.func.isRequired,
    resolveFieldComponent: PropTypes.func.isRequired,
    type: PropTypes.object.isRequired
  };

  handleChange(event) {
    const {value} = this.state
    const nextValue = value.patch(event.patch)
    const validation = nextValue.validate()
    this.setState({
      shouldInspect: false,
      saved: false,
      value: nextValue,
      validation: validation
    })
  }

  clear() {
    const {schema, type, resolveInputComponent} = this.props
    const newValue = createFormBuilderState(void 0, {
      type: type,
      schema: schema,
      resolveInputComponent
    })
    this.setState({value: newValue})
  }

  save() {
    const {value} = this.state
    const {schema, type} = this.props
    save(schema, type, value.serialize())
    this.setState({saved: true})
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.shouldInspect !== this.state.shouldInspect) {
      document.body.style.overflow = this.state.shouldInspect ? 'hidden' : ''
    }
  }

  render() {
    const {value, saved, validation, shouldInspect} = this.state
    const {schema, type, resolveInputComponent, resolveFieldComponent} = this.props

    if (shouldInspect) {
      console.log('CURRENT VALUE', value) // eslint-disable-line no-console
    }

    return (
      <div className={styles.root}>
        <button onClick={() => this.save()}>{saved ? 'Saved' : 'Save'} to local storage</button>
        <button onClick={() => this.clear()}>Clear value</button>
        {!shouldInspect && <button onClick={() => this.setState({shouldInspect: true})}>Inspect</button>}
{'fraction_non_alphanumeric': 0.13359193173002326, 'fraction_numerical': 0.004034134988363072, 'mean_word_length': 3.334902488231338, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 25, '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': '7039394', 'n_tokens_mistral': 1949, 'n_tokens_neox': 1932, 'n_words': 444}