rafactor create/options-datetime controller to component (#819)

jelhan · Dec 19, 2023 · f25625f · f25625f
1 parent 3f365c2
commit f25625f
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 86 deletions.
diff --git a/app/components/create-options-datetime.ts b/app/components/create-options-datetime.ts
@@ -7,6 +7,7 @@ import { DateTime } from 'luxon';
 import IntlMessage from '../utils/intl-message';
 import type RouterService from '@ember/routing/router-service';
 import type Transition from '@ember/routing/transition';
+import type { CreateOptionsDatetimeRouteModel } from 'croodle/routes/create/options-datetime';
 
 class FormDataTimeOption {
   formData;
@@ -190,18 +191,17 @@ class FormData {
 
 export interface CreateOptoinsDatetimeSignature {
   Args: {
-    dates: TrackedSet<string>;
-    onNextPage: () => void;
-    onPrevPage: () => void;
-    times: Map<string, Set<string>>;
-    updateOptions: (datetimes: Map<string, Set<string>>) => void;
+    poll: CreateOptionsDatetimeRouteModel;
   };
 }
 
 export default class CreateOptionsDatetime extends Component<CreateOptoinsDatetimeSignature> {
   @service declare router: RouterService;
 
-  formData = new FormData({ dates: this.args.dates, times: this.args.times });
+  formData = new FormData({
+    dates: this.args.poll.dateOptions,
+    times: this.args.poll.timesForDateOptions,
+  });
 
   @tracked errorMessage: string | null = null;
 
@@ -218,12 +218,12 @@ export default class CreateOptionsDatetime extends Component<CreateOptoinsDateti
 
   @action
   previousPage() {
-    this.args.onPrevPage();
+    this.router.transitionTo('create.options');
   }
 
   @action
   submit() {
-    this.args.onNextPage();
+    this.router.transitionTo('create.settings');
   }
 
   // validate input field for being partially filled
@@ -248,26 +248,24 @@ export default class CreateOptionsDatetime extends Component<CreateOptoinsDateti
   @action
   handleTransition(transition: Transition) {
     if (transition.from?.name === 'create.options-datetime') {
-      this.args.updateOptions(
-        new Map(
-          // FormData.datetimes Map has a Set of FormDataTime object as values
-          // We need to transform it to a Set of plain time strings
-          Array.from(this.formData.datetimes.entries())
-            .map(([key, timeOptions]): [string, Set<string>] => {
-              return [
-                key,
-                new Set(
-                  Array.from(timeOptions)
-                    .map(({ time }: FormDataTimeOption) => time)
-                    // There might be FormDataTime objects without a time, which
-                    // we need to filter out
-                    .filter((time) => time !== null),
-                ) as Set<string>,
-              ];
-            })
-            // There might be dates without any time, which we need to filter out
-            .filter(([, times]) => times.size > 0),
-        ),
+      this.args.poll.timesForDateOptions = new Map(
+        // FormData.datetimes Map has a Set of FormDataTime object as values
+        // We need to transform it to a Set of plain time strings
+        Array.from(this.formData.datetimes.entries())
+          .map(([key, timeOptions]): [string, Set<string>] => {
+            return [
+              key,
+              new Set(
+                Array.from(timeOptions)
+                  .map(({ time }: FormDataTimeOption) => time)
+                  // There might be FormDataTime objects without a time, which
+                  // we need to filter out
+                  .filter((time) => time !== null),
+              ) as Set<string>,
+            ];
+          })
+          // There might be dates without any time, which we need to filter out
+          .filter(([, times]) => times.size > 0),
       );
       this.router.off('routeWillChange', this.handleTransition);
     }

diff --git a/app/controllers/create/options-datetime.ts b/app/controllers/create/options-datetime.ts
diff --git a/app/templates/create/options-datetime.hbs b/app/templates/create/options-datetime.hbs
@@ -1,7 +1 @@
-<CreateOptionsDatetime
-  @dates={{@model.dateOptions}}
-  @times={{@model.timesForDateOptions}}
-  @onNextPage={{this.nextPage}}
-  @onPrevPage={{this.previousPage}}
-  @updateOptions={{this.updateOptions}}
-/>
+<CreateOptionsDatetime @poll={{@model}} />
diff --git a/tests/integration/components/create-options-datetime-test.js b/tests/integration/components/create-options-datetime-test.js
@@ -20,11 +20,11 @@ module('Integration | Component | create options datetime', function (hooks) {
    */
 
   test('it generates input field for options iso 8601 date string (without time)', async function (assert) {
-    this.set('dates', new Set(['2015-01-01']));
-    this.set('times', new Map());
-    await render(
-      hbs`<CreateOptionsDatetime @dates={{this.dates}} @times={{this.times}} />`,
-    );
+    this.set('poll', {
+      dateOptions: new Set(['2015-01-01']),
+      timesForDateOptions: new Map(),
+    });
+    await render(hbs`<CreateOptionsDatetime @poll={{this.poll}} />`);
 
     assert
       .dom('.days .form-group input')
@@ -35,11 +35,11 @@ module('Integration | Component | create options datetime', function (hooks) {
   });
 
   test('it generates input field for options iso 8601 datetime string (with time)', async function (assert) {
-    this.set('dates', new Set(['2015-01-01']));
-    this.set('times', new Map([['2015-01-01', new Set(['11:11'])]]));
-    await render(
-      hbs`<CreateOptionsDatetime @dates={{this.dates}} @times={{this.times}} />`,
-    );
+    this.set('poll', {
+      dateOptions: new Set(['2015-01-01']),
+      timesForDateOptions: new Map([['2015-01-01', new Set(['11:11'])]]),
+    });
+    await render(hbs`<CreateOptionsDatetime @poll={{this.poll}} />`);
 
     assert
       .dom('.days .form-group input')
@@ -50,11 +50,13 @@ module('Integration | Component | create options datetime', function (hooks) {
   });
 
   test('it hides repeated labels', async function (assert) {
-    this.set('dates', new Set(['2015-01-01', '2015-02-02']));
-    this.set('times', new Map([['2015-01-01', new Set(['11:11', '22:22'])]]));
-    await render(
-      hbs`<CreateOptionsDatetime @dates={{this.dates}} @times={{this.times}} />`,
-    );
+    this.set('poll', {
+      dateOptions: new Set(['2015-01-01', '2015-02-02']),
+      timesForDateOptions: new Map([
+        ['2015-01-01', new Set(['11:11', '22:22'])],
+      ]),
+    });
+    await render(hbs`<CreateOptionsDatetime @poll={{this.poll}} />`);
 
     assert
       .dom('.days label')
@@ -86,11 +88,11 @@ module('Integration | Component | create options datetime', function (hooks) {
   });
 
   test('allows to add another option', async function (assert) {
-    this.set('dates', new Set(['2015-01-01', '2015-02-02']));
-    this.set('times', new Map());
-    await render(
-      hbs`<CreateOptionsDatetime @dates={{this.dates}} @times={{this.times}} />`,
-    );
+    this.set('poll', {
+      dateOptions: new Set(['2015-01-01', '2015-02-02']),
+      timesForDateOptions: new Map(),
+    });
+    await render(hbs`<CreateOptionsDatetime @poll={{this.poll}} />`);
 
     assert
       .dom('.days .form-group input')
@@ -114,11 +116,13 @@ module('Integration | Component | create options datetime', function (hooks) {
   });
 
   test('allows to delete an option', async function (assert) {
-    this.set('dates', new Set(['2015-01-01']));
-    this.set('times', new Map([['2015-01-01', new Set(['11:11', '22:22'])]]));
-    await render(
-      hbs`<CreateOptionsDatetime @dates={{this.dates}} @times={{this.times}} />`,
-    );
+    this.set('poll', {
+      dateOptions: new Set(['2015-01-01']),
+      timesForDateOptions: new Map([
+        ['2015-01-01', new Set(['11:11', '22:22'])],
+      ]),
+    });
+    await render(hbs`<CreateOptionsDatetime @poll={{this.poll}} />`);
 
     assert
       .dom('.days input')