Refactor categories into rootListing

This uses proper paths with slashes everywhere, and lists documents
instead of just folders for root.

app/components/breadcrumb-nav.js

@@ -0,0 +1,4 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+});

app/components/categories-nav/template.hbs

@@ -2,7 +2,7 @@
   <nav>
     <ul>
       {{#each categories as |category|}}
-      <li>{{#link-to "index" (query-params path=category)}}{{category}}{{/link-to}}</li>
+      <li>{{#link-to "index" (query-params path=category.path)}}{{category.name}}{{/link-to}}</li>
       {{/each}}
     </ul>
   </nav>

app/controllers/application.js

@@ -1,7 +1,9 @@
 import Controller from '@ember/controller';
+import EmberObject from '@ember/object';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 import { observer } from '@ember/object';
+import { isEmpty } from '@ember/utils';
 
 export default Controller.extend({
 
@@ -9,10 +11,30 @@ export default Controller.extend({
 
   connecting: alias('storage.connecting'),
   connected: alias('storage.connected'),
-  categories: alias('storage.categories'),
+  rootListing: alias('storage.rootListing'),
 
   handleConnected: observer('connected', function() {
-    this.get('storage').fetchCategories();
-  })
+    this.get('storage').fetchRootListing();
+  }),
+
+  categories: function() {
+    let categories = [];
+    let rootListing = this.get('rootListing');
+    if (isEmpty(rootListing)) { return categories; }
+
+    rootListing.forEach(item => {
+      if (!item.isFolder) { return; }
+
+      categories.push(EmberObject.create({
+        name: item.name.replace('/', ''),
+        type: item.type,
+        path: item.name
+      }));
+    });
+
+    return categories;
+  }.property('rootListing')
+
+
 
 });

app/controllers/index.js

@@ -1,5 +1,4 @@
 import Controller from '@ember/controller';
-import EmberObject from '@ember/object';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 import { isPresent } from '@ember/utils';
@@ -10,7 +9,7 @@ export default Controller.extend({
 
   connecting: alias('storage.connecting'),
   connected: alias('storage.connected'),
-  categories: alias('storage.categories'),
+  rootListing: alias('storage.rootListing'),
 
   queryParams: ['path'],
 
@@ -18,18 +17,7 @@ export default Controller.extend({
     if (isPresent(this.get('model'))) {
       return this.get('model').sortBy('name');
     }
-
-    if (!this.get('categories')) { return null; }
-    const listing = [];
-
-    this.get('categories').forEach(categoryName => {
-      listing.push(EmberObject.create({
-        name: categoryName,
-        type: 'folder'
-      }));
-    });
-
-    return listing;
-  }.property('categories.[]', 'model.[]')
+    return this.get('rootListing');
+  }.property('rootListing.[]', 'model.[]')
 
 });

app/routes/index.js

@@ -26,7 +26,7 @@ export default Route.extend({
     this._super(controller, model);
 
     if (isEmpty(this.get('storage.categories')) && this.get('storage.connected')) {
-      this.get('storage').fetchCategories();
+      this.get('storage').fetchRootListing();
     }
   }
 

app/services/storage.js

@@ -11,7 +11,7 @@ export default Service.extend({
   connecting: true,
   connected: false,
   client: null,
-  categories: null,
+  rootListing: null,
 
   setup: function() {
     const rs = new RemoteStorage({
@@ -72,16 +72,9 @@ export default Service.extend({
     this.set('client', rs.scope('/'));
   }.on('init'),
 
-  fetchCategories() {
-    const client = this.get('client');
-
-    client.getListing('').then(listing => {
-      let dirnames = Object.keys(listing);
-      let categories = dirnames.reject(i => i.substr(-1) !== '/')
-                               .map(i => i.replace('/', ''))
-                               .sort();
-
-      this.set('categories', categories);
+  fetchRootListing() {
+    this.fetchListing('').then(items => {
+      this.set('rootListing', items.sortBy('name'));
     });
   },
 

app/templates/components/breadcrumb-nav.hbs

@@ -0,0 +1 @@
+{{yield}}

tests/integration/components/breadcrumb-nav-test.js

@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('breadcrumb-nav', 'Integration | Component | breadcrumb nav', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{breadcrumb-nav}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#breadcrumb-nav}}
+      template block text
+    {{/breadcrumb-nav}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/components/categories-nav/component-test.js

@@ -6,7 +6,10 @@ moduleForComponent('categories-nav', 'Integration | Component | categories nav',
 });
 
 test('it renders categories', function(assert) {
-  this.set('categories', [ 'documents', 'notes' ]);
+  this.set('categories', [
+    { name: 'documents', path: 'documents/' },
+    { name: 'notes', path: 'notes/' }
+  ]);
 
   this.render(hbs`{{categories-nav categories=categories}}`);