mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Changed post list resize code to use react state; fixed various eslint warnings

Просмотр исходного кода
Этот коммит содержится в:
Reed Garmsen
2015-10-21 13:55:41 -07:00
родитель 7d94eb1dca
Коммит 27a8169ae8
1 изменённых файлов: 51 добавлений и 38 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

89
web/react/components/post_list.jsx
Просмотреть файл

@@ -12,7 +12,7 @@ const UserStore = require('../stores/user_store.jsx');
const SocketStore = require('../stores/socket_store.jsx'); const SocketStore = require('../stores/socket_store.jsx');
const PreferenceStore = require('../stores/preference_store.jsx'); const PreferenceStore = require('../stores/preference_store.jsx');
const utils = require('../utils/utils.jsx'); const Utils = require('../utils/utils.jsx');
const Client = require('../utils/client.jsx'); const Client = require('../utils/client.jsx');
const Constants = require('../utils/constants.jsx'); const Constants = require('../utils/constants.jsx');
const ActionTypes = Constants.ActionTypes; const ActionTypes = Constants.ActionTypes;
@@ -40,11 +40,13 @@ export default class PostList extends React.Component {
this.loadFirstPosts = this.loadFirstPosts.bind(this); this.loadFirstPosts = this.loadFirstPosts.bind(this);
this.activate = this.activate.bind(this); this.activate = this.activate.bind(this);
this.deactivate = this.deactivate.bind(this); this.deactivate = this.deactivate.bind(this);
this.resize = this.resize.bind(this); this.handleResize = this.handleResize.bind(this);
this.resizePostList = this.resizePostList.bind(this);
const state = this.getStateFromStores(props.channelId); const state = this.getStateFromStores(props.channelId);
state.numToDisplay = Constants.POST_CHUNK_SIZE; state.numToDisplay = Constants.POST_CHUNK_SIZE;
state.isFirstLoadComplete = false; state.isFirstLoadComplete = false;
state.windowHeight = Utils.windowHeight();
this.state = state; this.state = state;
} }
@@ -115,12 +117,7 @@ export default class PostList extends React.Component {
const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist)); const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
$(window).resize(() => { window.addEventListener('resize', this.handleResize);
this.resize();
if (!this.scrolled) {
this.scrollToBottom();
}
});
postHolder.on('scroll', () => { postHolder.on('scroll', () => {
const position = postHolder.scrollTop() + postHolder.height() + 14; const position = postHolder.scrollTop() + postHolder.height() + 14;
@@ -154,7 +151,7 @@ export default class PostList extends React.Component {
this.loadFirstPosts(this.props.channelId); this.loadFirstPosts(this.props.channelId);
} }
this.resize(); this.handleResize();
this.onChange(); this.onChange();
this.scrollToBottom(); this.scrollToBottom();
} }
@@ -164,7 +161,9 @@ export default class PostList extends React.Component {
SocketStore.removeChangeListener(this.onSocketChange); SocketStore.removeChangeListener(this.onSocketChange);
PreferenceStore.removeChangeListener(this.onTimeChange); PreferenceStore.removeChangeListener(this.onTimeChange);
$('body').off('click.userpopover'); $('body').off('click.userpopover');
$(window).off('resize');
window.removeEventListener('resize', this.handleResize);
var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist)); var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
postHolder.off('scroll'); postHolder.off('scroll');
} }
@@ -202,7 +201,7 @@ export default class PostList extends React.Component {
// it's by the user and not a comment // it's by the user and not a comment
} else if (isNewPost && } else if (isNewPost &&
userId === firstPost.user_id && userId === firstPost.user_id &&
!utils.isComment(firstPost)) { !Utils.isComment(firstPost)) {
this.scrollToBottom(true); this.scrollToBottom(true);
// the user clicked 'load more messages' // the user clicked 'load more messages'
@@ -219,6 +218,10 @@ export default class PostList extends React.Component {
} else { } else {
this.scrollTo(this.prevScrollTop); this.scrollTo(this.prevScrollTop);
} }
if (prevState.windowHeight !== this.state.windowHeight) {
this.handleResize();
}
} }
componentWillUpdate() { componentWillUpdate() {
var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist)); var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
@@ -231,10 +234,20 @@ export default class PostList extends React.Component {
this.deactivate(); this.deactivate();
} }
} }
resize() { handleResize() {
this.setState({
windowHeight: Utils.windowHeight()
});
this.resizePostList();
if (!this.scrolled) {
this.scrollToBottom();
}
}
resizePostList() {
const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist)); const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
if ($('#create_post').length > 0) { if ($('#create_post').length > 0) {
const height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50; const height = this.state.windowHeight - $('#create_post').height() - $('#error_bar').outerHeight() - 50;
postHolder.css('height', height + 'px'); postHolder.css('height', height + 'px');
} }
} }
@@ -280,7 +293,7 @@ export default class PostList extends React.Component {
onChange() { onChange() {
var newState = this.getStateFromStores(this.props.channelId); var newState = this.getStateFromStores(this.props.channelId);
if (!utils.areStatesEqual(newState.postList, this.state.postList)) { if (!Utils.areStatesEqual(newState.postList, this.state.postList)) {
this.setState(newState); this.setState(newState);
} }
} }
@@ -310,7 +323,7 @@ export default class PostList extends React.Component {
} }
} }
createDMIntroMessage(channel) { createDMIntroMessage(channel) {
var teammate = utils.getDirectTeammate(channel.id); var teammate = Utils.getDirectTeammate(channel.id);
if (teammate) { if (teammate) {
var teammateName = teammate.username; var teammateName = teammate.username;
@@ -370,13 +383,13 @@ export default class PostList extends React.Component {
createDefaultIntroMessage(channel) { createDefaultIntroMessage(channel) {
return ( return (
<div className='channel-intro'> <div className='channel-intro'>
<h4 className='channel-intro__title'>Beginning of {channel.display_name}</h4> <h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
<p className='channel-intro__content'> <p className='channel-intro__content'>
Welcome to {channel.display_name}! {'Welcome to ' + channel.display_name + '!'}
<br/><br/> <br/><br/>
This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know. {'This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
<br/><br/> <br/><br/>
To create a new channel or join an existing one, go to the Left Sidebar under “Channels” and click “More…”. {'To create a new channel or join an existing one, go to the Left Sidebar under “Channels” and click “More…”.'}
<br/> <br/>
</p> </p>
</div> </div>
@@ -385,7 +398,7 @@ export default class PostList extends React.Component {
createOffTopicIntroMessage(channel) { createOffTopicIntroMessage(channel) {
return ( return (
<div className='channel-intro'> <div className='channel-intro'>
<h4 className='channel-intro__title'>Beginning of {channel.display_name}</h4> <h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
<p className='channel-intro__content'> <p className='channel-intro__content'>
{'This is the start of ' + channel.display_name + ', a channel for non-work-related conversations.'} {'This is the start of ' + channel.display_name + ', a channel for non-work-related conversations.'}
<br/> <br/>
@@ -399,7 +412,7 @@ export default class PostList extends React.Component {
data-title={channel.display_name} data-title={channel.display_name}
data-channelid={channel.id} data-channelid={channel.id}
> >
<i className='fa fa-pencil'></i>Set a description <i className='fa fa-pencil'></i>{'Set a description'}
</a> </a>
<a <a
className='intro-links' className='intro-links'
@@ -407,7 +420,7 @@ export default class PostList extends React.Component {
data-toggle='modal' data-toggle='modal'
data-target='#channel_invite' data-target='#channel_invite'
> >
<i className='fa fa-user-plus'></i>Invite others to this channel <i className='fa fa-user-plus'></i>{'Invite others to this channel'}
</a> </a>
</div> </div>
); );
@@ -422,7 +435,7 @@ export default class PostList extends React.Component {
var members = ChannelStore.getExtraInfo(channel.id).members; var members = ChannelStore.getExtraInfo(channel.id).members;
for (var i = 0; i < members.length; i++) { for (var i = 0; i < members.length; i++) {
if (utils.isAdmin(members[i].roles)) { if (Utils.isAdmin(members[i].roles)) {
return members[i].username; return members[i].username;
} }
} }
@@ -443,14 +456,14 @@ export default class PostList extends React.Component {
var createMessage; var createMessage;
if (creatorName === '') { if (creatorName === '') {
createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + utils.displayDate(channel.create_at) + '.'; createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + Utils.displayDate(channel.create_at) + '.';
} else { } else {
createMessage = (<span>This is the start of the <strong>{uiName}</strong> {uiType}, created by <strong>{creatorName}</strong> on <strong>{utils.displayDate(channel.create_at)}</strong></span>); createMessage = (<span>This is the start of the <strong>{uiName}</strong> {uiType}, created by <strong>{creatorName}</strong> on <strong>{Utils.displayDate(channel.create_at)}</strong></span>);
} }
return ( return (
<div className='channel-intro'> <div className='channel-intro'>
<h4 className='channel-intro__title'>Beginning of {uiName}</h4> <h4 className='channel-intro__title'>{'Beginning of ' + uiName}</h4>
<p className='channel-intro__content'> <p className='channel-intro__content'>
{createMessage} {createMessage}
{memberMessage} {memberMessage}
@@ -465,7 +478,7 @@ export default class PostList extends React.Component {
data-title={channel.display_name} data-title={channel.display_name}
data-channelid={channel.id} data-channelid={channel.id}
> >
<i className='fa fa-pencil'></i>Set a description <i className='fa fa-pencil'></i>{'Set a description'}
</a> </a>
<a <a
className='intro-links' className='intro-links'
@@ -473,7 +486,7 @@ export default class PostList extends React.Component {
data-toggle='modal' data-toggle='modal'
data-target='#channel_invite' data-target='#channel_invite'
> >
<i className='fa fa-user-plus'></i>Invite others to this {uiType} <i className='fa fa-user-plus'></i>{'Invite others to this ' + uiType}
</a> </a>
</div> </div>
); );
@@ -507,7 +520,7 @@ export default class PostList extends React.Component {
if (prevPost) { if (prevPost) {
sameUser = prevPost.user_id === post.user_id && post.create_at - prevPost.create_at <= 1000 * 60 * 5; sameUser = prevPost.user_id === post.user_id && post.create_at - prevPost.create_at <= 1000 * 60 * 5;
sameRoot = utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id); sameRoot = Utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id);
// hide the profile pic if: // hide the profile pic if:
// the previous post was made by the same user as the current post, // the previous post was made by the same user as the current post,
@@ -516,8 +529,8 @@ export default class PostList extends React.Component {
// the current post is not from a webhook // the current post is not from a webhook
// and the previous post is not from a webhook // and the previous post is not from a webhook
if ((prevPost.user_id === post.user_id) && if ((prevPost.user_id === post.user_id) &&
!utils.isComment(prevPost) && !Utils.isComment(prevPost) &&
!utils.isComment(post) && !Utils.isComment(post) &&
(!post.props || !post.props.from_webhook) && (!post.props || !post.props.from_webhook) &&
(!prevPost.props || !prevPost.props.from_webhook)) { (!prevPost.props || !prevPost.props.from_webhook)) {
hideProfilePic = true; hideProfilePic = true;
@@ -526,7 +539,7 @@ export default class PostList extends React.Component {
// check if it's the last comment in a consecutive string of comments on the same post // check if it's the last comment in a consecutive string of comments on the same post
// it is the last comment if it is last post in the channel or the next post has a different root post // it is the last comment if it is last post in the channel or the next post has a different root post
var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id); var isLastComment = Utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id);
var postCtl = ( var postCtl = (
<Post <Post
@@ -542,7 +555,7 @@ export default class PostList extends React.Component {
/> />
); );
let currentPostDay = utils.getDateForUnixTicks(post.create_at); const currentPostDay = Utils.getDateForUnixTicks(post.create_at);
if (currentPostDay.toDateString() !== previousPostDay.toDateString()) { if (currentPostDay.toDateString() !== previousPostDay.toDateString()) {
postCtls.push( postCtls.push(
<div <div
@@ -558,9 +571,9 @@ export default class PostList extends React.Component {
if (post.user_id !== userId && post.create_at > lastViewed && !renderedLastViewed) { if (post.user_id !== userId && post.create_at > lastViewed && !renderedLastViewed) {
renderedLastViewed = true; renderedLastViewed = true;
// Temporary fix to solve ie10/11 rendering issue // Temporary fix to solve ie11 rendering issue
let newSeparatorId = ''; let newSeparatorId = '';
if (!utils.isBrowserIE()) { if (!Utils.isBrowserIE()) {
newSeparatorId = 'new_message_' + this.props.channelId; newSeparatorId = 'new_message_' + this.props.channelId;
} }
postCtls.push( postCtls.push(
@@ -572,7 +585,7 @@ export default class PostList extends React.Component {
<hr <hr
className='separator__hr' className='separator__hr'
/> />
<div className='separator__text'>New Messages</div> <div className='separator__text'>{'New Messages'}</div>
</div> </div>
); );
} }
@@ -638,7 +651,7 @@ export default class PostList extends React.Component {
order = this.state.postList.order; order = this.state.postList.order;
} }
var moreMessages = <p className='beginning-messages-text'>Beginning of Channel</p>; var moreMessages = <p className='beginning-messages-text'>{'Beginning of Channel'}</p>;
if (channel != null) { if (channel != null) {
if (order.length >= this.state.numToDisplay) { if (order.length >= this.state.numToDisplay) {
moreMessages = ( moreMessages = (
@@ -648,7 +661,7 @@ export default class PostList extends React.Component {
href='#' href='#'
onClick={this.loadMorePosts} onClick={this.loadMorePosts}
> >
Load more messages {'Load more messages'}
</a> </a>
); );
} else { } else {