refactor from controller injection to service (#1051)

Author: jelhan

app/controllers/poll.ts

@@ -1,24 +1,26 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
-import { isPresent, isEmpty } from '@ember/utils';
+import { isEmpty } from '@ember/utils';
 import { action } from '@ember/object';
 import { DateTime } from 'luxon';
-import { tracked } from '@glimmer/tracking';
 import type IntlService from 'ember-intl/services/intl';
 import type RouterService from '@ember/routing/router-service';
 import type { PollRouteModel } from 'croodle/routes/poll';
+import type PollSettingsService from 'croodle/services/poll-settings';
 
 export default class PollController extends Controller {
   @service declare intl: IntlService;
+  @service('poll-settings') declare pollSettingsService: PollSettingsService;
   @service declare router: RouterService;
 
   declare model: PollRouteModel;
 
   queryParams = ['encryptionKey'];
   encryptionKey = '';
 
-  @tracked timezoneChoosen = false;
-  @tracked shouldUseLocalTimezone = false;
+  get pollSettings() {
+    return this.pollSettingsService.getSettings(this.model);
+  }
 
   get showExpirationWarning() {
     const { model: poll } = this;
@@ -32,37 +34,13 @@ export default class PollController extends Controller {
     );
   }
 
-  /*
-   * return true if current timezone differs from timezone poll got created with
-   */
-  get timezoneDiffers() {
-    const { model: poll } = this;
-    const { timezone: pollTimezone } = poll;
-
-    return (
-      isPresent(pollTimezone) &&
-      Intl.DateTimeFormat().resolvedOptions().timeZone !== pollTimezone
-    );
-  }
-
-  get mustChooseTimezone() {
-    return this.timezoneDiffers && !this.timezoneChoosen;
-  }
-
-  get timezone() {
-    const { model: poll, shouldUseLocalTimezone } = this;
-
-    return shouldUseLocalTimezone || !poll.timezone ? undefined : poll.timezone;
-  }
-
   @action
   useLocalTimezone() {
-    this.shouldUseLocalTimezone = true;
-    this.timezoneChoosen = true;
+    this.pollSettings.shouldUseLocalTimeZone = true;
   }
 
   @action
   usePollTimezone() {
-    this.timezoneChoosen = true;
+    this.pollSettings.shouldUseLocalTimeZone = false;
   }
 }

app/controllers/poll/evaluation.ts

@@ -1,13 +1,12 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import type IntlService from 'ember-intl/services/intl';
-import type PollController from '../poll';
 import type { PollEvaluationRouteModel } from 'croodle/routes/poll/evaluation';
+import type PollSettingsService from 'croodle/services/poll-settings';
 
 export default class PollEvaluationController extends Controller {
   @service declare intl: IntlService;
-
-  @controller('poll') declare pollController: PollController;
+  @service('poll-settings') declare pollSettingsService: PollSettingsService;
 
   declare model: PollEvaluationRouteModel;
 
@@ -18,4 +17,8 @@ export default class PollEvaluationController extends Controller {
 
     return hasUsers && !isFreeText;
   }
+
+  get pollSettings() {
+    return this.pollSettingsService.getSettings(this.model);
+  }
 }

app/controllers/poll/participation.ts

@@ -1,19 +1,18 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import User from '../../models/user';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import type RouterService from '@ember/routing/router-service';
-import type PollController from '../poll';
 import type { PollParticipationRouteModel } from 'croodle/routes/poll/participation';
 import type Poll from 'croodle/models/poll';
 import type { SelectionInput } from 'croodle/models/selection';
+import type PollSettingsService from 'croodle/services/poll-settings';
 
 export default class PollParticipationController extends Controller {
+  @service('poll-settings') declare pollSettingsService: PollSettingsService;
   @service declare router: RouterService;
 
-  @controller('poll') declare pollController: PollController;
-
   declare model: PollParticipationRouteModel;
 
   @tracked name = '';
@@ -25,6 +24,10 @@ export default class PollParticipationController extends Controller {
     selections: SelectionInput[];
   } | null = null;
 
+  get pollSettings() {
+    return this.pollSettingsService.getSettings(this.model.poll);
+  }
+
   @action
   async submit() {
     const { formData, poll } = this.model;

app/services/poll-settings.ts

@@ -0,0 +1,71 @@
+import { tracked } from '@glimmer/tracking';
+import Service from '@ember/service';
+import type Poll from 'croodle/models/poll';
+
+class PollSettings {
+  #poll: Poll;
+
+  // time zone the user has chosen for displaying the poll in
+  @tracked
+  shouldUseLocalTimeZone: boolean | null = null;
+
+  get mustChooseTimeZone(): boolean {
+    return (
+      this.#usersTimeZoneAndPollsTimeZoneDiffers &&
+      this.shouldUseLocalTimeZone === null
+    );
+  }
+
+  // time zone the poll should be shown in
+  // undefined if user's time zone should be used
+  get timeZone(): string | undefined {
+    const { shouldUseLocalTimeZone } = this;
+    const poll = this.#poll;
+
+    if (shouldUseLocalTimeZone || !poll.timezone) {
+      return undefined;
+    }
+
+    return poll.timezone;
+  }
+
+  get #usersTimeZoneAndPollsTimeZoneDiffers(): boolean {
+    const { timezone: pollTimeZone } = this.#poll;
+
+    return (
+      !!pollTimeZone &&
+      Intl.DateTimeFormat().resolvedOptions().timeZone !== pollTimeZone
+    );
+  }
+
+  constructor(poll: Poll) {
+    this.#poll = poll;
+  }
+}
+
+export default class PollSettingsService extends Service {
+  #settings = new WeakMap<Poll, PollSettings>();
+
+  getSettings(poll: Poll): PollSettings {
+    let settings = this.#settings.get(poll);
+
+    // initialize settings if needed
+    if (!settings) {
+      settings = new PollSettings(poll);
+
+      this.#settings.set(poll, settings);
+    }
+
+    return settings;
+  }
+}
+
+// Don't remove this declaration: this is what enables TypeScript to resolve
+// this service using `Owner.lookup('service:poll-settings')`, as well
+// as to check when you pass the service name as an argument to the decorator,
+// like `@service('poll-settings') declare altName: PollSettingsService;`.
+declare module '@ember/service' {
+  interface Registry {
+    'poll-settings': PollSettingsService;
+  }
+}

app/templates/poll.hbs

@@ -83,7 +83,7 @@
 
 <BsModal
   @title={{t "poll.modal.timezoneDiffers.title"}}
-  @open={{this.mustChooseTimezone}}
+  @open={{this.pollSettings.mustChooseTimeZone}}
   @footer={{false}}
   @closeButton={{false}}
   @keyboard={{false}}

app/templates/poll/evaluation.hbs

@@ -2,13 +2,13 @@
   {{#if this.isEvaluable}}
     <PollEvaluationSummary
       @poll={{poll}}
-      @timeZone={{this.pollController.timezone}}
+      @timeZone={{this.pollSettings.timeZone}}
     />
   {{/if}}
 
   <h3>{{t "poll.evaluation.participantTable"}}</h3>
   <PollEvaluationParticipantsTable
     @poll={{poll}}
-    @timeZone={{this.pollController.timezone}}
+    @timeZone={{this.pollSettings.timeZone}}
   />
 {{/let}}

app/templates/poll/participation.hbs

@@ -42,7 +42,7 @@
               @label={{if @model.poll.isFindADate (format-date option.jsDate
                   dateStyle=(if shouldShowDate "full" undefined)
                   timeStyle=(if option.hasTime "short" undefined)
-                  timeZone=this.pollController.timezone
+                  timeZone=this.pollSettings.timeZone
                 )
                 option.title
               }}
@@ -61,7 +61,7 @@
               @label={{if @model.poll.isFindADate (format-date option.jsDate
                   dateStyle=(if shouldShowDate "full" undefined)
                   timeStyle=(if option.hasTime "short" undefined)
-                  timeZone=this.pollController.timezone
+                  timeZone=this.pollSettings.timeZone
                 )
                 option.title
               }}

tests/unit/services/poll-settings-test.ts

@@ -0,0 +1,127 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'croodle/tests/helpers';
+import Poll from 'croodle/models/poll';
+
+function generateMockPoll(overwrites?: Partial<Poll>): Poll {
+  return new Poll({
+    anonymousUser: false,
+    answerType: 'YesNo',
+    creationDate: '2024-12-31T00:00:00Z',
+    description: 'dummy data',
+    expirationDate: '2025-05-01T00:00:00Z',
+    forceAnswer: true,
+    id: 'abc',
+    options: [{ title: 'foo' }],
+    pollType: 'FindADate',
+    timezone: null,
+    title: 'Dummy',
+    users: [],
+    version: '1',
+    ...overwrites,
+  });
+}
+
+module('Unit | Service | poll-settings', function (hooks) {
+  setupTest(hooks);
+
+  module('PollsettingsService', function () {
+    module('getSettings', function () {
+      test('returns same settings for the same poll', function (assert) {
+        const service = this.owner.lookup('service:poll-settings');
+        const poll = generateMockPoll();
+
+        assert.strictEqual(
+          service.getSettings(poll),
+          service.getSettings(poll),
+        );
+      });
+
+      test('returns different settings for different poll', function (assert) {
+        const service = this.owner.lookup('service:poll-settings');
+        const pollA = generateMockPoll();
+        const pollB = generateMockPoll();
+
+        assert.notStrictEqual(
+          service.getSettings(pollA),
+          service.getSettings(pollB),
+        );
+      });
+    });
+  });
+
+  module('PollSettings', function () {
+    module('mustChooseTimeZone', function () {
+      test('false if poll time zone is not set', function (assert) {
+        const service = this.owner.lookup('service:poll-settings');
+        const poll = generateMockPoll();
+        const settings = service.getSettings(poll);
+
+        assert.false(settings.mustChooseTimeZone);
+      });
+
+      test("false if poll's time zone equals user's time zone", function (assert) {
+        const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+        const service = this.owner.lookup('service:poll-settings');
+        const poll = generateMockPoll({ timezone });
+        const settings = service.getSettings(poll);
+
+        assert.false(settings.mustChooseTimeZone);
+      });
+
+      test("true if poll's time zone differs user's time zone", function (assert) {
+        const timezone =
+          Intl.DateTimeFormat().resolvedOptions().timeZone === 'America/Caracas'
+            ? 'Europe/Berlin'
+            : 'America/Caracas';
+
+        const service = this.owner.lookup('service:poll-settings');
+        const poll = generateMockPoll({ timezone });
+        const settings = service.getSettings(poll);
+
+        assert.true(settings.mustChooseTimeZone);
+      });
+    });
+
+    module('shouldUseLocalTimeZone', function () {
+      test('defaults to null', function (assert) {
+        const service = this.owner.lookup('service:poll-settings');
+        const poll = generateMockPoll();
+        const settings = service.getSettings(poll);
+
+        assert.strictEqual(settings.shouldUseLocalTimeZone, null);
+      });
+    });
+
+    module('timeZone', function () {
+      test('is undefined if local time zone should be used', function (assert) {
+        const service = this.owner.lookup('service:poll-settings');
+        const poll = generateMockPoll();
+        const settings = service.getSettings(poll);
+        settings.shouldUseLocalTimeZone = true;
+
+        assert.strictEqual(settings.timeZone, undefined);
+      });
+
+      test("is undefined if poll's time zone is null", function (assert) {
+        const service = this.owner.lookup('service:poll-settings');
+        const poll = generateMockPoll({ timezone: null });
+        const settings = service.getSettings(poll);
+
+        assert.strictEqual(settings.timeZone, undefined);
+
+        settings.shouldUseLocalTimeZone = false;
+        assert.strictEqual(settings.timeZone, undefined);
+      });
+
+      test("is poll's time zone if shouldn't use local time zone", function (assert) {
+        const service = this.owner.lookup('service:poll-settings');
+        const poll = generateMockPoll({ timezone: 'Europe/Berlin' });
+        const settings = service.getSettings(poll);
+        settings.shouldUseLocalTimeZone = false;
+
+        assert.strictEqual(settings.timeZone, 'Europe/Berlin');
+      });
+    });
+  });
+});