refactor create/meta controller to component (#814)

app/components/create-index.ts

@@ -5,14 +5,14 @@ import { registerDestructor } from '@ember/destroyable';
 import type RouterService from '@ember/routing/router-service';
 import type { CreateIndexRouteModel } from '../routes/create/index';
 
-export interface CreateOptionsIndexSignature {
+export interface CreateIndexSignature {
   Args: {
     formData: CreateIndexRouteModel['formData'];
     poll: CreateIndexRouteModel['poll'];
   };
 }
 
-export default class CreateIndexComponent extends Component<CreateOptionsIndexSignature> {
+export default class CreateIndexComponent extends Component<CreateIndexSignature> {
   @service declare router: RouterService;
 
   @action
@@ -20,7 +20,7 @@ export default class CreateIndexComponent extends Component<CreateOptionsIndexSi
     this.router.transitionTo('create.meta');
   }
 
-  constructor(owner: unknown, args: CreateOptionsIndexSignature['Args']) {
+  constructor(owner: unknown, args: CreateIndexSignature['Args']) {
     super(owner, args);
 
     registerDestructor(this, () => {

app/components/create-meta.hbs

@@ -0,0 +1,45 @@
+<div class="cr-form-wrapper box">
+  <BsForm
+    @formLayout="horizontal"
+    @model={{@formData}}
+    @onInvalid={{(scroll-first-invalid-element-into-view-port)}}
+    @onSubmit={{this.submit}}
+    novalidate
+    as |form|
+  >
+    <form.element
+      @controlType="text"
+      @label={{t "create.meta.input.title.label"}}
+      @property="title"
+      class="title"
+      data-test-form-element="title"
+      as |el|
+    >
+      <el.control
+        placeholder={{t "create.meta.input.title.placeholder"}}
+        {{autofocus}}
+      />
+    </form.element>
+    <form.element
+      @controlType="textarea"
+      @label={{t "create.meta.input.description.label"}}
+      @property="description"
+      class="description"
+      data-test-form-element="description"
+      as |el|
+    >
+      <el.control
+        placeholder={{t "create.meta.input.description.placeholder"}}
+      />
+    </form.element>
+
+    <div class="row cr-steps-bottom-nav">
+      <div class="col-6 col-md-8 order-12">
+        <NextButton />
+      </div>
+      <div class="col-6 col-md-4 order-1 text-right">
+        <BackButton @onClick={{this.previousPage}} />
+      </div>
+    </div>
+  </BsForm>
+</div>

app/components/create-meta.ts

@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { registerDestructor } from '@ember/destroyable';
+import type RouterService from '@ember/routing/router-service';
+import type { CreateMetaRouteModel } from '../routes/create/meta';
+
+export interface CreateMetaSignature {
+  Args: {
+    formData: CreateMetaRouteModel['formData'];
+    poll: CreateMetaRouteModel['poll'];
+  };
+}
+
+export default class CreateMetaComponent extends Component<CreateMetaSignature> {
+  @service declare router: RouterService;
+
+  @action
+  previousPage() {
+    this.router.transitionTo('create.index');
+  }
+
+  @action
+  submit() {
+    this.router.transitionTo('create.options');
+  }
+
+  constructor(owner: unknown, args: CreateMetaSignature['Args']) {
+    super(owner, args);
+
+    registerDestructor(this, () => {
+      const { poll, formData } = this.args;
+
+      poll.title = formData.title;
+      poll.description = formData.description;
+    });
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    CreateMeta: typeof CreateMetaComponent;
+  }
+}

app/controllers/create/meta.ts

@@ -1,39 +0,0 @@
-import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
-import Controller from '@ember/controller';
-import type RouterService from '@ember/routing/router-service';
-import type Transition from '@ember/routing/transition';
-import type { CreateMetaRouteModel } from 'croodle/routes/create/meta';
-
-export default class CreateMetaController extends Controller {
-  @service declare router: RouterService;
-
-  declare model: CreateMetaRouteModel;
-
-  @action
-  previousPage() {
-    this.router.transitionTo('create.index');
-  }
-
-  @action
-  submit() {
-    this.router.transitionTo('create.options');
-  }
-
-  @action
-  handleTransition(transition: Transition) {
-    if (transition.from?.name === 'create.meta') {
-      const { poll, formData } = this.model;
-
-      poll.title = formData.title;
-      poll.description = formData.description;
-    }
-  }
-
-  constructor() {
-    // eslint-disable-next-line prefer-rest-params
-    super(...arguments);
-
-    this.router.on('routeWillChange', this.handleTransition);
-  }
-}

app/templates/create/meta.hbs

@@ -1,45 +1 @@
-<div class="cr-form-wrapper box">
-  <BsForm
-    @formLayout="horizontal"
-    @model={{@model.formData}}
-    @onInvalid={{(scroll-first-invalid-element-into-view-port)}}
-    @onSubmit={{this.submit}}
-    novalidate
-    as |form|
-  >
-    <form.element
-      @controlType="text"
-      @label={{t "create.meta.input.title.label"}}
-      @property="title"
-      class="title"
-      data-test-form-element="title"
-      as |el|
-    >
-      <el.control
-        placeholder={{t "create.meta.input.title.placeholder"}}
-        {{autofocus}}
-      />
-    </form.element>
-    <form.element
-      @controlType="textarea"
-      @label={{t "create.meta.input.description.label"}}
-      @property="description"
-      class="description"
-      data-test-form-element="description"
-      as |el|
-    >
-      <el.control
-        placeholder={{t "create.meta.input.description.placeholder"}}
-      />
-    </form.element>
-
-    <div class="row cr-steps-bottom-nav">
-      <div class="col-6 col-md-8 order-12">
-        <NextButton />
-      </div>
-      <div class="col-6 col-md-4 order-1 text-right">
-        <BackButton @onClick={{this.previousPage}} />
-      </div>
-    </div>
-  </BsForm>
-</div>
+<CreateMeta @formData={{@model.formData}} @poll={{@model.poll}} />