1
0
mirror of https://github.com/flarum/core.git synced 2025-08-01 14:10:37 +02:00

Extract flags list state (#24)

* Extract flags list state
This commit is contained in:
Alexander Skvortsov
2020-08-17 20:38:35 -04:00
committed by GitHub
parent e415e5ebc2
commit f26db4d3f2
7 changed files with 63 additions and 50 deletions

View File

@@ -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', <FlagsDropdown/>, 15);
items.add('flags', <FlagsDropdown state={app.flags} />, 15);
}
});
}

View File

@@ -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));
}
}

View File

@@ -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 (
<div className="NotificationList FlagList">
@@ -34,7 +29,7 @@ export default class FlagList extends Component {
<a href={app.route.post(post)} className="Notification Flag" config={function(element, isInitialized) {
m.route.apply(this, arguments);
if (!isInitialized) $(element).on('click', () => 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 {
</li>
);
})
: !this.loading
: !this.state.loading
? <div className="NotificationList-empty">{app.translator.trans('flarum-flags.forum.flagged_posts.empty_text')}</div>
: LoadingIndicator.component({className: 'LoadingIndicator--block'})}
</ul>
@@ -57,28 +52,4 @@ export default class FlagList extends Component {
</div>
);
}
/**
* 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();
});
}
}

View File

@@ -10,10 +10,12 @@ export default class FlagsDropdown extends NotificationsDropdown {
super.initProps(props);
}
init() {
super.init();
this.list = new FlagList();
getMenu() {
return (
<div className={'Dropdown-menu ' + this.props.menuClassName} onclick={this.menuClick.bind(this)}>
{this.showing ? FlagList.component({ state: this.props.state }) : ''}
</div>
);
}
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() {

View File

@@ -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 <div className="FlagsPage">{this.list.render()}</div>;
return <div className="FlagsPage"><FlagList state={app.flags}></FlagList></div>;
}
}

View File

@@ -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: <FlagsPage/>};
app.routes.flags = { path: '/flags', component: <FlagsPage /> };
app.flags = new FlagListState(app);
addFlagControl();
addFlagsDropdown();

View File

@@ -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();
});
}
}