diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js index 079a12dce..d0607b052 100644 --- a/js/src/forum/components/DiscussionListItem.js +++ b/js/src/forum/components/DiscussionListItem.js @@ -8,7 +8,6 @@ import ItemList from '../../common/utils/ItemList'; import abbreviateNumber from '../../common/utils/abbreviateNumber'; import Dropdown from '../../common/components/Dropdown'; import TerminalPost from './TerminalPost'; -import PostPreview from './PostPreview'; import SubtreeRetainer from '../../common/utils/SubtreeRetainer'; import DiscussionControls from '../utils/DiscussionControls'; import slidable from '../utils/slidable'; @@ -26,7 +25,9 @@ import { escapeRegExp } from 'lodash-es'; * - `params` */ export default class DiscussionListItem extends Component { - init() { + oninit(vnode) { + super.oninit(vnode); + /** * Set up a subtree retainer so that the discussion will not be redrawn * unless new data comes in. @@ -34,7 +35,7 @@ export default class DiscussionListItem extends Component { * @type {SubtreeRetainer} */ this.subtree = new SubtreeRetainer( - () => this.props.discussion.freshness, + () => this.attrs.discussion.freshness, () => { const time = app.session.user && app.session.user.markedAllAsReadAt(); return time && time.getTime(); @@ -43,37 +44,33 @@ export default class DiscussionListItem extends Component { ); } - attrs() { + elementAttrs() { return { className: classList([ 'DiscussionListItem', this.active() ? 'active' : '', - this.props.discussion.isHidden() ? 'DiscussionListItem--hidden' : '', + this.attrs.discussion.isHidden() ? 'DiscussionListItem--hidden' : '', ]), }; } - view() { - const retain = this.subtree.retain(); - - if (retain) return retain; - - const discussion = this.props.discussion; + view(vnode) { + const discussion = this.attrs.discussion; const user = discussion.user(); const isUnread = discussion.isUnread(); const isRead = discussion.isRead(); const showUnread = !this.showRepliesCount() && isUnread; let jumpTo = 0; const controls = DiscussionControls.controls(discussion, this).toArray(); - const attrs = this.attrs(); + const attrs = this.elementAttrs(); - if (this.props.params.q) { + if (this.attrs.params.q) { const post = discussion.mostRelevantPost(); if (post) { jumpTo = post.number(); } - const phrase = escapeRegExp(this.props.params.q); + const phrase = escapeRegExp(this.attrs.params.q); this.highlightRegExp = new RegExp(phrase + '|' + phrase.trim().replace(/\s+/g, '|'), 'gi'); } else { jumpTo = Math.min(discussion.lastPostNumber(), (discussion.lastReadPostNumber() || 0) + 1); @@ -82,12 +79,14 @@ export default class DiscussionListItem extends Component { return (
{controls.length - ? Dropdown.component({ - icon: 'fas fa-ellipsis-v', - children: controls, - className: 'DiscussionListItem-controls', - buttonClassName: 'Button Button--icon Button--flat Slidable-underneath Slidable-underneath--right', - }) + ? Dropdown.component( + { + icon: 'fas fa-ellipsis-v', + className: 'DiscussionListItem-controls', + buttonClassName: 'Button Button--icon Button--flat Slidable-underneath Slidable-underneath--right', + }, + controls + ) : ''}