Load more posts after post deletion

Closes #6390
- check if more posts should be loaded whenever one is deleted
- delete dead code from posts controller
- delete duplicate component gh-infinite-scroll-box
- simplify posts-list-item `posts.post` or `editor.edit` link logic by modifying `gh-content-view-container` to yield necessary vars directly and use inline ifs in template
- add `gh-tag` component for rendering tags and updating infinite scroll box on `settings/tags` page

ghost/admin/app/components/gh-infinite-scroll-box.js

@@ -1,7 +0,0 @@
-import Ember from 'ember';
-import InfiniteScrollMixin from 'ghost/mixins/infinite-scroll';
-
-const {Component} = Ember;
-
-export default Component.extend(InfiniteScrollMixin, {
-});

ghost/admin/app/components/gh-infinite-scroll.js

@@ -3,4 +3,10 @@ import InfiniteScrollMixin from 'ghost/mixins/infinite-scroll';
 
 const {Component} = Ember;
 
-export default Component.extend(InfiniteScrollMixin);
+export default Component.extend(InfiniteScrollMixin, {
+    actions: {
+        checkScroll() {
+            this._checkScroll();
+        }
+    }
+});

ghost/admin/app/components/gh-posts-list-item.js

@@ -34,10 +34,6 @@ export default Component.extend(ActiveLinkWrapper, {
         return Ember.String.htmlSafe(`background-image: url(${this.get('authorAvatar')})`);
     }),
 
-    viewOrEdit: computed('previewIsHidden', function () {
-        return this.get('previewIsHidden') ? 'editor.edit' : 'posts.post';
-    }),
-
     click() {
         this.sendAction('onClick', this.get('post'));
     },
