Ember Store Issue

i tried to solve these problem but failed , can anyone please help me to out from these issues!! my app -

When i use to click these two button (“Delete” and “Mark as Done”) back to back then these problem are occurred. my errors - When i clicked “Mark as Done” Button

WARNING: The 'id' for a RecordIdentifier should not be updated once it has been set. Attempted to set id for 'tasks:101 (@ember-data:lid-tasks-101)' to 'null'.

Then when i click “Delete” Button- Error: Attempted to handle event loadingData on <tasks:102> while in state root.deleted.inFlight.

When i click another time on “Delete” button or “Mark as Done” button -

Error: Assertion Failed: Attempted to schedule a fetch for a record without an id.

these type of errors occurs again and again . please help me.

app/adapters/tasks.js

import RESTAdapter from '@ember-data/adapter/rest';

export default class TasksAdapter extends RESTAdapter {
  host = 'http://localhost:3000';
}

app/serializers/tasks.js

import JSONSerializer from '@ember-data/serializer/json';

export default class TasksSerializer extends JSONSerializer {}

app/models/tasks.js

import Model, { attr } from '@ember-data/model';
export default class TasksModel extends Model {
  @attr('string') title;
  @attr('string') priyority;
  @attr('date') createdAt;
  @attr('boolean') isCompleted;
  @attr('boolean') isDeleted;
}

app/controllers/index.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
export default class IndexController extends Controller {
  @service store;
  @tracked formState = false;
  @action
  toggleForm() {
    this.formState = !this.formState;
  }
  get totalTasks() {
    return this.model.length;
  }

  deleteTask = async (taskId) => {
    try {
      console.log(taskId);
      // const task = await this.store.peekRecord('tasks', taskId);
      // await task.deleteRecord();
      // task.save();
      const task = await this.store.findRecord('tasks', taskId, {
        reload: true,
      });
      task.destroyRecord();
    } catch (error) {
      console.log(error);
    }
  };

  markAsDone = async (taskId) => {
    try {
      console.log(taskId);
      const task = await this.store.findRecord('tasks', taskId, {
        reload: true,
      });
      task.isCompleted = true;
      task.save();
    } catch (error) {
      console.log(error);
    }
  };

  get totalCompleted() {}

  get totalDeleted() {}
}

app/routes/index.js

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default class IndexRoute extends Route {
  @service store;
  async model() {
    return await this.store.findAll('tasks', { reload: true });
  }
}

app/templates/index.hbs

<Main @formState={{this.formState}} @toggleForm={{this.toggleForm}}>
    <TaskDashboard @totalTasks = {{this.totalTasks}} />
    
</Main>
<div class="container app-max-width">
    <div class="row">
        {{#if (eq this.model.length 0)}}
            <div class="empty-image">
                <img src="assets/images/empty-task.jpg" alt="Empty Tasks. Create One">
            </div>
            <h6 class="text-center">Empty ! Create New One</h6>
        {{else}}
            {{#each @model as |task|}}
                <Task @task-name={{task.title}} @task-tag={{task.priyority}} @created-at={{task.createdAt}} @deleteTask={{this.deleteTask}} @markAsDone={{this.markAsDone}} @taskId={{task.id}} />   
            {{/each}}  
        {{/if}}
    </div>
</div>

Can anyone please help me ?

1 post - 1 participant

Read full topic