From f26db4d3f24c14d5686eb19dad97165432faccd9 Mon Sep 17 00:00:00 2001 From: Alexander Skvortsov <38059171+askvortsov1@users.noreply.github.com> Date: Mon, 17 Aug 2020 20:38:35 -0400 Subject: [PATCH] Extract flags list state (#24) * Extract flags list state --- .../flags/js/src/forum/addFlagsDropdown.js | 2 +- .../flags/js/src/forum/addFlagsToPosts.js | 14 +++---- .../flags/js/src/forum/components/FlagList.js | 37 ++---------------- .../js/src/forum/components/FlagsDropdown.js | 12 +++--- .../js/src/forum/components/FlagsPage.js | 5 +-- extensions/flags/js/src/forum/index.js | 5 ++- .../js/src/forum/states/FlagListState.js | 38 +++++++++++++++++++ 7 files changed, 63 insertions(+), 50 deletions(-) create mode 100644 extensions/flags/js/src/forum/states/FlagListState.js diff --git a/extensions/flags/js/src/forum/addFlagsDropdown.js b/extensions/flags/js/src/forum/addFlagsDropdown.js index 46d11a8f8..0975046bf 100644 --- a/extensions/flags/js/src/forum/addFlagsDropdown.js +++ b/extensions/flags/js/src/forum/addFlagsDropdown.js @@ -6,7 +6,7 @@ import FlagsDropdown from './components/FlagsDropdown'; export default function() { extend(HeaderSecondary.prototype, 'items', function(items) { if (app.forum.attribute('canViewFlags')) { - items.add('flags', , 15); + items.add('flags', , 15); } }); } diff --git a/extensions/flags/js/src/forum/addFlagsToPosts.js b/extensions/flags/js/src/forum/addFlagsToPosts.js index 7e4039323..f2e886a87 100644 --- a/extensions/flags/js/src/forum/addFlagsToPosts.js +++ b/extensions/flags/js/src/forum/addFlagsToPosts.js @@ -20,19 +20,19 @@ export default function() { this.subtree.invalidate(); - if (app.cache.flags) { - app.cache.flags.some((flag, i) => { + if (app.flags.cache) { + app.flags.cache.some((flag, i) => { if (flag.post() === post) { - app.cache.flags.splice(i, 1); + app.flags.cache.splice(i, 1); - if (app.cache.flagIndex === post) { - let next = app.cache.flags[i]; + if (app.flags.index === post) { + let next = app.flags.cache[i]; - if (!next) next = app.cache.flags[0]; + if (!next) next = app.flags.cache[0]; if (next) { const nextPost = next.post(); - app.cache.flagIndex = nextPost; + app.flags.index = nextPost; m.route(app.route.post(nextPost)); } } diff --git a/extensions/flags/js/src/forum/components/FlagList.js b/extensions/flags/js/src/forum/components/FlagList.js index 57e7446dc..2e247fe70 100644 --- a/extensions/flags/js/src/forum/components/FlagList.js +++ b/extensions/flags/js/src/forum/components/FlagList.js @@ -7,16 +7,11 @@ import humanTime from 'flarum/helpers/humanTime'; export default class FlagList extends Component { init() { - /** - * Whether or not the notifications are loading. - * - * @type {Boolean} - */ - this.loading = false; + this.state = this.props.state; } view() { - const flags = app.cache.flags || []; + const flags = this.state.cache; return (
@@ -34,7 +29,7 @@ export default class FlagList extends Component { app.cache.flagIndex = post); + if (!isInitialized) $(element).on('click', () => app.flags.index = post); }}> {avatar(post.user())} {icon('fas fa-flag', {className: 'Notification-icon'})} @@ -49,7 +44,7 @@ export default class FlagList extends Component { ); }) - : !this.loading + : !this.state.loading ?
{app.translator.trans('flarum-flags.forum.flagged_posts.empty_text')}
: LoadingIndicator.component({className: 'LoadingIndicator--block'})} @@ -57,28 +52,4 @@ export default class FlagList extends Component {
); } - - /** - * Load flags into the application's cache if they haven't already - * been loaded. - */ - load() { - if (app.cache.flags && !app.session.user.attribute('newFlagCount')) { - return; - } - - this.loading = true; - m.redraw(); - - app.store.find('flags') - .then(flags => { - app.session.user.pushAttributes({newFlagCount: 0}); - app.cache.flags = flags.sort((a, b) => b.createdAt() - a.createdAt()); - }) - .catch(() => {}) - .then(() => { - this.loading = false; - m.redraw(); - }); - } } diff --git a/extensions/flags/js/src/forum/components/FlagsDropdown.js b/extensions/flags/js/src/forum/components/FlagsDropdown.js index 0b8896d8f..5e7746ca1 100644 --- a/extensions/flags/js/src/forum/components/FlagsDropdown.js +++ b/extensions/flags/js/src/forum/components/FlagsDropdown.js @@ -10,10 +10,12 @@ export default class FlagsDropdown extends NotificationsDropdown { super.initProps(props); } - init() { - super.init(); - - this.list = new FlagList(); + getMenu() { + return ( +
+ {this.showing ? FlagList.component({ state: this.props.state }) : ''} +
+ ); } goToRoute() { @@ -21,7 +23,7 @@ export default class FlagsDropdown extends NotificationsDropdown { } getUnreadCount() { - return app.cache.flags ? app.cache.flags.length : app.forum.attribute('flagCount'); + return app.flags.cache ? app.flags.cache.length : app.forum.attribute('flagCount'); } getNewCount() { diff --git a/extensions/flags/js/src/forum/components/FlagsPage.js b/extensions/flags/js/src/forum/components/FlagsPage.js index 7a32fb3f9..70993041b 100644 --- a/extensions/flags/js/src/forum/components/FlagsPage.js +++ b/extensions/flags/js/src/forum/components/FlagsPage.js @@ -12,13 +12,12 @@ export default class FlagsPage extends Page { app.history.push('flags'); - this.list = new FlagList(); - this.list.load(); + app.flags.load(); this.bodyClass = 'App--flags'; } view() { - return
{this.list.render()}
; + return
; } } diff --git a/extensions/flags/js/src/forum/index.js b/extensions/flags/js/src/forum/index.js index 927d210bf..fe1641141 100644 --- a/extensions/flags/js/src/forum/index.js +++ b/extensions/flags/js/src/forum/index.js @@ -3,6 +3,7 @@ import Model from 'flarum/Model'; import Flag from './models/Flag'; import FlagsPage from './components/FlagsPage'; +import FlagListState from './states/FlagListState'; import addFlagControl from './addFlagControl'; import addFlagsDropdown from './addFlagsDropdown'; import addFlagsToPosts from './addFlagsToPosts'; @@ -13,7 +14,9 @@ app.initializers.add('flarum-flags', () => { app.store.models.flags = Flag; - app.routes.flags = {path: '/flags', component: }; + app.routes.flags = { path: '/flags', component: }; + + app.flags = new FlagListState(app); addFlagControl(); addFlagsDropdown(); diff --git a/extensions/flags/js/src/forum/states/FlagListState.js b/extensions/flags/js/src/forum/states/FlagListState.js new file mode 100644 index 000000000..bca6cec0b --- /dev/null +++ b/extensions/flags/js/src/forum/states/FlagListState.js @@ -0,0 +1,38 @@ +export default class FlagListState { + constructor(app) { + this.app = app; + + /** + * Whether or not the flags are loading. + * + * @type {Boolean} + */ + this.loading = false; + + this.cache = []; + } + + /** + * Load flags into the application's cache if they haven't already + * been loaded. + */ + load() { + if (this.cache.length && !this.app.session.user.attribute('newFlagCount')) { + return; + } + + this.loading = true; + m.redraw(); + + this.app.store.find('flags') + .then(flags => { + this.app.session.user.pushAttributes({ newFlagCount: 0 }); + this.cache = flags.sort((a, b) => b.createdAt() - a.createdAt()); + }) + .catch(() => { }) + .then(() => { + this.loading = false; + m.redraw(); + }); + } +}