Testing sibling interaction

components.big-button\.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { task, timeout } from 'ember-concurrency';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @service store;
  @tracked timers = [];
  @tracked activityLabel = 'Start';

	constructor() {
  	super(...arguments);
    this.timers = this.args.timers;
	}

  @task({ cancelOn: 'deactivate' })
  *startTimer() {
    yield this.store.createRecord('timer');
    this.activityLabel = 'stop timer, start another';
    yield this.args.showUndoButton(true);
  }

	@task({ cancelOn: 'deactivate' })
  *resetLabel() {
    yield timeout(100);
    this.activityLabel = 'Start';
  }
}

components.my-timer\.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { task, timeout } from 'ember-concurrency';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @service store;
	@tracked timers = [];
	@tracked resetButton = false;
	@tracked showUndo = false;

	constructor() {
  	super(...arguments);
    this.loadTimers.perform();
	}

  @task({ cancelOn: 'deactivate' })
  *loadTimers() {
    // pretend this is a store query
		this.timers = yield this.store.peekAll('timer');
  }

	get activeTimers() {
    if (!this.timers) return [];
    return this.timers.filterBy('isActive', true);
  }

	@task({ cancelOn: 'deactivate' })
  *resetTheButton() {
    // reset the big button label
    this.resetButton = !this.resetButton;
  }

	@task({ cancelOn: 'deactivate' })
  *toggleUndo(input) {
    if (input) console.log(`received ${input}`);
		
    // toggle showing the undo button
    this.showUndo = input;
  }
}

components.undo-button\.js

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class extends Component {
  @action
	undoTimer() {
    this.args.timers.forEach((timer) => {
      timer.destroyRecord();
    });
    this.args.showUndoButton(false);
    this.args.resetButton();
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

models.request\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export default class extends Model {
  @attr('string') name
  @attr('string') id
  @hasMany('timer') timers;
}

models.timer\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export default class extends Model {
	@attr('boolean', { defaultValue: true }) isActive;
	@attr('boolean', { defaultValue: true }) isSoftDeleted;
  @attr('string') activity;
  @attr('date') startTime;
  @attr('date') endTime;
  @belongsTo('request') request;
}

templates.application\.hbs

This should:<br>
1. show a dynamic label button on top<br>
2. show a undo button underneath it that appears when the top button is clicked<br>
3. clicking undo should remove the timers<br>
4. show a running count of timers<br>

<MyTimer />

templates.components.big-button\.hbs

<h1>active timers: {{@timers.length}}</h1>

{{did-update (perform this.resetLabel) @reset}}
<div class="text-center">
	<button type="button"
      {{on "click" (perform this.startTimer)}}
    >
      <p>
	{{this.activityLabel}}
      </p>
    </button>
</div>

templates.components.my-timer\.hbs

<div>
	<BigButton 
  	@timers={{this.activeTimers}} 
    @reset={{this.resetButton}} 
    @showUndoButton={{perform this.toggleUndo}}
    />
</div>

<div>
	{{#if this.showUndo}}
		<UndoButton 
    	@timers={{this.activeTimers}} 
      @resetButton={{perform this.resetTheButton}}
      @showUndoButton={{perform this.toggleUndo}}
      />
  {{/if}}
</div>

templates.components.undo-button\.hbs

<button
	type="button"
  {{on "click" this.undoTimer}}
>
	<p>Undo</p>
</button>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-concurrency": "2.0.3",
    "ember-data": "3.18.0",
    "ember-render-helpers": "0.1.1"
  }
}