michelson / dante2

A complete rewrite of dante editor in draft-js
https://michelson.github.io/dante2/
Other
912 stars 121 forks source link

Data persistence in Rails #152

Closed jodyneckles closed 5 years ago

jodyneckles commented 5 years ago

I am relatively new to programming and would like to replace a standard TextArea with a Dante2 React Component.

I can edit content but would like to persist it a Rails database.

In React I have a createNuggetForm.js looks like this:

  <Dante
          body_placeholder={'Do what you will'}
          onChange={editor => { this.danteChangeHandler(editor) }}
        />
 danteChangeHandler = (editor) => {
    this.setState({
      body: editor.emitSerializedOutput()
    })
  }
  handleSubmit = async event => {
    const { title, img_url, video_url, question, body } = this.state
    const nugget = { title, img_url, video_url, question, body, theme_id }
    await API.createNugget(nugget)
    this.props.history.push('/content')
  }

In React the API.js looks like this:

static createNugget (nugget) {
    console.log('API Create Nugget: ', nugget)
    return this.post(this.baseURL + '/nuggets', nugget)
  }
  static post (url, data) {
    return fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    }).then(resp => resp.json())
      .then(([response, json]) => {
        if (!response.ok) {
          throw new Error(json.message)
        }
        // render(json)
      })
}

The Rails nuggets_controller.rb looks like this:

 def create
      @nugget = Nugget.new(nugget_params)
      if @nugget.valid? 
        @nugget.save!
        render json: @nugget
      else
        render json: {error: "Please complete required fields"}, status: 400
      end
    end

private
def nugget_params
      params.require(:nugget).permit(:id, :title, :img_url, :video_url, :question, :body, :theme_id)
    end

I can persist a string but not the Dante object which I can see the API console.log. The record is created with other attributes but the :body is nil . Not sure why? Any help and examples to persist data and then read the data back in React would be greatly appreciated

michelson commented 5 years ago

Hi @jodyneckles , you have to check your ajax method and see if you are sending the data. put a debugger on js or a debugger in the backend. check your network (in chrome) to see what are you really sending