mirror of
https://github.com/mgerb/classic-wow-forums
synced 2026-01-10 09:02:50 +00:00
client - forum page - pagination / threads per page
This commit is contained in:
@@ -3,10 +3,10 @@ import { Link, RouteComponentProps } from 'react-router-dom';
|
||||
import { inject, observer } from 'mobx-react';
|
||||
import { orderBy } from 'lodash';
|
||||
import { ThreadService } from '../../services';
|
||||
import { Editor, ForumNav, LoginButton, ScrollToTop } from '../../components';
|
||||
import { Editor, ForumNav, LoginButton, PaginationLinks, ScrollToTop } from '../../components';
|
||||
import { ThreadModel } from '../../model';
|
||||
import { UserStore } from '../../stores/user-store';
|
||||
import { Oauth } from '../../util';
|
||||
import { Oauth, pagination } from '../../util';
|
||||
import './forum.scss';
|
||||
|
||||
const stickyImage = require('../../assets/sticky.gif');
|
||||
@@ -18,6 +18,15 @@ interface Props extends RouteComponentProps<any> {
|
||||
interface State {
|
||||
showEditor: boolean;
|
||||
threads: ThreadModel[];
|
||||
pageThreads: ThreadModel[];
|
||||
pageLinks: (number | string)[];
|
||||
}
|
||||
|
||||
interface RouteParams {
|
||||
categoryId: number;
|
||||
page: number;
|
||||
threadsPerPage: number;
|
||||
sortBy: string;
|
||||
}
|
||||
|
||||
@inject('userStore')
|
||||
@@ -28,31 +37,67 @@ export class Forum extends React.Component<Props, State> {
|
||||
this.state = {
|
||||
showEditor: false,
|
||||
threads: [],
|
||||
pageThreads: [],
|
||||
pageLinks: [],
|
||||
};
|
||||
}
|
||||
|
||||
// easier way to get route params - will provide default values if null
|
||||
private get routeParams(): RouteParams {
|
||||
return {
|
||||
categoryId: parseInt(this.props.match.params['id'], 10),
|
||||
page: parseInt(this.props.match.params['page'], 10) || 1,
|
||||
threadsPerPage: parseInt(this.props.match.params['threadsPerPage'], 10) || 25,
|
||||
sortBy: this.props.match.params['sortBy'] || 'Latest Reply',
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getThreads(this.props.match.params['id']);
|
||||
this.getThreads(this.routeParams.categoryId);
|
||||
}
|
||||
|
||||
// update the page if the route params change
|
||||
componentWillReceiveProps(nextProps: Props) {
|
||||
if (this.props.match.params !== nextProps.match.params) {
|
||||
if (this.props.match.params['id'] !== nextProps.match.params['id']) {
|
||||
this.getThreads(nextProps.match.params['id']);
|
||||
} else {
|
||||
// have to grab params from next props
|
||||
const page = parseInt(nextProps.match.params['page'], 10) || 1;
|
||||
const threadsPerPage = parseInt(nextProps.match.params['threadsPerPage'], 10) || 25;
|
||||
this.processThreads(this.state.threads, page, threadsPerPage);
|
||||
}
|
||||
}
|
||||
|
||||
private async getThreads(categoryId: string) {
|
||||
let threads = await ThreadService.getCategoryThreads(categoryId);
|
||||
threads = this.orderBy(threads);
|
||||
this.setState({ threads });
|
||||
// fetch threads from server
|
||||
private async getThreads(categoryId: number) {
|
||||
const threads = await ThreadService.getCategoryThreads(categoryId);
|
||||
this.processThreads(threads, this.routeParams.page, this.routeParams.threadsPerPage);
|
||||
}
|
||||
|
||||
// process threads and set state
|
||||
private processThreads(unorderedThreads: ThreadModel[], page: number, threadsPerPage: number): void {
|
||||
const threads = this.orderBy(unorderedThreads);
|
||||
const numPages = Math.ceil(threads.length / threadsPerPage);
|
||||
const threadIndex = (page - 1) * threadsPerPage;
|
||||
|
||||
this.setState({
|
||||
threads,
|
||||
pageThreads: [...threads].splice(threadIndex, threadsPerPage),
|
||||
pageLinks: pagination(page, numPages) },
|
||||
);
|
||||
}
|
||||
|
||||
// TODO:
|
||||
private orderBy(threads: ThreadModel[]) {
|
||||
return orderBy(threads, ['sticky', 'updated_at'], ['desc', 'desc']);
|
||||
}
|
||||
|
||||
onNewTopic() {
|
||||
private navigateHere(categoryId: number, page: number, threadsPerPage: number, sortBy: string) {
|
||||
const url = `/f/${categoryId}/${page}/${threadsPerPage}/${sortBy}`;
|
||||
this.props.history.push(url);
|
||||
}
|
||||
|
||||
private onNewTopic() {
|
||||
if (this.props.userStore.user) {
|
||||
this.setState({ showEditor: true });
|
||||
} else {
|
||||
@@ -60,17 +105,17 @@ export class Forum extends React.Component<Props, State> {
|
||||
}
|
||||
}
|
||||
|
||||
onNewTopicClose(cancel: boolean) {
|
||||
private onNewTopicClose(cancel: boolean) {
|
||||
this.setState({ showEditor: false });
|
||||
if (!cancel) {
|
||||
this.getThreads(this.props.match.params['id']);
|
||||
this.getThreads(this.routeParams.categoryId);
|
||||
}
|
||||
}
|
||||
|
||||
renderHeader() {
|
||||
return (
|
||||
<div className="forum-header">
|
||||
<ForumNav categoryId={parseInt(this.props.match.params['id'], 10)} {...this.props}/>
|
||||
<ForumNav categoryId={this.routeParams.categoryId} {...this.props}/>
|
||||
<div style={{ height: '100%' }}>
|
||||
<LoginButton onNavigate={dest => this.props.history.push(dest)}/>
|
||||
</div>
|
||||
@@ -108,15 +153,18 @@ export class Forum extends React.Component<Props, State> {
|
||||
}
|
||||
|
||||
renderThreadRows() {
|
||||
const categoryId = this.props.match.params['id'];
|
||||
return this.state.threads.map((thread, index) => {
|
||||
const { categoryId } = this.routeParams;
|
||||
return this.state.pageThreads.map((thread, index) => {
|
||||
const authorBluePost = thread.user.permissions === 'admin' ? 'blue' : '';
|
||||
const lastReplyBluePost = thread.last_reply.permissions === 'admin' ? 'blue' : '';
|
||||
const sticky = thread.sticky ? <img src={stickyImage} title="Sticky"/> : '';
|
||||
return (
|
||||
<div className={`forum-row ${index % 2 === 0 && 'forum-row--dark'}`} key={index}>
|
||||
{this.renderCell(sticky, { maxWidth: '50px' }, true)}
|
||||
{this.renderCell(<Link to={`/f/${categoryId}/${thread.id}`}>{thread.title}</Link>, { minWidth: '200px' })}
|
||||
{this.renderCell(
|
||||
<Link to={`/t/${categoryId}/${thread.id}`} className="thread__title">{thread.title}</Link>,
|
||||
{ minWidth: '200px' },
|
||||
)}
|
||||
{this.renderCell(<b className={authorBluePost}>{thread.user.character_name || thread.user.battletag}</b>, { maxWidth: '150px' })}
|
||||
{this.renderCell(<b>{thread.reply_count}</b>, { maxWidth: '150px' }, true)}
|
||||
{this.renderCell(<b>{thread.view_count}</b>, { maxWidth: '150px' }, true)}
|
||||
@@ -131,15 +179,67 @@ export class Forum extends React.Component<Props, State> {
|
||||
});
|
||||
}
|
||||
|
||||
renderThreadsPerPageDropdown() {
|
||||
const { categoryId, sortBy } = this.routeParams;
|
||||
return (
|
||||
<select style={{ margin: '0 5px' }}
|
||||
value={this.routeParams.threadsPerPage}
|
||||
onChange={e => this.navigateHere(categoryId, 1, parseInt(e.target.value, 10), sortBy)}
|
||||
>
|
||||
<option value={25}>25</option>
|
||||
<option value={50}>50</option>
|
||||
<option value={75}>75</option>
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
// TOOD:
|
||||
renderSortByDropdown() {
|
||||
return (
|
||||
<select style={{ margin: '0 5px' }}>
|
||||
<option>Latest Reply</option>
|
||||
<option>Subject</option>
|
||||
<option>Author</option>
|
||||
<option># of Replies</option>
|
||||
<option># of Views</option>
|
||||
<option>Creation Date</option>
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
renderHeaderFooter() {
|
||||
const { categoryId, sortBy, threadsPerPage } = this.routeParams;
|
||||
return (
|
||||
<div className="forum-row forum-row--header">
|
||||
<div className="forum-cell forum-cell--header forum-cell--header-footer flex-1">
|
||||
<div>
|
||||
<span style={{ marginRight: '10px' }}>Page:</span>
|
||||
<PaginationLinks
|
||||
activePage={this.routeParams.page}
|
||||
pageLinks={this.state.pageLinks}
|
||||
onPageSelect={page => this.navigateHere(categoryId, page, threadsPerPage, sortBy)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<b>Threads/Page:</b>
|
||||
{this.renderThreadsPerPageDropdown()}
|
||||
<b>Sort by:</b>
|
||||
{this.renderSortByDropdown()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderTable() {
|
||||
return (
|
||||
<div style={{ padding: '0 3px' }}>
|
||||
<div className="forum-table">
|
||||
|
||||
<div className="forum-row forum-row--header">
|
||||
<div className="forum-cell forum-cell--header flex-1">TODO:</div>
|
||||
</div>
|
||||
{/* header */}
|
||||
{this.renderHeaderFooter()}
|
||||
|
||||
{/* column headers */}
|
||||
<div className="forum-row forum-row--header">
|
||||
{this.renderCell(<img src={require('../../assets/flag.gif')}/>, { maxWidth: '50px' }, true, true)}
|
||||
{this.renderCell(<a>Subject</a>, { minWidth: '200px' }, false, true)}
|
||||
@@ -149,7 +249,12 @@ export class Forum extends React.Component<Props, State> {
|
||||
{this.renderCell(<a>Last Post</a>, { maxWidth: '200px' }, true, true)}
|
||||
</div>
|
||||
|
||||
{/* table body */}
|
||||
{this.renderThreadRows()}
|
||||
|
||||
{/* footer */}
|
||||
{this.renderHeaderFooter()}
|
||||
|
||||
</div>
|
||||
|
||||
<div className="forumliner-bot-bg"/>
|
||||
@@ -160,7 +265,7 @@ export class Forum extends React.Component<Props, State> {
|
||||
render() {
|
||||
return (
|
||||
<ScrollToTop>
|
||||
{this.state.showEditor && <Editor categoryId={this.props.match.params['id']}
|
||||
{this.state.showEditor && <Editor categoryId={this.routeParams.categoryId}
|
||||
onClose={cancel => this.onNewTopicClose(cancel)}/>}
|
||||
{this.renderHeader()}
|
||||
{this.renderBody()}
|
||||
|
||||
Reference in New Issue
Block a user