1
0
mirror of https://github.com/flarum/core.git synced 2025-07-10 11:26:24 +02:00
Files
php-flarum/js/src/forum/components/PostsUserPage.js
David Wheatley d268894e61 chore: 1.2 JS clean-up (#3214)
* fix: `extend.ts` TS error

* docs: fix incorrect JS docblocks

* chore: simplify some code

* chore: remove usages of prefixed JS function

* chore: consistent empty return types

* chore: format

* fix: typing errors

* chore: remove unneeded `@public` docblock modifiers

* Apply suggestions from code review

* Update js/src/forum/utils/slidable.js

Co-authored-by: Alexander Skvortsov <38059171+askvortsov1@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Alexander Skvortsov <38059171+askvortsov1@users.noreply.github.com>
2021-12-27 18:58:18 +00:00

156 lines
3.6 KiB
JavaScript

import app from '../../forum/app';
import UserPage from './UserPage';
import LoadingIndicator from '../../common/components/LoadingIndicator';
import Button from '../../common/components/Button';
import Link from '../../common/components/Link';
import Placeholder from '../../common/components/Placeholder';
import CommentPost from './CommentPost';
/**
* The `PostsUserPage` component shows a user's activity feed inside of their
* profile.
*/
export default class PostsUserPage extends UserPage {
oninit(vnode) {
super.oninit(vnode);
/**
* Whether or not the activity feed is currently loading.
*
* @type {Boolean}
*/
this.loading = true;
/**
* Whether or not there are any more activity items that can be loaded.
*
* @type {Boolean}
*/
this.moreResults = false;
/**
* The Post models in the feed.
*
* @type {Post[]}
*/
this.posts = [];
/**
* The number of activity items to load per request.
*
* @type {number}
*/
this.loadLimit = 20;
this.loadUser(m.route.param('username'));
}
content() {
if (this.posts.length === 0 && !this.loading) {
return (
<div className="PostsUserPage">
<Placeholder text={app.translator.trans('core.forum.user.posts_empty_text')} />
</div>
);
}
let footer;
if (this.loading) {
footer = <LoadingIndicator />;
} else if (this.moreResults) {
footer = (
<div className="PostsUserPage-loadMore">
<Button className="Button" onclick={this.loadMore.bind(this)}>
{app.translator.trans('core.forum.user.posts_load_more_button')}
</Button>
</div>
);
}
return (
<div className="PostsUserPage">
<ul className="PostsUserPage-list">
{this.posts.map((post) => (
<li>
<div className="PostsUserPage-discussion">
{app.translator.trans('core.forum.user.in_discussion_text', {
discussion: <Link href={app.route.post(post)}>{post.discussion().title()}</Link>,
})}
</div>
<CommentPost post={post} />
</li>
))}
</ul>
<div className="PostsUserPage-loadMore">{footer}</div>
</div>
);
}
/**
* Initialize the component with a user, and trigger the loading of their
* activity feed.
*/
show(user) {
super.show(user);
this.refresh();
}
/**
* Clear and reload the user's activity feed.
*/
refresh() {
this.loading = true;
this.posts = [];
m.redraw();
this.loadResults().then(this.parseResults.bind(this));
}
/**
* Load a new page of the user's activity feed.
*
* @param {number} [offset] The position to start getting results from.
* @return {Promise<import('../../common/models/Post').default[]>}
* @protected
*/
loadResults(offset) {
return app.store.find('posts', {
filter: {
author: this.user.username(),
type: 'comment',
},
page: { offset, limit: this.loadLimit },
sort: '-createdAt',
});
}
/**
* Load the next page of results.
*/
loadMore() {
this.loading = true;
this.loadResults(this.posts.length).then(this.parseResults.bind(this));
}
/**
* Parse results and append them to the activity feed.
*
* @param {import('../../common/models/Post').default[]} results
* @return {import('../../common/models/Post').default[]}
*/
parseResults(results) {
this.loading = false;
this.posts.push(results);
this.moreResults = results.length >= this.loadLimit;
m.redraw();
return results;
}
}