Concurrency recipe fetcher, adds to list

app/components/header-nav.hbs

@@ -22,6 +22,9 @@
       <HeaderNavLink @href="https://tailwindcss.com/docs/responsive-design">
         TailwindCSS
       </HeaderNavLink>
+      <HeaderNavLink @href="https://www.themealdb.com/">
+        TheMealDB
+      </HeaderNavLink>
     </div>
     <div>
       <a href="https://gitlab.com/gaiety/sortable-recipes" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 md:mt-0">

app/components/recipe-list.hbs

@@ -1,3 +1,9 @@
+<button
+  {{on "click" this.addRecipe}}
+  class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded">
+  Button
+</button>
+
 <SortableGroup
   @model={{this.items}}
   @onChange={{action this.reorderItems}}
@@ -8,7 +14,7 @@
       as |item|>
       <item.handle>
         <span class="handle">&varr;</span>
-        {{modelItem.name}}
+        {{modelItem.strMeal}}
       </item.handle>
     </group.item>
   {{/each}}

app/components/recipe-list.js

@@ -2,18 +2,25 @@ import Component from '@glimmer/component';
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { A } from '@ember/array';
+import { task } from 'ember-concurrency';
 
 export default class RecipeListComponent extends Component {
-  @tracked items = A([
+  @tracked items = A([]);
-    {
+
-      name: 'foo',
+  @(task(function * () {
-    }, {
+    let response = yield fetch('https://www.themealdb.com/api/json/v1/1/random.php');
-      name: 'bar',
+    response = yield response.json(); 
-    },
+    return response.meals[0];
-  ]);
+  })) fetchRecipe;
 
   @action
   reorderItems(reorderedItems) {
     this.items = reorderedItems;
   }
+
+  @action
+  async addRecipe() {
+    let recipe = await this.fetchRecipe.perform();
+    this.items.pushObject(recipe);
+  }
 }