Displays groups dynamically

Author: jyolewis

app/routes/index.js

@@ -2,10 +2,6 @@ import Ember from 'ember';
 
 export default Ember.Route.extend({
   model: function() {
-    return this.store.query('group', {
-     'filter[id]': 1
-   }).then((groups) => {
-     return groups.objectAt(0);
-   });
+    return this.get('store').findAll("group");
   }
 });

app/styles/pages/index.scss

@@ -40,6 +40,12 @@
     .group {
       text-align: center;
       margin-top: $padding-l;
+      margin-bottom: $padding-xl;
+
+      .profile-picture {
+        width: 200px;
+        height: 200px;
+      }
 
       .description {
         margin-top: $padding-m;

app/templates/index.hbs

@@ -21,37 +21,35 @@
       <div class="offset-md-1 col-md-10 offset-lg-2 col-lg-8">
         Want to know more about our church? Check out some of the groups within
         our church that may interest you.
-        {{#each g in model.group}}
-          <p>HELLO={{group.slug}}</p>
-        {{/each}}
       </div>
     </div>
     <div class="row">
-      <div class="offset-md-2 col-md-4 group">
-        {{#link-to "group.index" "childrens-church"}}
-          <img src={{cloudinary-fetch url="https://mcac.s3.amazonaws.com/groups/fabe359d-8611-4112-b675-842cd40ef57e.jpg"
-                                      width=200
-                                      radius="max"
-                                      height=200 crop="fill"}} />
+      {{#each model as |group|}}
+      <div class="col-md-4 group">
+        {{#link-to "group.index" group.slug}}
+          <img class="profile-picture"
+            src={{cloudinary-fetch url=group.profilePictureUrl
+                                   width=200
+                                   radius="max"
+                                   height=200
+                                   crop="fill"}} />
         {{/link-to}}
         <div class="description">
-          {{#link-to "group.index" "childrens-church"}}
-            Children's Church
+          {{#link-to "group.index" group.slug}}
+            {{group.name}}
           {{/link-to}}
         </div>
       </div>
-      <div class="col-md-4 group" {{action "viewGroup" "english-service"}}>
-        {{#link-to "group.index" "english-service"}}
-          <img src={{cloudinary-fetch url="https://mcac.s3.amazonaws.com/groups/5c7d76a8-d195-4907-951d-5b3fb00c438d.jpg"
-                                      width=200
-                                      radius="max"
-                                      height=200 crop="fill"}} />
-
-        {{/link-to}}
+      {{/each}}
+      <div class="col-md-4 group">
+        <img class="profile-picture"
+          src={{cloudinary-fetch url="https://mcac.s3.amazonaws.com/bulletins/3017d548-1461-4520-8153-3ed1d910e11a.jpg"
+                                 width=200
+                                 radius="max"
+                                 height=200
+                                 crop="fill"}} />
         <div class="description">
-          {{#link-to "group.index" "english-service"}}
-            English Service
-          {{/link-to}}
+          Coming Soon...
         </div>
       </div>
     </div>

mirage/scenarios/default.js

@@ -22,6 +22,7 @@ export default function(server) {
   }
 
   server.createList("post", 40, { group: englishService });
+  server.createList("group", 1);
 
   server.create("user", { email: "[email protected]", name: "Test User" });
 }