Render directory items in index

app/controllers/application.js

@@ -9,21 +9,10 @@ export default Controller.extend({
 
   connecting: alias('storage.connecting'),
   connected: alias('storage.connected'),
-
-  categories: null,
+  categories: alias('storage.categories'),
 
   handleConnected: observer('connected', function() {
-    this.fetchCategories();
-  }),
-
-  fetchCategories() {
-    const client = this.get('storage.client');
-
-    client.getListing('').then(listing => {
-      let dirnames = Object.keys(listing);
-      let categories = dirnames.map(i => i.replace('/', '')).sort();
-      this.set('categories', categories);
-    });
-  }
+    this.get('storage').fetchCategories();
+  })
 
 });

app/controllers/index.js

@@ -1,4 +1,5 @@
 import Controller from '@ember/controller';
+import EmberObject from '@ember/object';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 
@@ -7,6 +8,21 @@ export default Controller.extend({
   storage: service(),
 
   connecting: alias('storage.connecting'),
-  connected: alias('storage.connected')
+  connected: alias('storage.connected'),
+  categories: alias('storage.categories'),
+
+  currentListing: function() {
+    if (!this.get('categories')) { return null; }
+    const listing = [];
+
+    this.get('categories').forEach(categoryName => {
+      listing.pushObject(EmberObject.create({
+        name: categoryName,
+        type: 'folder'
+      }));
+    });
+
+    return listing;
+  }.property('categories.[]')
 
 });