From e92f698d4a1e02f1dbbd219078483a48fc926ddb Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Tue, 13 Sep 2022 17:27:17 +0300
Subject: [PATCH] Add success-toast

---
 app/components/success-toast.hbs              | 19 ++++++++++++++
 app/components/success-toast.js               |  3 +++
 app/components/toast.hbs                      | 22 ++--------------
 app/components/toast.js                       |  2 +-
 app/services/toasts.js                        |  6 ++---
 .../components/success-toast-test.js          | 26 +++++++++++++++++++
 6 files changed, 54 insertions(+), 24 deletions(-)
 create mode 100644 app/components/success-toast.hbs
 create mode 100644 app/components/success-toast.js
 create mode 100644 tests/integration/components/success-toast-test.js

diff --git a/app/components/success-toast.hbs b/app/components/success-toast.hbs
new file mode 100644
index 0000000..333cd87
--- /dev/null
+++ b/app/components/success-toast.hbs
@@ -0,0 +1,19 @@
+<Toast>
+  <div class='inline-flex flex-shrink-0 justify-center items-center self-start'>
+    <Icons::Loading @spin={{true}} class='mr-4' />
+  </div>
+
+  <div>
+    {{@text}}
+  </div>
+
+  <button
+    type='button'
+    class='ml-auto self-start'
+    {{! data-dismiss-target='#toast-default' }}
+    aria-label='Close'
+    {{on 'click' @onClose}}
+  >
+    <Icons::Close />
+  </button>
+</Toast>
diff --git a/app/components/success-toast.js b/app/components/success-toast.js
new file mode 100644
index 0000000..13720d8
--- /dev/null
+++ b/app/components/success-toast.js
@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class SuccessToastComponent extends Component {}
diff --git a/app/components/toast.hbs b/app/components/toast.hbs
index c54621e..b30487e 100644
--- a/app/components/toast.hbs
+++ b/app/components/toast.hbs
@@ -2,26 +2,8 @@
   <div
     class='flex items-center p-4 w-full max-w-xs border rounded shadow-sm'
     role='alert'
-    {{did-insert this.registerInPlate}}
+    {{did-insert this.registerInQueue}}
   >
-    <div
-      class='inline-flex flex-shrink-0 justify-center items-center self-start'
-    >
-      <Icons::Loading @spin={{true}} class='mr-4' />
-    </div>
-
-    <div>
-      {{@text}}
-    </div>
-
-    <button
-      type='button'
-      class='ml-auto self-start'
-      {{! data-dismiss-target='#toast-default' }}
-      aria-label='Close'
-      {{on 'click' this.triggerOnClose}}
-    >
-      <Icons::Close />
-    </button>
+    {{yield (hash triggerOnClose=this.triggerOnClose)}}
   </div>
 {{/in-element}}
diff --git a/app/components/toast.js b/app/components/toast.js
index d6c10ba..4005348 100644
--- a/app/components/toast.js
+++ b/app/components/toast.js
@@ -12,7 +12,7 @@ export default class ToastComponent extends Component {
   }
 
   @action
-  registerInPlate() {
+  registerInQueue() {
     this.toasts.add(this);
 
     registerDestructor(this, () => {
diff --git a/app/services/toasts.js b/app/services/toasts.js
index 02ddae5..73ffdde 100644
--- a/app/services/toasts.js
+++ b/app/services/toasts.js
@@ -1,12 +1,12 @@
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import Toast from '../components/toast';
+import SuccessToast from '../components/success-toast';
 import { hbs } from 'ember-template-imports';
 import { fn } from '@ember/helper';
 
 export default class ToastsService extends Service {
   @tracked container = [];
-  @tracked plate = [];
+  @tracked queue = [];
 
   constructor() {
     super();
@@ -21,7 +21,7 @@ export default class ToastsService extends Service {
       this.container = this.container.filter((item) => item !== wrapper);
     };
 
-    const wrapper = hbs`<Toast @text={{text}} @onClose={{onClose}} />`;
+    const wrapper = hbs`<SuccessToast @text={{text}} @onClose={{onClose}} />`;
 
     this.container = this.container.concat([wrapper]);
   }
diff --git a/tests/integration/components/success-toast-test.js b/tests/integration/components/success-toast-test.js
new file mode 100644
index 0000000..6c99445
--- /dev/null
+++ b/tests/integration/components/success-toast-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'meiliadmin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | success-toast', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<SuccessToast />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <SuccessToast>
+        template block text
+      </SuccessToast>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});