Ember component composition

0-entries|index|template.hbs

<PotentialVisitor 
  @approveTask={{perform approveEntryTask}}
  @denyTask={{perform denyEntryTask}}
  @failedApprovalMessage="Error approving entry"
  @failedDenialMessage="Error denying entry"
  @successfulApprovalMessage={{entry.approvalMessage}}
  as |potentialVisitor|
>
  <TrackedPotentialVisitor
    @eventName="Dashboard Entry - Reviewed"
    @eventTrackingId={{entry.id}}
    @eventTrackingProperty="entry_id"
    @eventSource="Visitor"
    @potentialVisitor={{potentialVisitor}}
    as |trackedPotentialVisitor|
  >
    <UiButton @onclick={{perform trackedPotentialVisitor.approve}}>
      Approve
    </UiButton>

    <UiButton @onclick={{perform trackedPotentialVisitor.deny}}>
      Deny
    </UiButton>
  </TrackedPotentialVisitor>
</PotentialVisitor>

1-components|tracked-potential-visitor.js

export default Component.extend({
  metrics: service(),
  
  propTypes: {
    eventName,
    eventTrackingId,
    eventTrackingProperty,
    eventSource,
    potentialVisitor
  },

  approve: task(function* () {
    yield this.potentialVisitor.approve();
    this._track('appprove');
  }),

  deny: task(function* () {
    yield this.potentialVisitor.deny();
    this._track('deny');
  }),
  
  _track(command) {
    this.metrics.trackEvent(this.eventName, {
      command,
      [this.eventTrackingProperty]: this.eventTrackingId,
      source: this.eventSource
    });
  }
});

2-components|potential-visitor.js

export default Component.extend({
  flashMessages: service(),

  propTypes: {
    approveTask: PropTypes.instanceOf(TaskInstance),
    denyTask: PropTypes.instanceOf(TaskInstance),
  },
  
  approve: task(function* () {
    try{
      yield this.approveTask();
      this.flashMessages.showAndHideFlash('success', this.successfulApprovalMessage)
    } catch (error) {
      this.flashMessages.showAndHideFlash(
        'error', 
        this.failedApprovalMessage, 
        parseErrorForDisplay(error)
      );
    }
  }),

  deny: task(function* () {
    try{
      yield this.denyTask();
      this.flashMessages.showAndHideFlash('success', 'Access denied');
    } catch (error) {
      this.flashMessages.showAndHideFlash(
        'error', 
        this.failedDenialMessage, 
        parseErrorForDisplay(error)
      );
    }
  })
});

3-entries|index|controller.js

export default Controller.extend({
  approveEntryTask: task(function* {
    yield this.entry.approveEntry();
    yield get(this.entry, 'flow.badge');
    yield this.entry.reload();
  }),
  
  denyEntryTask: task(function*() {
    yield this.entry.denyEntry();
    yield this.entry.reload();
  })
});

4-invites|index|template.hbs

<PotentialVisitor 
  @approveTask={{perform approveInviteTask}}
  @denyTask={{perform denyInviteTask}}
  @failedApprovalMessage="Error approving invite"
  @failedDenialMessage="Error denying invite"
  @successfulApprovalMessage={{invite.approvalMessage}}
  as |potentialVisitor|
>
  <TrackedPotentialVisitor
    @eventName="Dashboard Invite - Reviewed"
    @eventTrackingId={{invite.id}}
    @eventTrackingProperty="invite_id"
    @eventSource="Invite"
    @potentialVisitor={{potentialVisitor}}
    as |trackedPotentialVisitor|
  >
    <UiButton @onclick={{perform trackedPotentialVisitor.approve}}>
      Approve
    </UiButton>

    <UiButton @onclick={{perform trackedPotentialVisitor.deny}}>
      Deny
    </UiButton>
  </TrackedPotentialVisitor>
</PotentialVisitor>