Ember: No model was found for 'user' and Duplicate POSTs created when executing the save promise

Question

UPDATE:

Can anyone help? I have been pursuing this without luck for the better half of this week. I do notice that the client is generating two POSTs. I have added code for the adapter. Is there anywhere else I should be looking?

I am going through the video tutorial provided below and am unable to resolve two errors when I click the submit button to save data to the database.

1. No model was found for 'user'
2. Two POSTs are being generated. This results in an Assertion Failed error, which I suspect is because the ID returned from the server does not match the current ID on the front-end.

I see that the database has two new records. When I click on the submit button again then the application takes me back to the todo-items page where it shows the two records. Can anyone advise what I am doing wrong?

Current versions:

• Ember : 3.2.2
• Ember Data : 3.2.0
• jQuery : 3.3.1
• Ember Simple Auth : 1.7.0

Video tutorial (the error occurs at the 11:30 mark): https://www.youtube.com/watch?v=bZ1D_aYGJnU. Note: the author of the video seems to have gotten the duplicate POST issue to go away right at the end of the video, but I do not see how.

Component/forms/todo-item-form/component.js

import Component from '@ember/component';

export default Component.extend({
    actions:{
        save(){
            this.get('submit')();
        }
    }
});

Component/forms/todo-item-form/template.hbs

<form {{action "save" on="submit"}}>
{{input placeholder="description" value=todoItem.description}}
  <br />
  {{#if todoItem.validations.isValid}}
    <button type="submit">Add</button>
  {{else}}
    <button type="submit" disabled>Add</button>
  {{/if}}
</form>

templates/s/todo-items/add.hbs

{{forms/todo-item-form
  todoItem=model
  submit=(route-action "submitAction") 
}}
{{outlet}}

models/todo-item.js

import DS from 'ember-data';

import { validator, buildValidations } from 'ember-cp-validations';

const { attr, belongsTo } = DS;
const Validations = buildValidations({
  description: [
    validator('presence', true),
    validator('length', {
      min: 4
    })
  ]
});

export default DS.Model.extend(Validations, {
    description: attr('string'),
    owner: belongsTo('person')
});

adapter/Application.js

import DS from 'ember-data';
import ENV from 'todo-list-client/config/environment';

const {computed, inject :{service} } = Ember;

export default DS.JSONAPIAdapter.extend({
    session: service(),

    namespace: ENV.APP.namespace,
    host: ENV.APP.host,

    headers: computed('session.data.authenticated.token', function() {
        let token = this.get('session.data.authenticated.access_token');
        return { Authorization: `Bearer ${token}` };
      }),
})

routes/s/todo-items/add.js

import Route from '@ember/routing/route';

export default Route.extend({
    model(){
        return this.store.createRecord('todo-item');
    },

    actions: {
        submitAction() {
            this.get('controller.model')
            .save()
            .then(() => {
              this.transitionTo('s.todo-items');
            });
        }
    },
});

Answer 1

The author adds Ember-Data-Route at about 15m5s for the add.js route as a mixin. This cleans up after the model.

He starts the explanation at that point, adds it in over the next minute or two in the video:

https://youtu.be/bZ1D_aYGJnU?t=15m5s

import Ember from 'ember';
import DataRoute from 'ember-data-route';

export default Ember.Route.extend(DataRoute, {
  model() {
    return this.store.createRecord('todo-item');
  },

  actions: {
    save() {
      this.get('controller.model')
        .save()
        .then(() => {
          this.transitionTo('s.todo-items');
        });
    }
  },

});