pretty good nativation

app/components/node.hbs

@@ -2,7 +2,8 @@
   <div class="icon {{@node.type}}"></div>
   <div class="details">
     <h3>
-      <LinkTo @route="{{@node.type}}" @model={{@node}}>
+      {{! When the user clicks on the link, Ember will run the Route's model hook with params.<model>_id. On the other hand, IF A MODEL OBJECT WAS PASSED INSTEAD OF THE ID, THE MODEL HOOK WILL NOT RUN. This is the reason I pass @node.id ;) }}
+      <LinkTo @route="{{@node.type}}" @model={{@node.id}}>
           {{@node.title}}
       </LinkTo>
     </h3>

app/components/nodes.hbs

-<label>
-  <span>Search</span>
-  <Input @value={{this.query}} class="light" />
-</label>
-
-
 <div class="nodes">
-  <ul class="results grid">
+  <ul class="results">
       {{#each @nodes as |node|}}
-        <li class="item"><Node @node={{node}} /></li>
+        <li class="item">
+          <Node @node={{node}} />
+        </li>
       {{/each}}
   </ul>
 </div>
\ No newline at end of file

app/routes/folder.js

@@ -2,6 +2,7 @@ import Route from '@ember/routing/route';
 
 export default class FolderRoute extends Route {
   async model(params) {
+    console.log(params);
     let response = await fetch(`/api/folder/${params.folder_id}.json`);
     let { data } = await response.json();
 

app/routes/index.js

@@ -2,6 +2,7 @@ import Route from '@ember/routing/route';
 
 export default class IndexRoute extends Route {
   async model() {
+    console.log(`Index route`);
     let response = await fetch('/api/folder.json');
     let { data } = await response.json();
 

app/templates/folder.hbs

-<h1>Index </h1>
+Folder
 <Nodes @nodes={{@model}} />

app/templates/index.hbs

-<h1>Index </h1>
+index
 <Nodes @nodes={{@model}} />