update children on newly created records!

app/adapters/application.js

@@ -16,22 +16,6 @@ export default class ApplicationAdapter extends JSONAPIAdapter {
     }
     return `${ret}/`;
   }
-  /*
-  pathForType(modelName) {
-    let ret = super.pathForType(modelName);
-
-    // `nodes` is polymorphic endpoint
-    // with POST /api/nodes/ we can create a Folder
-    // or a Document
-    if (modelName == 'folder') {
-      return 'nodes';
-    } else if (modelName == 'document') {
-      return 'nodes';
-    }
-
-    return ret;
-  }
-  */
 
   @computed('session.data.authenticated.token', 'session.isAuthenticated')
   get headers() {

app/components/commander/index.hbs

@@ -37,7 +37,7 @@
     @hint={{@hint}} />
 
   <div class="view-mode-{{this.view_mode}}">
-    {{#each @children as |node|}}
+    {{#each this.children as |node|}}
       {{#let (component node.nodeType) as |NodeType|}}
         {{! NodeType is either <Folder /> or <Document />}}
         <NodeType

app/components/commander/index.js

@@ -27,11 +27,22 @@ export default class CommanderComponent extends Component {
 
   @tracked selected_nodes = A([]);
 
+  // new records created via New Folder or Upload Documents
+  @tracked new_records = A([]);
+  @tracked __new_record; // used as workaround for an ember bug
+
   @action
   openNewFolderModal() {
     this.show_new_folder_modal = true;
   }
 
+  @action
+  closeNewFolderModal(new_record) {
+    this.new_records.push(new_record);
+    this.__new_record = new_record; // workaround of ember bug
+    this.show_new_folder_modal = false;
+  }
+
   @action
   openRenameModal() {
     this.show_rename_node_modal = true;
@@ -54,11 +65,6 @@ export default class CommanderComponent extends Component {
     this.selected_nodes = A([]);
   }
 
-  @action
-  closeNewFolderModal() {
-    this.show_new_folder_modal = false;
-  }
-
   @action
   onViewModeChange(new_view_mode) {
     this.view_mode = new_view_mode;
@@ -82,4 +88,40 @@ export default class CommanderComponent extends Component {
       this.selected_nodes.removeObject(node);
     }
   }
+
+  get children() {
+    /**
+      Update children nodes (e.g. with newly added records) for better UX
+
+      In order to provide better user experiece, when user creates new folders,
+      uploads documents, deletes nodes (folder or documents) etc commander will
+      show immediate effect of the action: newly created folder must be seen on
+      same page as currenly user is in; even if we fetch again children, newly
+      folder might not be visible to the user, as according to
+      sorting/pagination creteria it(newly created folder) may not reside in
+      current page.
+
+      This is where current method comes handy - sticking with above example of
+      newly created folder - this method will add newly created folder to the
+      list of already existing children to make it visible to the user.
+     */
+    let children_copy = A(this.args.children);
+
+    if (this.new_records.length > 0) {
+      while(this.new_records.length > 0) {
+        children_copy.unshift(
+          this.new_records.pop()
+        );
+      }
+    }
+
+    if (this.__new_record) { // workaround ember bug
+      // Ember bug! Without this empty statement
+      // updates on tracked attributes ``this.new_records``
+      // will not trigger template updates i.e. ``this.children``
+      //
+      // pass
+    }
+    return children_copy;
+  }
 }

app/components/modal/new_folder.js

@@ -10,15 +10,15 @@ export default class NewFolderComponent extends Component {
   @service currentUser;
 
   @action
-  onSubmit() {
-    let new_folder;
+  async onSubmit() {
+    let new_folder, new_record;
 
     new_folder = this.store.createRecord('folder');
     new_folder.title = this.title;
     new_folder.parent = this.args.node;
-    new_folder.save();
+    new_record = await new_folder.save();
 
-    this.args.onClose();
+    this.args.onClose(new_record);
     this.title = '';
   }
 

app/components/pagination/index.js

@@ -2,10 +2,20 @@ import Component from '@glimmer/component';
 
 
 export default class PaginationComponent extends Component {
+
   get pages() {
-    let result = [];
+    let result = [],
+      page,
+      pages;
+
+    page = this.args.page; // number of current page
+    pages = this.args.pages; // total number of pages
+
+    if (pages == page) {
+      return [];
+    }
 
-    for(let i=0; i < this.args.object.pages; i++) {
+    for(let i=0; i < pages; i++) {
 
       if (this.args.object.page === i + 1) {
         result.push({