Observer Pattern

components.dog-api-manager\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';

export default class extends Component {
  @service dogObserver;
  @tracked isLoading;
  @tracked error;
  @tracked randomDog;
  
  async fetchRandomDog() {
    if (this.isLoading) { return; }
    this.isLoading = true;
    try {
      let res = await fetch('https://dog.ceo/api/breeds/image/random');
      let data = await res.json();
      this.randomDog = data.message;
    } catch (error) {
      this.error = error;
    } finally {
      this.isLoading = false;
    }
    this.error = null;
  }
  
  constructor() {
    super(...arguments);
    this.dogObserver.subscribe(this, () => this.fetchRandomDog());
    this.fetchRandomDog();
  }
  
  willDestroy() {
    this.dogObserver.unsubscribe(this);
    super.willDestroy(...arguments);
  }
}

components.dog-controls\.js

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

export default class extends Component {
  @service dogObserver;
  
  @action
  notifyUpdateNeeded() {
    this.dogObserver.notify();
  }
}

helpers.set-body-class\.js

import Helper from '@ember/component/helper';

export default class SetBodyClassHelper extends Helper {
  classNames = [];

  compute(classNames) {
    this.cleanup();
    this.classNames = classNames;
    document.body.classList.add(...this.classNames);
  }
  
  cleanup() {
    document.body.classList.remove(...this.classNames);
  }
  
  willDestroy() {
    this.cleanup();
    super.willDestroy(...arguments);
  }
}

services.dog-observer\.js

import Service from '@ember/service';

export default class DogObserver extends Service {
  subscribers = new WeakMap();
  callbacks = new Set();
  
  subscribe(subscriber, callback) {
    let callbacks = this.subscribers.get(subscriber) ?? new Set();
    callbacks.add(callback);
    this.subscribers.set(subscriber, callbacks);
    this.callbacks.add(callback);
  }
  
  unsubscribe(subscriber) {
    let callbacks = this.subscribers.get(subscriber) ?? new Set();
    callbacks.forEach(c => this.callbacks.remove(c));
    this.subscribers.delete(subscriber);
  }
  
  notify() {
    this.callbacks.forEach(i => i());
  }
}

styles.app\.css

.grid-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}

.constrained-media {
  max-width: 200px;
}

templates.application\.hbs

{{set-body-class "hack"}}

<header>
  <h1>Observer Pattern</h1>
</header>

<main class="container">
  <ControlsSection id="controls" />
  <ResultSection id="result" />
</main>

templates.components.controls-section\.hbs

<section ...attributes>

  <h2>Controls</h2>

  <DogControls />

</section>

templates.components.dog-api-manager\.hbs

{{yield (hash
  isLoading=this.isLoading
  error=this.error
  randomDog=this.randomDog
)}}

templates.components.dog-controls\.hbs

<div class="btn-group" ...attributes>
  <button
    type="button"
    class="btn btn-primary btn-ghost btn-block"
    {{on "click" this.notifyUpdateNeeded}}
  >
    Fetch new random image
  </button>
</div>

templates.components.result-section\.hbs

<section ...attributes>

  <h2>Result</h2>
  
  <div class="grid-flow">
    {{#each (array 1 2 3 4)}}
      <DogApiManager as |dogManager|>
        {{#if dogManager.isLoading}}
          <div class="loading"></div>
        {{else if dogManager.error}}
          <div class="alert alert-error">{{dogManager.error}}</div>
        {{else}}
          <img class="constrained-media" src={{dogManager.randomDog}}>
        {{/if}}
      </DogApiManager>
    {{/each}}
  </div>
  
</section>

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": {
    "hack_css": "https://sukima.github.com/hackcss-ext/hack.css",
    "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"
  }
}