Post new sighting: get 500 error

Frontend Web Development: The Big Nerd Ranch Guide Chapter 24: Controllers
1

You called <tracker@component:x-select::ember236>.sendAction(“action”) but Component#sendAction is deprecated. Please use closure actions instead.

<div class="form-group">
<label for="name">Cryptid</label>
{{#x-select value=model.sighting.cryptid  class="form-control" as |xs|}}
  {{#xs.option}}Select Cryptid{{/xs.option}}
  {{#each model.cryptids as |cryptid|}}
  {{#xs.option value=cryptid}}{{cryptid.name}}{{/xs.option}}
  {{/each}}
{{/x-select}}

how to use closure actions?

try the follow, get same error:

<div class="form-group">
<label for="name">Cryptid</label>
<XSelect @value={{model.sighting.cryptid}} @onClick={{action 'didMakeCryptidSelection' }}  class="form-control" as |xs|>
  <xs.option>Select Cryptid</xs.option>
  {{#each model.cryptids as |cryptid|}}
  <xs.option @value={{cryptid}}>{{cryptid.name}}</xs.option>
  {{/each}}
</XSelect>

@action

didMakeCryptidSelection(value, event) {
  if (!value) {
    this.set('error', 'You must fill out this field');
  } else {
    //this.set('selection', value);
    this.get('model.sighting').set('cryptid', value);
  }
}

@action
    didMakeWitnessSelection(value, event, isXSelectRequired) {
      if (!value & isXSelectRequired) {
        this.set('error', 'You must fill out this field');
      } else {
        //this.set('selection', value);
        this.get('model.sighting').set('witnesses', value);
      }
    }
2

mad it by doing follow step.
in new.hbs:

<div class="form-group">
<label for="name">Cryptid</label>
{{#x-select value=model.sighting.cryptid  on-change=(action "didMakeCryptidSelection") class="form-control" as |xs|}}
  {{#xs.option}}Select Cryptid{{/xs.option}}
  {{#each @model.cryptids as |cryptid|}}
  {{#xs.option value=cryptid}}{{cryptid.name}}{{/xs.option}}
  {{/each}}
{{/x-select}}

<div class="form-group">
<label for="name">Witness</label>
{{#x-select value=model.sighting.witnesses multiple=true on-change=(action "didMakeWitnessSelection") class="form-control" as |xs|}}
  {{#xs.option}}Select Witness{{/xs.option}}
  {{#each model.witnesses as |witness|}}
  {{#xs.option value=witness}}{{witness.email}}{{/xs.option}}
  {{/each}}
{{/x-select}}

in controllers/new.js:
import Controller from ‘@ember/controller’;
import { action } from ‘@ember/object’;

export default class SightingsNewController extends Controller {
@action
create(){
var self = this;
this.get(‘model.sighting’).save().then(function () {
self.transitionToRoute(‘sightings’);
});
}
@action
cancel(){
this.get(‘model.sighting’).deleteRecord();
this.transitionToRoute(‘sightings’);
}

@action

@action
didMakeCryptidSelection(value) {
this.get(‘model.sighting’).set(‘cryptid’, value);
}

@action
didMakeWitnessSelection(value) {
this.get(‘model.sighting’).set(‘witnesses’, value);
}
}

and my ember-cli version is 3.16