@@ -54,6 +50,9 @@ export default Component.extend(ActiveLinkWrapper, {
     willDestroyElement() {
         this._super(...arguments);
         this.removeObserver('active', this, this.scrollIntoView);
+        if (this.get('post.isDeleted') && this.attrs.onDelete) {
+            this.attrs.onDelete();
+        }
     },
 
     scrollIntoView() {

ghost/admin/app/components/gh-tag.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    willDestroyElement() {
+        this._super(...arguments);
+
+        if (this.get('tag.isDeleted') && this.attrs.onDelete) {
+            this.attrs.onDelete();
+        }
+    }
+});

ghost/admin/app/controllers/posts.js

@@ -81,14 +81,6 @@ export default Controller.extend({
     }),
 
     actions: {
-        showPostContent(post) {
-            if (!post) {
-                return;
-            }
-
-            this.transitionToRoute('posts.post', post);
-        },
-
         toggleDeletePostModal() {
             this.toggleProperty('showDeletePostModal');
         }

ghost/admin/app/mixins/infinite-scroll.js

@@ -8,10 +8,9 @@ export default Mixin.create({
 
     /**
      * Determines if we are past a scroll point where we need to fetch the next page
-     * @param {object} event The scroll event
      */
-    checkScroll(event) {
+    _checkScroll() {
-        let element = event.target;
+        let element = this.get('element');
         let triggerPoint = this.get('triggerPoint');
         let isLoading = this.get('isLoading');
 
@@ -28,11 +27,11 @@ export default Mixin.create({
 
         let el = this.get('element');
 
-        el.onscroll = run.bind(this, this.checkScroll);
+        el.onscroll = run.bind(this, this._checkScroll);
 
-        if (el.scrollHeight <= el.clientHeight) {
+        // run on load, on the offchance that the initial load
-            this.sendAction('fetch');
+        // did not fill the view.
-        }
+        this._checkScroll();
     },
 
     willDestroyElement() {

ghost/admin/app/templates/components/gh-content-view-container.hbs

@@ -1 +1 @@
-{{yield this}}
+{{yield previewIsHidden}}

ghost/admin/app/templates/components/gh-infinite-scroll-box.hbs

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

ghost/admin/app/templates/components/gh-infinite-scroll.hbs

@@ -1 +1 @@
-{{yield}}
+{{yield (action "checkScroll")}}

ghost/admin/app/templates/components/gh-tag.hbs

@@ -0,0 +1,8 @@
+<div class="settings-tag">
+    {{#link-to 'settings.tags.tag' tag class="tag-edit-button"}}
+        <span class="tag-title">{{tag.name}}</span>
+        <span class="label label-default">/{{tag.slug}}</span>
+        <p class="tag-description">{{tag.description}}</p>
+        <span class="tags-count">{{tag.count.posts}}</span>
+    {{/link-to}}
+</div>

ghost/admin/app/templates/posts.hbs

@@ -1,4 +1,4 @@
-{{#gh-content-view-container as |container|}}
+{{#gh-content-view-container as |previewIsHidden|}}
 <header class="view-header">
     {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Content</span>{{/gh-view-title}}
     <section class="view-actions">
@@ -8,11 +8,11 @@
 
 <div class="view-container">
     <section class="content-list js-content-list {{if postListFocused 'keyboard-focused'}}">
-        {{#gh-infinite-scroll-box tagName="section" classNames="content-list-content js-content-scrollbox" fetch="loadNextPage"}}
+        {{#gh-infinite-scroll tagName="section" classNames="content-list-content js-content-scrollbox" fetch="loadNextPage" as |checkScroll|}}
             <ol class="posts-list">
                 {{#each sortedPosts key="id" as |post|}}
-                    {{#gh-posts-list-item post=post onDoubleClick="openEditor" previewIsHidden=container.previewIsHidden as |component|}}
+                    {{#gh-posts-list-item post=post onDoubleClick="openEditor" onDelete=(action checkScroll) as |component|}}
-                        {{#link-to component.viewOrEdit post.id class="permalink" title="Edit this post"}}
+                        {{#link-to (if previewIsHidden 'editor.edit' 'posts.post') post.id class="permalink" title="Edit this post"}}
                             <h3 class="entry-title">{{post.title}}</h3>
                             <section class="entry-meta">
                                 <span class="avatar" style={{component.authorAvatarBackground}}>
@@ -37,7 +37,7 @@
                     {{/gh-posts-list-item}}
                 {{/each}}
             </ol>
-        {{/gh-infinite-scroll-box}}
+        {{/gh-infinite-scroll}}
     </section>
     <section class="content-preview js-content-preview {{if postContentFocused 'keyboard-focused'}}">
         {{outlet}}

ghost/admin/app/templates/settings/tags.hbs

@@ -12,17 +12,11 @@
             fetch="loadNextPage"
             isLoading=isLoading
             classNames="tag-list"
+            as |checkScroll|
         }}
             <section class="tag-list-content settings-tags {{if tagListFocused 'keyboard-focused'}}">
                 {{#each tags as |tag|}}
-                    <div class="settings-tag">
+                    {{gh-tag tag=tag onDelete=(action checkScroll)}}
-                        {{#link-to 'settings.tags.tag' tag class="tag-edit-button"}}
-                            <span class="tag-title">{{tag.name}}</span>
-                            <span class="label label-default">/{{tag.slug}}</span>
-                            <p class="tag-description">{{tag.description}}</p>
-                            <span class="tags-count">{{tag.count.posts}}</span>
-                        {{/link-to}}
-                    </div>
                 {{/each}}
             </section>
         {{/gh-infinite-scroll}}

ghost/admin/tests/unit/components/gh-infinite-scroll-box-test.js

@@ -1,28 +0,0 @@
-/* jshint expr:true */
-import {expect} from 'chai';
-import {
-    describeComponent,
-    it
-} from 'ember-mocha';
-
-describeComponent(
-    'gh-infinite-scroll-box',
-    'Unit: Component: gh-infinite-scroll-box',
-    {
-        unit: true
-        // specify the other units that are required for this test
-        // needs: ['component:foo', 'helper:bar']
-    },
-    function () {
-        it('renders', function () {
-            // creates the component instance
-            let component = this.subject();
-
-            expect(component._state).to.equal('preRender');
-
-            // renders the component on the page
-            this.render();
-            expect(component._state).to.equal('inDOM');
-        });
-    }
-);