Improve drafts UI (#6)

* Show drafts icon in header regardless of whether drafts are loaded

* Slightly improve translation when drafts dropdown is empty

* Load draftCount in CurrentUserSerializer, as user.drafts() is only loaded when the user does something that calls ShowUserController.

* Improve UI of using drafts:

- Load drafts list when opening the composer; this way, we avoid a situation where a new draft is being saved, no drafts have been loaded, and the user is presented with an empty draft list in the header.
- Load draft count on page load separately from the draft list itself: this means that the count is always accurate.
- Don't close the composer when saving drafts; this is behavior not used in any other product (imagine if Microsoft Word shut down whenever you pressed save).
- When a new draft is created, save it as the composer component's stored draft, so that future saves will be treated as updates
- Prevent duplicate save messages; ensure that the save message disappears and reappears when updating a draft so that the user clearly sees that the change was successsful, and not a left-over save message

js/src/forum/addDraftsDropdown.js

@@ -15,13 +15,9 @@ import HeaderSecondary from 'flarum/components/HeaderSecondary';
 import DraftsDropdown from './components/DraftsDropdown';
 
 export default function() {
-    extend(HeaderSecondary.prototype, 'items', function(items) {
-        if (!app.session.user) return;
-        if (
-            (app.session.user.drafts() && app.session.user.drafts().length && !app.cache.drafts) ||
-            (app.cache.drafts && app.cache.drafts.length !== 0)
-        ) {
-            items.add('Drafts', <DraftsDropdown />, 20);
-        }
+    extend(HeaderSecondary.prototype, 'items', function (items) {
+        if (!app.session.user || !app.forum.attribute('canSaveDrafts')) return;
+
+        items.add('Drafts', <DraftsDropdown />, 20);
     });
 }

js/src/forum/components/DraftsDropdown.js

@@ -35,13 +35,13 @@ export default class DraftsDropdown extends NotificationsDropdown {
         if (app.cache.drafts) {
             return app.cache.drafts.length;
         }
-        return app.session.user.drafts().length;
+        return app.session.user.draftCount();
     }
 
     getNewCount() {
         if (app.cache.drafts) {
             return app.cache.drafts.length;
         }
-        return app.session.user.drafts().length;
+        return app.session.user.draftCount();
     }
 }

js/src/forum/index.js

@@ -19,11 +19,13 @@ import Composer from 'flarum/components/Composer';
 import DiscussionComposer from 'flarum/components/DiscussionComposer';
 import Button from 'flarum/components/Button';
 import Alert from 'flarum/components/Alert';
+import DraftsList from './components/DraftsList';
 
 
 app.initializers.add('fof-drafts', () => {
     app.store.models.drafts = Draft;
     User.prototype.drafts = Model.hasMany('drafts');
+    User.prototype.draftCount = Model.attribute('draftCount');
 
     app.routes.drafts = { path: '/drafts', component: <DraftsPage /> };
 
@@ -38,6 +40,8 @@ app.initializers.add('fof-drafts', () => {
                 className: 'Button Button--icon Button--link',
                 title: app.translator.trans('fof-drafts.forum.composer.title'),
                 onclick: () => {
+                    app.alerts.dismiss(this.successAlert);
+
                     if (this.component.draft) {
                         delete this.component.draft.data.attributes.relationships;
 
@@ -52,30 +56,36 @@ app.initializers.add('fof-drafts', () => {
                                         app.cache.drafts[i] = draft;
                                     }
                                 });
+                                app.alerts.show(
+                                    (this.successAlert = new Alert({ type: 'success', children: app.translator.trans('fof-drafts.forum.composer.alert') }))
+                                );
                             });
                     } else {
                         app.store
                             .createRecord('drafts')
                             .save(this.component.data())
                             .then(draft => {
-                                if (!app.cache.drafts) {
-                                    app.session.user.data.relationships.drafts.data.push(draft);
-                                } else {
-                                    app.cache.drafts.push(draft);
-                                }
+                                app.cache.drafts = app.cache.drafts || [];
+                                app.cache.drafts.push(draft);
+                                this.component.draft = draft;
+                                app.alerts.show(
+                                    (this.successAlert = new Alert({ type: 'success', children: app.translator.trans('fof-drafts.forum.composer.alert') }))
+                                );
                                 m.redraw();
                             });
                     }
-                    app.alerts.show(
-                        (this.successAlert = new Alert({ type: 'success', children: app.translator.trans('fof-drafts.forum.composer.alert') }))
-                    );
-                    app.composer.hide();
                 },
             }),
             20
         );
     });
 
+    extend(Composer.prototype, 'init', function () {
+        // Load drafts; if already loaded, this will not do anything.
+        const draftsList = new DraftsList();
+        draftsList.load();
+    });
+
     extend(DiscussionComposer.prototype, 'init', function() {
         Object.keys(this.props).forEach(key => {
             if (!['originalContent', 'title', 'user'].includes(key)) {

resources/locale/en.yml

@@ -8,7 +8,7 @@ fof-drafts:
       alert: Draft saved.
       exit_alert: Discard changes to draft?
     dropdown:
-      empty_text: You didn't save any drafts
+      empty_text: You haven't saved any drafts
       title: Drafts
       button: Delete Draft
       tooltip: => fof-drafts.forum.dropdown.title

src/Listeners/AddApiAttributes.php

@@ -12,8 +12,10 @@
 namespace FoF\Drafts\Listeners;
 
 use Flarum\Api\Event\Serializing;
+use Flarum\Api\Serializer\CurrentUserSerializer;
 use Flarum\Api\Serializer\ForumSerializer;
 use Flarum\Settings\SettingsRepositoryInterface;
+use FoF\Drafts\Draft;
 
 class AddApiAttributes
 {
@@ -35,5 +37,9 @@ public function handle(Serializing $event)
         if ($event->isSerializer(ForumSerializer::class)) {
             $event->attributes['canSaveDrafts'] = $event->actor->hasPermissionLike('user.saveDrafts');
         }
+
+        if ($event->isSerializer(CurrentUserSerializer::class)) {
+            $event->attributes['draftCount'] = (int) Draft::where('user_id', $event->actor->id)->count();
+        }
     }
 }