mirror of
https://github.com/mgerb/classic-wow-forums
synced 2026-01-09 00:42:47 +00:00
353 lines
12 KiB
TypeScript
353 lines
12 KiB
TypeScript
import React from 'react';
|
|
import { Link, RouteComponentProps } from 'react-router-dom';
|
|
import { inject, observer } from 'mobx-react';
|
|
import { cloneDeep, filter, orderBy, reject } from 'lodash';
|
|
import { ThreadService, ModUpdate } from '../../services';
|
|
import { Editor, ForumNav, LoginButton, PaginationLinks, ScrollToTop } from '../../components';
|
|
import { ThreadModel } from '../../model';
|
|
import { UserStore } from '../../stores/user-store';
|
|
import { Oauth, pagination } from '../../util';
|
|
import './forum.scss';
|
|
|
|
const stickyImage = require('../../assets/sticky.gif');
|
|
const upArrow = require('../../assets/arrow-up.gif');
|
|
const downArrow = require('../../assets/arrow-down.gif');
|
|
|
|
interface Props extends RouteComponentProps<any> {
|
|
userStore: UserStore;
|
|
}
|
|
|
|
interface State {
|
|
showEditor: boolean;
|
|
threads: ThreadModel[];
|
|
threadsLoaded: boolean;
|
|
initialThreads: ThreadModel[];
|
|
pageThreads: ThreadModel[];
|
|
pageLinks: (number | string)[];
|
|
searchText: string;
|
|
}
|
|
|
|
interface RouteParams {
|
|
categoryId: number;
|
|
page: number;
|
|
threadsPerPage: number;
|
|
sortBy: ColumnHeader;
|
|
sortOrder: 'asc' | 'desc';
|
|
}
|
|
|
|
// TODO: refactor this on back end to match UI
|
|
enum ColumnHeader {
|
|
subject = 'Subject',
|
|
author = 'Author',
|
|
replies = 'Replies',
|
|
views = 'Views',
|
|
lastPost= 'Last Post',
|
|
}
|
|
|
|
@inject('userStore')
|
|
@observer
|
|
export class Forum extends React.Component<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
this.state = {
|
|
showEditor: false,
|
|
threads: [],
|
|
threadsLoaded: false,
|
|
initialThreads: [],
|
|
pageThreads: [],
|
|
pageLinks: [],
|
|
searchText: '',
|
|
};
|
|
}
|
|
|
|
// easier way to get route params - will provide default values if null
|
|
private routeParams(props: Props = this.props): RouteParams {
|
|
return {
|
|
categoryId: parseInt(props.match.params['id'], 10),
|
|
page: parseInt(props.match.params['page'], 10) || 1,
|
|
threadsPerPage: parseInt(props.match.params['threadsPerPage'], 10) || 25,
|
|
sortBy: props.match.params['sortBy'] || ColumnHeader.lastPost,
|
|
sortOrder: props.match.params['sortOrder'] || 'desc',
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getThreads(this.routeParams().categoryId);
|
|
}
|
|
|
|
// update the page if the route params change
|
|
componentWillReceiveProps(nextProps: Props) {
|
|
if (this.props.match.params['id'] !== nextProps.match.params['id']) {
|
|
this.getThreads(nextProps.match.params['id']);
|
|
} else {
|
|
this.processThreads(this.state.threads, nextProps);
|
|
}
|
|
}
|
|
|
|
// fetch threads from server
|
|
private async getThreads(categoryId: number) {
|
|
let threads = await ThreadService.getCategoryThreads(categoryId);
|
|
// remove hidden threads from normal users
|
|
threads = reject(threads, t => !this.props.userStore.isModOrAdmin() && t.hidden);
|
|
this.setState({ initialThreads: threads, threadsLoaded: true });
|
|
this.processThreads(threads);
|
|
}
|
|
|
|
// process threads and set state
|
|
private processThreads(unorderedThreads: ThreadModel[], props: Props = this.props): void {
|
|
const { threadsPerPage, page } = this.routeParams(props);
|
|
const threads = this.orderBy(unorderedThreads, props);
|
|
const numPages = Math.ceil(threads.length / threadsPerPage);
|
|
const threadIndex = (page - 1) * threadsPerPage;
|
|
|
|
this.setState({
|
|
threads,
|
|
pageThreads: [...threads].splice(threadIndex, threadsPerPage),
|
|
pageLinks: pagination(page, numPages),
|
|
});
|
|
}
|
|
|
|
private orderBy(threads: ThreadModel[], props: Props) {
|
|
const { sortBy, sortOrder } = this.routeParams(props);
|
|
const titleMap: any = {
|
|
[ColumnHeader.subject]: (t: any) => t.title.toLowerCase(),
|
|
[ColumnHeader.author]: (t: any) => {
|
|
return t.user.character_name ? t.user.character_name.toLowerCase() : t.user.battletag.toLowerCase();
|
|
},
|
|
[ColumnHeader.replies]: 'reply_count',
|
|
[ColumnHeader.views]: 'view_count',
|
|
[ColumnHeader.lastPost]: 'updated_at',
|
|
};
|
|
|
|
// always sort sticky to top
|
|
return orderBy(threads, ['sticky', titleMap[sortBy]], ['desc', sortOrder]);
|
|
}
|
|
|
|
private navigateHere(categoryId: number, page: number, threadsPerPage: number, sortBy: ColumnHeader, sortOrder: 'asc' | 'desc') {
|
|
const url = `/f/${categoryId}/${page}/${threadsPerPage}/${sortBy}/${sortOrder}`;
|
|
this.props.history.push(url);
|
|
}
|
|
|
|
private onSearch(event: any) {
|
|
event.preventDefault();
|
|
const threads: any = filter(cloneDeep(this.state.initialThreads), (t) => {
|
|
return t.title.toLowerCase().match(this.state.searchText.toLowerCase());
|
|
});
|
|
|
|
this.processThreads(threads);
|
|
}
|
|
|
|
private async onModItemClick(params: ModUpdate) {
|
|
await ThreadService.modUpdateThread(params);
|
|
this.getThreads(this.routeParams().categoryId);
|
|
}
|
|
|
|
private onNewTopic() {
|
|
if (this.props.userStore.user) {
|
|
this.setState({ showEditor: true });
|
|
} else {
|
|
Oauth.openOuathWindow();
|
|
}
|
|
}
|
|
|
|
private onNewTopicClose(cancel: boolean) {
|
|
this.setState({ showEditor: false });
|
|
if (!cancel) {
|
|
this.getThreads(this.routeParams().categoryId);
|
|
}
|
|
}
|
|
|
|
renderHeader() {
|
|
return (
|
|
<div className="forum-header">
|
|
<ForumNav categoryId={this.routeParams().categoryId} {...this.props}/>
|
|
<LoginButton onNavigate={dest => this.props.history.push(dest)}/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderBody() {
|
|
return (
|
|
<div>
|
|
<form className="flex" style={{ marginBottom: 0 }} onSubmit={e => this.onSearch(e)}>
|
|
<img className="hide-tiny" style={{ minWidth: '91px' }} src={require('../../assets/forum-menu-left.gif')}/>
|
|
<img src={require('../../assets/forum-menu-newtopic.gif')}
|
|
style={{ height: '39px' }}
|
|
className="clickable"
|
|
onClick={() => this.onNewTopic()}/>
|
|
<img src={require('../../assets/forum-menu-right.gif')}/>
|
|
<img className="hide-tiny" src={require('../../assets/forum-menu-search-left.gif')}/>
|
|
<div className="forum-menu-search-bg hide-tiny">
|
|
<input name="SearchText" className="forum-input" style={{ height: '21px' }}
|
|
onChange={event => this.setState({ searchText: event.target.value })}/>
|
|
</div>
|
|
<input type="image" name="submit"
|
|
src={require('../../assets/forum-menu-search.gif')}
|
|
className="clickable hide-tiny" style={{ outline: 'none', height: '39px' }}/>
|
|
<div className="forumliner-bg"/>
|
|
</form>
|
|
|
|
{this.renderTable()}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderThreadRows() {
|
|
const { categoryId } = this.routeParams();
|
|
return this.state.pageThreads.map((thread, index) => {
|
|
const { id, sticky, hidden, last_reply, locked, reply_count, title, user, view_count } = thread;
|
|
const authorBluePost = user.permissions === 'admin' ? 'blue' : '';
|
|
const lastReplyBluePost = last_reply.permissions === 'admin' ? 'blue' : '';
|
|
const stickyElement = sticky ? <img src={stickyImage} title="Sticky"/> : '';
|
|
return (
|
|
<tr className="forum-row forum-row__body" key={index}>
|
|
<td className={`forum-cell forum-cell--body forum-cell--center`}>{stickyElement}</td>
|
|
<td className={`forum-cell forum-cell--body`}>
|
|
<Link to={`/t/${categoryId}/${id}`} className="thread__title">{title}</Link>
|
|
{this.props.userStore.isModOrAdmin() &&
|
|
<span className="forum-cell__mod-controls">
|
|
<a onClick={() => this.onModItemClick({ id, sticky: !sticky })}>{sticky ? 'Unstick' : 'Stick'}</a>
|
|
<a onClick={() => this.onModItemClick({ id, locked: !locked })}>{locked ? 'Unlock' : 'Lock'}</a>
|
|
<a onClick={() => this.onModItemClick({ id, hidden: !hidden })}>{hidden ? 'Unhide' : 'Hide'}</a>
|
|
</span>
|
|
}
|
|
</td>
|
|
<td className="forum-cell forum-cell--body">
|
|
<b className={authorBluePost}>{user.character_name || user.battletag}</b>
|
|
</td>
|
|
<td className="forum-cell forum-cell--body forum-cell--center">
|
|
<b>{reply_count.toLocaleString()}</b>
|
|
</td>
|
|
<td className="forum-cell forum-cell--body forum-cell--center hide-tiny">
|
|
<b>{view_count.toLocaleString()}</b>
|
|
</td>
|
|
<td className="forum-cell forum-cell--body hide-tiny">
|
|
<div style={{ fontSize: '8pt' }}>
|
|
by <b className={lastReplyBluePost}>{last_reply.character_name || last_reply.battletag}</b>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
});
|
|
}
|
|
|
|
renderThreadsPerPageDropdown() {
|
|
const { categoryId, sortBy, sortOrder } = this.routeParams();
|
|
return (
|
|
<select style={{ margin: '0 5px' }}
|
|
className="forum-input"
|
|
value={this.routeParams().threadsPerPage}
|
|
onChange={e => this.navigateHere(categoryId, 1, parseInt(e.target.value, 10), sortBy, sortOrder)}
|
|
>
|
|
<option value={25}>25</option>
|
|
<option value={50}>50</option>
|
|
<option value={75}>75</option>
|
|
</select>
|
|
);
|
|
}
|
|
|
|
renderHeaderFooter() {
|
|
const { categoryId, sortBy, threadsPerPage, sortOrder } = this.routeParams();
|
|
return (
|
|
<tr className="forum-table__header">
|
|
<td colSpan={100} className="forum-cell forum-cell--header">
|
|
<div className="flex forum-cell--header-footer">
|
|
<div className="flex">
|
|
<span style={{ marginRight: '10px' }}>Page:</span>
|
|
<PaginationLinks
|
|
activePage={this.routeParams().page}
|
|
pageLinks={this.state.pageLinks}
|
|
onPageSelect={page => this.navigateHere(categoryId, page, threadsPerPage, sortBy, sortOrder)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<b>Threads/Page:</b>
|
|
{this.renderThreadsPerPageDropdown()}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
renderSortingArrow(show: boolean, sortOrder: string) {
|
|
const imgSrc = sortOrder === 'asc' ? upArrow : downArrow;
|
|
return show ? <img src={imgSrc}/> : null;
|
|
}
|
|
|
|
renderHeaderCell(columnHeader: ColumnHeader, center: boolean, hideTiny?: boolean) {
|
|
const { categoryId, page, threadsPerPage, sortBy, sortOrder } = this.routeParams();
|
|
const newSortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
|
|
const centerClass = center ? 'forum-cell--center' : '';
|
|
const hideClass = hideTiny ? 'hide-tiny' : '';
|
|
|
|
return (
|
|
<td className={`forum-cell forum-cell--header ${centerClass} ${hideClass}`}>
|
|
<a onClick={() => this.navigateHere(categoryId, page, threadsPerPage, columnHeader, newSortOrder)}>
|
|
<span>{columnHeader}</span>
|
|
{this.renderSortingArrow(sortBy === columnHeader, sortOrder)}
|
|
</a>
|
|
</td>
|
|
);
|
|
}
|
|
|
|
renderTable() {
|
|
const table = (
|
|
<table className="forum-table">
|
|
<tbody>
|
|
|
|
{/* header */}
|
|
{this.renderHeaderFooter()}
|
|
|
|
<tr className="forum-table__header">
|
|
<td className={`forum-cell forum-cell--header forum-cell--center`} style={{ maxWidth: '50px' }}>
|
|
<img src={require('../../assets/flag.gif')}/>
|
|
</td>
|
|
{this.renderHeaderCell(ColumnHeader.subject, false)}
|
|
{this.renderHeaderCell(ColumnHeader.author, true)}
|
|
{this.renderHeaderCell(ColumnHeader.replies, true)}
|
|
{this.renderHeaderCell(ColumnHeader.views, true, true)}
|
|
{this.renderHeaderCell(ColumnHeader.lastPost, true, true)}
|
|
</tr>
|
|
|
|
{/* body */}
|
|
{this.renderThreadRows()}
|
|
|
|
{/* footer */}
|
|
{this.renderHeaderFooter()}
|
|
|
|
</tbody>
|
|
</table>
|
|
);
|
|
|
|
const noThreadsMessage = (
|
|
<div className="no-threads-message">
|
|
<h2>There doesn't seem to be anything
|
|
here. <a style={{ fontSize: 'initial' }} onClick={() => this.onNewTopic()}>Create the first topic!</a>
|
|
</h2>
|
|
</div>
|
|
);
|
|
|
|
const { threads, threadsLoaded } = this.state;
|
|
|
|
return (
|
|
<div style={{ padding: '0 3px' }}>
|
|
{threadsLoaded && threads.length < 1 ? noThreadsMessage : table }
|
|
<div className="forumliner-bot-bg"/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<ScrollToTop>
|
|
{this.state.showEditor && <Editor categoryId={this.routeParams().categoryId}
|
|
onClose={cancel => this.onNewTopicClose(cancel)}/>}
|
|
{this.renderHeader()}
|
|
{this.renderBody()}
|
|
</ScrollToTop>
|
|
);
|
|
}
|
|
|
|
}
|