Refactoring center channel
Этот коммит содержится в:
Christopher Speller
@@ -1,764 +0,0 @@
|
||||
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
const Post = require('./post.jsx');
|
||||
const UserProfile = require('./user_profile.jsx');
|
||||
const AsyncClient = require('../utils/async_client.jsx');
|
||||
const LoadingScreen = require('./loading_screen.jsx');
|
||||
|
||||
const PostStore = require('../stores/post_store.jsx');
|
||||
const ChannelStore = require('../stores/channel_store.jsx');
|
||||
const UserStore = require('../stores/user_store.jsx');
|
||||
const TeamStore = require('../stores/team_store.jsx');
|
||||
const SocketStore = require('../stores/socket_store.jsx');
|
||||
const PreferenceStore = require('../stores/preference_store.jsx');
|
||||
|
||||
const Utils = require('../utils/utils.jsx');
|
||||
const Client = require('../utils/client.jsx');
|
||||
const Constants = require('../utils/constants.jsx');
|
||||
const ActionTypes = Constants.ActionTypes;
|
||||
const SocketEvents = Constants.SocketEvents;
|
||||
|
||||
const AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
|
||||
|
||||
export default class PostList extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.gotMorePosts = false;
|
||||
this.scrolled = false;
|
||||
this.prevScrollTop = 0;
|
||||
this.seenNewMessages = false;
|
||||
this.isUserScroll = true;
|
||||
this.userHasSeenNew = false;
|
||||
this.loadInProgress = false;
|
||||
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.onTimeChange = this.onTimeChange.bind(this);
|
||||
this.onSocketChange = this.onSocketChange.bind(this);
|
||||
this.createChannelIntroMessage = this.createChannelIntroMessage.bind(this);
|
||||
this.loadMorePosts = this.loadMorePosts.bind(this);
|
||||
this.loadFirstPosts = this.loadFirstPosts.bind(this);
|
||||
this.activate = this.activate.bind(this);
|
||||
this.deactivate = this.deactivate.bind(this);
|
||||
this.handleResize = this.handleResize.bind(this);
|
||||
this.resizePostList = this.resizePostList.bind(this);
|
||||
this.updateScroll = this.updateScroll.bind(this);
|
||||
|
||||
const state = this.getStateFromStores(props.channelId);
|
||||
state.numToDisplay = Constants.POST_CHUNK_SIZE;
|
||||
state.isFirstLoadComplete = false;
|
||||
state.windowHeight = Utils.windowHeight();
|
||||
|
||||
this.state = state;
|
||||
}
|
||||
getStateFromStores(id) {
|
||||
var postList = PostStore.getPosts(id);
|
||||
|
||||
if (postList != null) {
|
||||
var deletedPosts = PostStore.getUnseenDeletedPosts(id);
|
||||
|
||||
if (deletedPosts && Object.keys(deletedPosts).length > 0) {
|
||||
for (var pid in deletedPosts) {
|
||||
if (deletedPosts.hasOwnProperty(pid)) {
|
||||
postList.posts[pid] = deletedPosts[pid];
|
||||
postList.order.unshift(pid);
|
||||
}
|
||||
}
|
||||
|
||||
postList.order.sort((a, b) => {
|
||||
if (postList.posts[a].create_at > postList.posts[b].create_at) {
|
||||
return -1;
|
||||
}
|
||||
if (postList.posts[a].create_at < postList.posts[b].create_at) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
var pendingPostList = PostStore.getPendingPosts(id);
|
||||
|
||||
if (pendingPostList) {
|
||||
postList.order = pendingPostList.order.concat(postList.order);
|
||||
for (var ppid in pendingPostList.posts) {
|
||||
if (pendingPostList.posts.hasOwnProperty(ppid)) {
|
||||
postList.posts[ppid] = pendingPostList.posts[ppid];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
postList
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
window.onload = () => this.scrollToBottom();
|
||||
if (this.props.isActive) {
|
||||
this.activate();
|
||||
this.loadFirstPosts(this.props.channelId);
|
||||
}
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this.deactivate();
|
||||
}
|
||||
activate() {
|
||||
this.gotMorePosts = false;
|
||||
this.scrolled = false;
|
||||
this.prevScrollTop = 0;
|
||||
this.seenNewMessages = false;
|
||||
this.isUserScroll = true;
|
||||
this.userHasSeenNew = false;
|
||||
|
||||
PostStore.clearUnseenDeletedPosts(this.props.channelId);
|
||||
PostStore.addChangeListener(this.onChange);
|
||||
UserStore.addStatusesChangeListener(this.onTimeChange);
|
||||
PreferenceStore.addChangeListener(this.onTimeChange);
|
||||
SocketStore.addChangeListener(this.onSocketChange);
|
||||
|
||||
const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
|
||||
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
|
||||
postHolder.on('scroll', () => {
|
||||
const position = postHolder.scrollTop() + postHolder.height() + 14;
|
||||
const bottom = postHolder[0].scrollHeight;
|
||||
|
||||
if (position >= bottom) {
|
||||
this.scrolled = false;
|
||||
} else {
|
||||
this.scrolled = true;
|
||||
}
|
||||
|
||||
if (this.isUserScroll) {
|
||||
this.userHasSeenNew = true;
|
||||
}
|
||||
this.isUserScroll = true;
|
||||
|
||||
$('.top-visible-post').removeClass('top-visible-post');
|
||||
|
||||
$(ReactDOM.findDOMNode(this.refs.postlistcontent)).children().each(function select() {
|
||||
if ($(this).position().top + $(this).height() / 2 > 0) {
|
||||
$(this).addClass('top-visible-post');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('.post-list__content div .post').removeClass('post--last');
|
||||
$('.post-list__content div:last-child .post').addClass('post--last');
|
||||
|
||||
if (!this.state.isFirstLoadComplete) {
|
||||
this.loadFirstPosts(this.props.channelId);
|
||||
}
|
||||
|
||||
this.resizePostList();
|
||||
this.onChange();
|
||||
this.scrollToBottom();
|
||||
}
|
||||
deactivate() {
|
||||
PostStore.removeChangeListener(this.onChange);
|
||||
UserStore.removeStatusesChangeListener(this.onTimeChange);
|
||||
SocketStore.removeChangeListener(this.onSocketChange);
|
||||
PreferenceStore.removeChangeListener(this.onTimeChange);
|
||||
$('body').off('click.userpopover');
|
||||
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
|
||||
var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
|
||||
postHolder.off('scroll');
|
||||
}
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (!this.props.isActive) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (prevState.windowHeight !== this.state.windowHeight) {
|
||||
this.resizePostList();
|
||||
if (!this.scrolled) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
}
|
||||
|
||||
$('.post-list__content div .post').removeClass('post--last');
|
||||
$('.post-list__content div:last-child .post').addClass('post--last');
|
||||
|
||||
if (this.state.postList == null || prevState.postList == null) {
|
||||
this.scrollToBottom();
|
||||
return;
|
||||
}
|
||||
|
||||
var order = this.state.postList.order || [];
|
||||
var posts = this.state.postList.posts || {};
|
||||
var oldOrder = prevState.postList.order || [];
|
||||
var oldPosts = prevState.postList.posts || {};
|
||||
var userId = UserStore.getCurrentId();
|
||||
var firstPost = posts[order[0]] || {};
|
||||
var isNewPost = oldOrder.indexOf(order[0]) === -1;
|
||||
|
||||
if (this.props.isActive && !prevProps.isActive) {
|
||||
this.scrollToBottom();
|
||||
} else if (oldOrder.length === 0) {
|
||||
this.scrollToBottom();
|
||||
|
||||
// the user is scrolled to the bottom
|
||||
} else if (!this.scrolled) {
|
||||
this.scrollToBottom();
|
||||
|
||||
// there's a new post and
|
||||
// it's by the user (and not from their webhook) and not a comment
|
||||
} else if (isNewPost &&
|
||||
userId === firstPost.user_id &&
|
||||
!firstPost.props.from_webhook &&
|
||||
!Utils.isComment(firstPost)) {
|
||||
this.scrollToBottom(true);
|
||||
|
||||
// the user clicked 'load more messages'
|
||||
} else if (this.gotMorePosts && oldOrder.length > 0) {
|
||||
let index;
|
||||
if (prevState.numToDisplay >= oldOrder.length) {
|
||||
index = oldOrder.length - 1;
|
||||
} else {
|
||||
index = prevState.numToDisplay;
|
||||
}
|
||||
const lastPost = oldPosts[oldOrder[index]];
|
||||
$('#post_' + lastPost.id)[0].scrollIntoView();
|
||||
this.gotMorePosts = false;
|
||||
} else {
|
||||
this.scrollTo(this.prevScrollTop);
|
||||
}
|
||||
}
|
||||
componentWillUpdate() {
|
||||
var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
|
||||
this.prevScrollTop = postHolder.scrollTop();
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.isActive === true && this.props.isActive === false) {
|
||||
this.activate();
|
||||
} else if (nextProps.isActive === false && this.props.isActive === true) {
|
||||
this.deactivate();
|
||||
}
|
||||
}
|
||||
updateScroll() {
|
||||
if (!this.scrolled) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
}
|
||||
handleResize() {
|
||||
this.setState({
|
||||
windowHeight: Utils.windowHeight()
|
||||
});
|
||||
}
|
||||
resizePostList() {
|
||||
const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
|
||||
if ($('#create_post').length > 0) {
|
||||
const height = this.state.windowHeight - $('#create_post').height() - $('#error_bar').outerHeight() - 50;
|
||||
postHolder.css('height', height + 'px');
|
||||
}
|
||||
}
|
||||
scrollTo(val) {
|
||||
this.isUserScroll = false;
|
||||
var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
|
||||
postHolder[0].scrollTop = val;
|
||||
}
|
||||
scrollToBottom(force) {
|
||||
this.isUserScroll = false;
|
||||
var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
|
||||
if ($('#new_message_' + this.props.channelId)[0] && !this.userHasSeenNew && !force) {
|
||||
$('#new_message_' + this.props.channelId)[0].scrollIntoView();
|
||||
} else {
|
||||
postHolder.addClass('hide-scroll');
|
||||
postHolder[0].scrollTop = postHolder[0].scrollHeight;
|
||||
postHolder.removeClass('hide-scroll');
|
||||
}
|
||||
}
|
||||
loadFirstPosts(id) {
|
||||
if (this.loadInProgress) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.props.channelId == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadInProgress = true;
|
||||
Client.getPosts(
|
||||
id,
|
||||
PostStore.getLatestUpdate(id),
|
||||
() => {
|
||||
this.loadInProgress = false;
|
||||
this.setState({isFirstLoadComplete: true});
|
||||
},
|
||||
() => {
|
||||
this.loadInProgress = false;
|
||||
this.setState({isFirstLoadComplete: true});
|
||||
}
|
||||
);
|
||||
}
|
||||
onChange() {
|
||||
var newState = this.getStateFromStores(this.props.channelId);
|
||||
|
||||
if (!Utils.areStatesEqual(newState.postList, this.state.postList)) {
|
||||
this.setState(newState);
|
||||
}
|
||||
}
|
||||
onSocketChange(msg) {
|
||||
if (msg.action === SocketEvents.POST_DELETED) {
|
||||
var activeRoot = $(document.activeElement).closest('.comment-create-body')[0];
|
||||
var activeRootPostId = '';
|
||||
if (activeRoot && activeRoot.id.length > 0) {
|
||||
activeRootPostId = activeRoot.id;
|
||||
}
|
||||
|
||||
if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() !== msg.user_id) {
|
||||
$('#post_deleted').modal('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
onTimeChange() {
|
||||
if (!this.state.postList) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (var id in this.state.postList.posts) {
|
||||
if (!this.refs[id]) {
|
||||
continue;
|
||||
}
|
||||
this.refs[id].forceUpdateInfo();
|
||||
}
|
||||
}
|
||||
createDMIntroMessage(channel) {
|
||||
var teammate = Utils.getDirectTeammate(channel.id);
|
||||
|
||||
if (teammate) {
|
||||
var teammateName = teammate.username;
|
||||
if (teammate.nickname.length > 0) {
|
||||
teammateName = teammate.nickname;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='channel-intro'>
|
||||
<div className='post-profile-img__container channel-intro-img'>
|
||||
<img
|
||||
className='post-profile-img'
|
||||
src={'/api/v1/users/' + teammate.id + '/image?time=' + teammate.update_at + '&' + Utils.getSessionIndex()}
|
||||
height='50'
|
||||
width='50'
|
||||
/>
|
||||
</div>
|
||||
<div className='channel-intro-profile'>
|
||||
<strong><UserProfile userId={teammate.id} /></strong>
|
||||
</div>
|
||||
<p className='channel-intro-text'>
|
||||
{'This is the start of your direct message history with ' + teammateName + '.'}<br/>
|
||||
{'Direct messages and files shared here are not shown to people outside this area.'}
|
||||
</p>
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#edit_channel'
|
||||
data-header={channel.header}
|
||||
data-title={channel.display_name}
|
||||
data-channelid={channel.id}
|
||||
>
|
||||
<i className='fa fa-pencil'></i>{'Set a header'}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='channel-intro'>
|
||||
<p className='channel-intro-text'>{'This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.'}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
createChannelIntroMessage(channel) {
|
||||
if (channel.type === 'D') {
|
||||
return this.createDMIntroMessage(channel);
|
||||
} else if (ChannelStore.isDefault(channel)) {
|
||||
return this.createDefaultIntroMessage(channel);
|
||||
} else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
|
||||
return this.createOffTopicIntroMessage(channel);
|
||||
} else if (channel.type === 'O' || channel.type === 'P') {
|
||||
return this.createStandardIntroMessage(channel);
|
||||
}
|
||||
}
|
||||
createDefaultIntroMessage(channel) {
|
||||
const team = TeamStore.getCurrent();
|
||||
let inviteModalLink;
|
||||
if (team.type === Constants.INVITE_TEAM) {
|
||||
inviteModalLink = (
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#invite_member'
|
||||
>
|
||||
<i className='fa fa-user-plus'></i>{'Invite others to this team'}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
inviteModalLink = (
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#get_link'
|
||||
data-title='Team Invite'
|
||||
data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + team.id}
|
||||
>
|
||||
<i className='fa fa-user-plus'></i>{'Invite others to this team'}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='channel-intro'>
|
||||
<h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
|
||||
<p className='channel-intro__content'>
|
||||
<strong>{'Welcome to ' + channel.display_name + '!'}</strong>
|
||||
<br/><br/>
|
||||
{'This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
|
||||
</p>
|
||||
{inviteModalLink}
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#edit_channel'
|
||||
data-header={channel.header}
|
||||
data-title={channel.display_name}
|
||||
data-channelid={channel.id}
|
||||
>
|
||||
<i className='fa fa-pencil'></i>{'Set a header'}
|
||||
</a>
|
||||
<br/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
createOffTopicIntroMessage(channel) {
|
||||
return (
|
||||
<div className='channel-intro'>
|
||||
<h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
|
||||
<p className='channel-intro__content'>
|
||||
{'This is the start of ' + channel.display_name + ', a channel for non-work-related conversations.'}
|
||||
<br/>
|
||||
</p>
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#edit_channel'
|
||||
data-header={channel.header}
|
||||
data-title={channel.display_name}
|
||||
data-channelid={channel.id}
|
||||
>
|
||||
<i className='fa fa-pencil'></i>{'Set a header'}
|
||||
</a>
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#channel_invite'
|
||||
>
|
||||
<i className='fa fa-user-plus'></i>{'Invite others to this channel'}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
getChannelCreator(channel) {
|
||||
if (channel.creator_id.length > 0) {
|
||||
var creator = UserStore.getProfile(channel.creator_id);
|
||||
if (creator) {
|
||||
return creator.username;
|
||||
}
|
||||
}
|
||||
|
||||
var members = ChannelStore.getExtraInfo(channel.id).members;
|
||||
for (var i = 0; i < members.length; i++) {
|
||||
if (Utils.isAdmin(members[i].roles)) {
|
||||
return members[i].username;
|
||||
}
|
||||
}
|
||||
}
|
||||
createStandardIntroMessage(channel) {
|
||||
var uiName = channel.display_name;
|
||||
var creatorName = '';
|
||||
|
||||
var uiType;
|
||||
var memberMessage;
|
||||
if (channel.type === 'P') {
|
||||
uiType = 'private group';
|
||||
memberMessage = ' Only invited members can see this private group.';
|
||||
} else {
|
||||
uiType = 'channel';
|
||||
memberMessage = ' Any member can join and read this channel.';
|
||||
}
|
||||
|
||||
var createMessage;
|
||||
if (creatorName === '') {
|
||||
createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + Utils.displayDate(channel.create_at) + '.';
|
||||
} 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>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='channel-intro'>
|
||||
<h4 className='channel-intro__title'>{'Beginning of ' + uiName}</h4>
|
||||
<p className='channel-intro__content'>
|
||||
{createMessage}
|
||||
{memberMessage}
|
||||
<br/>
|
||||
</p>
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#edit_channel'
|
||||
data-header={channel.header}
|
||||
data-title={channel.display_name}
|
||||
data-channelid={channel.id}
|
||||
>
|
||||
<i className='fa fa-pencil'></i>{'Set a header'}
|
||||
</a>
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#channel_invite'
|
||||
>
|
||||
<i className='fa fa-user-plus'></i>{'Invite others to this ' + uiType}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
createPosts(posts, order) {
|
||||
var postCtls = [];
|
||||
var previousPostDay = new Date(0);
|
||||
var userId = UserStore.getCurrentId();
|
||||
|
||||
var renderedLastViewed = false;
|
||||
var lastViewed = Number.MAX_VALUE;
|
||||
|
||||
if (ChannelStore.getMember(this.props.channelId) != null) {
|
||||
lastViewed = ChannelStore.getMember(this.props.channelId).last_viewed_at;
|
||||
}
|
||||
|
||||
var numToDisplay = this.state.numToDisplay;
|
||||
if (order.length - 1 < numToDisplay) {
|
||||
numToDisplay = order.length - 1;
|
||||
}
|
||||
|
||||
for (var i = numToDisplay; i >= 0; i--) {
|
||||
var post = posts[order[i]];
|
||||
var parentPost = posts[post.parent_id];
|
||||
|
||||
// If the post is a comment whose parent has been deleted, don't add it to the list.
|
||||
if (parentPost && parentPost.state === Constants.POST_DELETED) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var sameUser = false;
|
||||
var sameRoot = false;
|
||||
var hideProfilePic = false;
|
||||
var prevPost = posts[order[i + 1]];
|
||||
|
||||
if (prevPost) {
|
||||
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);
|
||||
|
||||
// hide the profile pic if:
|
||||
// the previous post was made by the same user as the current post,
|
||||
// the previous post is not a comment,
|
||||
// the current post is not a comment,
|
||||
// the current post is not from a webhook
|
||||
// and the previous post is not from a webhook
|
||||
if ((prevPost.user_id === post.user_id) &&
|
||||
!Utils.isComment(prevPost) &&
|
||||
!Utils.isComment(post) &&
|
||||
(!post.props || !post.props.from_webhook) &&
|
||||
(!prevPost.props || !prevPost.props.from_webhook)) {
|
||||
hideProfilePic = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
var isLastComment = Utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id);
|
||||
|
||||
var postCtl = (
|
||||
<Post
|
||||
key={post.id + 'postKey'}
|
||||
ref={post.id}
|
||||
sameUser={sameUser}
|
||||
sameRoot={sameRoot}
|
||||
post={post}
|
||||
parentPost={parentPost}
|
||||
posts={posts}
|
||||
hideProfilePic={hideProfilePic}
|
||||
isLastComment={isLastComment}
|
||||
resize={this.updateScroll}
|
||||
/>
|
||||
);
|
||||
|
||||
const currentPostDay = Utils.getDateForUnixTicks(post.create_at);
|
||||
if (currentPostDay.toDateString() !== previousPostDay.toDateString()) {
|
||||
postCtls.push(
|
||||
<div
|
||||
key={currentPostDay.toDateString()}
|
||||
className='date-separator'
|
||||
>
|
||||
<hr className='separator__hr' />
|
||||
<div className='separator__text'>{currentPostDay.toDateString()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (post.user_id !== userId && post.create_at > lastViewed && !renderedLastViewed) {
|
||||
renderedLastViewed = true;
|
||||
|
||||
// Temporary fix to solve ie11 rendering issue
|
||||
let newSeparatorId = '';
|
||||
if (!Utils.isBrowserIE()) {
|
||||
newSeparatorId = 'new_message_' + this.props.channelId;
|
||||
}
|
||||
postCtls.push(
|
||||
<div
|
||||
id={newSeparatorId}
|
||||
key='unviewed'
|
||||
className='new-separator'
|
||||
>
|
||||
<hr
|
||||
className='separator__hr'
|
||||
/>
|
||||
<div className='separator__text'>{'New Messages'}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
postCtls.push(postCtl);
|
||||
previousPostDay = currentPostDay;
|
||||
}
|
||||
|
||||
return postCtls;
|
||||
}
|
||||
loadMorePosts() {
|
||||
if (this.state.postList == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
var posts = this.state.postList.posts;
|
||||
var order = this.state.postList.order;
|
||||
var channelId = this.props.channelId;
|
||||
|
||||
$(ReactDOM.findDOMNode(this.refs.loadmore)).text('Retrieving more messages...');
|
||||
|
||||
Client.getPostsPage(
|
||||
channelId,
|
||||
order.length,
|
||||
Constants.POST_CHUNK_SIZE,
|
||||
function success(data) {
|
||||
$(ReactDOM.findDOMNode(this.refs.loadmore)).text('Load more messages');
|
||||
this.gotMorePosts = true;
|
||||
this.setState({numToDisplay: this.state.numToDisplay + Constants.POST_CHUNK_SIZE});
|
||||
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.order.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var postList = {};
|
||||
postList.posts = $.extend(posts, data.posts);
|
||||
postList.order = order.concat(data.order);
|
||||
|
||||
AppDispatcher.handleServerAction({
|
||||
type: ActionTypes.RECIEVED_POSTS,
|
||||
id: channelId,
|
||||
post_list: postList
|
||||
});
|
||||
|
||||
Client.getProfiles();
|
||||
}.bind(this),
|
||||
function fail(err) {
|
||||
$(ReactDOM.findDOMNode(this.refs.loadmore)).text('Load more messages');
|
||||
AsyncClient.dispatchError(err, 'getPosts');
|
||||
}.bind(this)
|
||||
);
|
||||
}
|
||||
render() {
|
||||
var order = [];
|
||||
var posts;
|
||||
var channel = ChannelStore.get(this.props.channelId);
|
||||
|
||||
if (this.state.postList != null) {
|
||||
posts = this.state.postList.posts;
|
||||
order = this.state.postList.order;
|
||||
}
|
||||
|
||||
var moreMessages = <p className='beginning-messages-text'>{'Beginning of Channel'}</p>;
|
||||
if (channel != null) {
|
||||
if (order.length >= this.state.numToDisplay) {
|
||||
moreMessages = (
|
||||
<a
|
||||
ref='loadmore'
|
||||
className='more-messages-text theme'
|
||||
href='#'
|
||||
onClick={this.loadMorePosts}
|
||||
>
|
||||
{'Load more messages'}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
moreMessages = this.createChannelIntroMessage(channel);
|
||||
}
|
||||
}
|
||||
|
||||
var postCtls = [];
|
||||
if (posts && this.state.isFirstLoadComplete) {
|
||||
postCtls = this.createPosts(posts, order);
|
||||
} else {
|
||||
postCtls.push(
|
||||
<LoadingScreen
|
||||
position='absolute'
|
||||
key='loading'
|
||||
/>);
|
||||
}
|
||||
|
||||
var activeClass = '';
|
||||
if (!this.props.isActive) {
|
||||
activeClass = 'inactive';
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref='postlist'
|
||||
className={'post-list-holder-by-time ' + activeClass}
|
||||
>
|
||||
<div className='post-list__table'>
|
||||
<div
|
||||
ref='postlistcontent'
|
||||
className='post-list__content'
|
||||
>
|
||||
{moreMessages}
|
||||
{postCtls}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
PostList.defaultProps = {
|
||||
isActive: false,
|
||||
channelId: null
|
||||
};
|
||||
PostList.propTypes = {
|
||||
isActive: React.PropTypes.bool,
|
||||
channelId: React.PropTypes.string
|
||||
};
|
||||
@@ -1,59 +1,239 @@
|
||||
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
const PostList = require('./post_list.jsx');
|
||||
const PostsView = require('./posts_view.jsx');
|
||||
const ChannelStore = require('../stores/channel_store.jsx');
|
||||
const PostStore = require('../stores/post_store.jsx');
|
||||
const Constants = require('../utils/constants.jsx');
|
||||
const ActionTypes = Constants.ActionTypes;
|
||||
const Utils = require('../utils/utils.jsx');
|
||||
const Client = require('../utils/client.jsx');
|
||||
const AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
|
||||
const AsyncClient = require('../utils/async_client.jsx');
|
||||
const LoadingScreen = require('./loading_screen.jsx');
|
||||
|
||||
import {createChannelIntroMessage} from '../utils/channel_intro_mssages.jsx';
|
||||
|
||||
export default class PostListContainer extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.onLeave = this.onLeave.bind(this);
|
||||
this.onChannelChange = this.onChannelChange.bind(this);
|
||||
this.onChannelLeave = this.onChannelLeave.bind(this);
|
||||
this.onPostsChange = this.onPostsChange.bind(this);
|
||||
this.handlePostListScroll = this.handlePostListScroll.bind(this);
|
||||
this.loadMorePostsTop = this.loadMorePostsTop.bind(this);
|
||||
this.postsLoaded = this.postsLoaded.bind(this);
|
||||
this.postsLoadedFailure = this.postsLoadedFailure.bind(this);
|
||||
|
||||
let currentChannelId = ChannelStore.getCurrentId();
|
||||
const currentChannelId = ChannelStore.getCurrentId();
|
||||
const state = {
|
||||
scrollType: PostsView.SCROLL_TYPE_BOTTOM,
|
||||
numPostsToDisplay: Constants.POST_CHUNK_SIZE
|
||||
};
|
||||
if (currentChannelId) {
|
||||
this.state = {currentChannelId: currentChannelId, postLists: [currentChannelId]};
|
||||
Object.assign(state, {
|
||||
currentChannelIndex: 0,
|
||||
channels: [currentChannelId],
|
||||
postLists: [this.getChannelPosts(currentChannelId)]
|
||||
});
|
||||
} else {
|
||||
this.state = {currentChannelId: null, postLists: []};
|
||||
Object.assign(state, {
|
||||
currentChannelIndex: null,
|
||||
channels: [],
|
||||
postLists: []
|
||||
});
|
||||
}
|
||||
|
||||
this.state = state;
|
||||
}
|
||||
componentDidMount() {
|
||||
ChannelStore.addChangeListener(this.onChange);
|
||||
ChannelStore.addLeaveListener(this.onLeave);
|
||||
ChannelStore.addChangeListener(this.onChannelChange);
|
||||
ChannelStore.addLeaveListener(this.onChannelLeave);
|
||||
PostStore.addChangeListener(this.onPostsChange);
|
||||
}
|
||||
onChange() {
|
||||
let channelId = ChannelStore.getCurrentId();
|
||||
if (channelId === this.state.currentChannelId) {
|
||||
componentWillUnmount() {
|
||||
ChannelStore.removeChangeListener(this.onChannelChange);
|
||||
ChannelStore.removeLeaveListener(this.onChannelLeave);
|
||||
PostStore.removeChangeListener(this.onPostsChange);
|
||||
}
|
||||
onChannelChange() {
|
||||
const postLists = Object.assign({}, this.state.postLists);
|
||||
const channels = this.state.channels.slice();
|
||||
const channelId = ChannelStore.getCurrentId();
|
||||
|
||||
// Has the channel really changed?
|
||||
if (channelId === channels[this.state.currentChannelIndex]) {
|
||||
return;
|
||||
}
|
||||
|
||||
let postLists = this.state.postLists;
|
||||
if (postLists.indexOf(channelId) === -1) {
|
||||
postLists.push(channelId);
|
||||
PostStore.clearUnseenDeletedPosts(channelId);
|
||||
|
||||
let lastViewed = Number.MAX_VALUE;
|
||||
let member = ChannelStore.getMember(channelId);
|
||||
if (member != null) {
|
||||
lastViewed = member.last_viewed_at;
|
||||
}
|
||||
this.setState({currentChannelId: channelId, postLists: postLists});
|
||||
|
||||
let newIndex = channels.indexOf(channelId);
|
||||
if (newIndex === -1) {
|
||||
newIndex = channels.length;
|
||||
channels.push(channelId);
|
||||
postLists[newIndex] = this.getChannelPosts(channelId);
|
||||
}
|
||||
this.setState({
|
||||
currentChannelIndex: newIndex,
|
||||
currentLastViewed: lastViewed,
|
||||
scrollType: PostsView.SCROLL_TYPE_BOTTOM,
|
||||
channels,
|
||||
postLists});
|
||||
}
|
||||
onLeave(id) {
|
||||
let postLists = this.state.postLists;
|
||||
var index = postLists.indexOf(id);
|
||||
onChannelLeave(id) {
|
||||
const postLists = Object.assign({}, this.state.postLists);
|
||||
const channels = this.state.channels.slice();
|
||||
const index = channels.indexOf(id);
|
||||
if (index !== -1) {
|
||||
postLists.splice(index, 1);
|
||||
channels.splice(index, 1);
|
||||
}
|
||||
this.setState({channels, postLists});
|
||||
}
|
||||
onPostsChange() {
|
||||
const channels = this.state.channels;
|
||||
const postLists = Object.assign({}, this.state.postLists);
|
||||
const newPostList = this.getChannelPosts(channels[this.state.currentChannelIndex]);
|
||||
|
||||
postLists[this.state.currentChannelIndex] = newPostList;
|
||||
this.setState({postLists});
|
||||
}
|
||||
getChannelPosts(id) {
|
||||
const postList = PostStore.getPosts(id);
|
||||
|
||||
if (postList != null) {
|
||||
const deletedPosts = PostStore.getUnseenDeletedPosts(id);
|
||||
|
||||
if (deletedPosts && Object.keys(deletedPosts).length > 0) {
|
||||
for (const pid in deletedPosts) {
|
||||
if (deletedPosts.hasOwnProperty(pid)) {
|
||||
postList.posts[pid] = deletedPosts[pid];
|
||||
postList.order.unshift(pid);
|
||||
}
|
||||
}
|
||||
|
||||
postList.order.sort((a, b) => {
|
||||
if (postList.posts[a].create_at > postList.posts[b].create_at) {
|
||||
return -1;
|
||||
}
|
||||
if (postList.posts[a].create_at < postList.posts[b].create_at) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
const pendingPostList = PostStore.getPendingPosts(id);
|
||||
|
||||
if (pendingPostList) {
|
||||
postList.order = pendingPostList.order.concat(postList.order);
|
||||
for (const ppid in pendingPostList.posts) {
|
||||
if (pendingPostList.posts.hasOwnProperty(ppid)) {
|
||||
postList.posts[ppid] = pendingPostList.posts[ppid];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return postList;
|
||||
}
|
||||
loadMorePostsTop() {
|
||||
const postLists = this.state.postLists;
|
||||
const channels = this.state.channels;
|
||||
const currentChannelId = channels[this.state.currentChannelIndex];
|
||||
const currentPostList = postLists[this.state.currentChannelIndex];
|
||||
|
||||
this.setState({numPostsToDisplay: this.state.numPostsToDisplay + Constants.POST_CHUNK_SIZE});
|
||||
|
||||
Client.getPostsPage(
|
||||
currentChannelId,
|
||||
currentPostList.order.length,
|
||||
Constants.POST_CHUNK_SIZE,
|
||||
this.postsLoaded,
|
||||
this.postsLoadedFailure
|
||||
);
|
||||
}
|
||||
postsLoaded(data) {
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.order.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const postLists = this.state.postLists;
|
||||
const currentPostList = postLists[this.state.currentChannelIndex];
|
||||
const channels = this.state.channels;
|
||||
const currentChannelId = channels[this.state.currentChannelIndex];
|
||||
|
||||
var newPostList = {};
|
||||
newPostList.posts = Object.assign(currentPostList.posts, data.posts);
|
||||
newPostList.order = currentPostList.order.concat(data.order);
|
||||
|
||||
AppDispatcher.handleServerAction({
|
||||
type: ActionTypes.RECIEVED_POSTS,
|
||||
id: currentChannelId,
|
||||
post_list: newPostList
|
||||
});
|
||||
|
||||
Client.getProfiles();
|
||||
}
|
||||
postsLoadedFailure(err) {
|
||||
AsyncClient.dispatchError(err, 'getPosts');
|
||||
}
|
||||
handlePostListScroll(atBottom) {
|
||||
if (atBottom) {
|
||||
this.setState({scrollType: PostsView.SCROLL_TYPE_BOTTOM});
|
||||
} else {
|
||||
this.setState({scrollType: PostsView.SCROLL_TYPE_FREE});
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let postLists = this.state.postLists;
|
||||
let channelId = this.state.currentChannelId;
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
if (Utils.areStatesEqual(this.state, nextState)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let postListCtls = [];
|
||||
for (let i = 0; i <= this.state.postLists.length - 1; i++) {
|
||||
return true;
|
||||
}
|
||||
render() {
|
||||
const postLists = this.state.postLists;
|
||||
const channels = this.state.channels;
|
||||
const currentChannelId = channels[this.state.currentChannelIndex];
|
||||
const channel = ChannelStore.get(currentChannelId);
|
||||
|
||||
const postListCtls = [];
|
||||
for (let i = 0; i < channels.length; i++) {
|
||||
const isActive = (channels[i] === currentChannelId);
|
||||
postListCtls.push(
|
||||
<PostList
|
||||
key={'postlistkey' + i}
|
||||
channelId={postLists[i]}
|
||||
isActive={postLists[i] === channelId}
|
||||
<PostsView
|
||||
key={'postsviewkey' + i}
|
||||
isActive={isActive}
|
||||
postList={postLists[i]}
|
||||
scrollType={this.state.scrollType}
|
||||
postListScrolled={this.handlePostListScroll}
|
||||
loadMorePostsTopClicked={this.loadMorePostsTop}
|
||||
numPostsToDisplay={this.state.numPostsToDisplay}
|
||||
introText={channel ? createChannelIntroMessage(channel) : []}
|
||||
messageSeparatorTime={this.state.currentLastViewed}
|
||||
/>
|
||||
);
|
||||
if ((!postLists[i] || !channel) && isActive) {
|
||||
postListCtls.push(
|
||||
<LoadingScreen
|
||||
position='absolute'
|
||||
key='loading'
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
249
web/react/components/posts_view.jsx
Обычный файл
249
web/react/components/posts_view.jsx
Обычный файл
@@ -0,0 +1,249 @@
|
||||
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
const UserStore = require('../stores/user_store.jsx');
|
||||
const Utils = require('../utils/utils.jsx');
|
||||
const Post = require('./post.jsx');
|
||||
|
||||
export default class PostsView extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleScroll = this.handleScroll.bind(this);
|
||||
this.loadMorePostsTop = this.loadMorePostsTop.bind(this);
|
||||
this.postsRerendered = this.postsRerendered.bind(this);
|
||||
this.createPosts = this.createPosts.bind(this);
|
||||
this.scrollToBottom = this.scrollToBottom.bind(this);
|
||||
this.handleResize = this.handleResize.bind(this);
|
||||
}
|
||||
static get SCROLL_TYPE_FREE() {
|
||||
return 1;
|
||||
}
|
||||
static get SCROLL_TYPE_BOTTOM() {
|
||||
return 2;
|
||||
}
|
||||
handleScroll() {
|
||||
const atBottom = ((this.refs.postlist.scrollHeight - this.refs.postlist.scrollTop) === this.refs.postlist.clientHeight);
|
||||
this.props.postListScrolled(atBottom);
|
||||
}
|
||||
loadMorePostsTop() {
|
||||
this.props.loadMorePostsTopClicked();
|
||||
}
|
||||
postsRerendered() {
|
||||
}
|
||||
createPosts(posts, order) {
|
||||
const postCtls = [];
|
||||
let previousPostDay = new Date(0);
|
||||
const userId = UserStore.getCurrentId();
|
||||
|
||||
let renderedLastViewed = false;
|
||||
|
||||
let numToDisplay = this.props.numPostsToDisplay;
|
||||
if (order.length - 1 < numToDisplay) {
|
||||
numToDisplay = order.length - 1;
|
||||
}
|
||||
|
||||
for (let i = numToDisplay; i >= 0; i--) {
|
||||
const post = posts[order[i]];
|
||||
const parentPost = posts[post.parent_id];
|
||||
const prevPost = posts[order[i + 1]];
|
||||
|
||||
let sameUser = false;
|
||||
let sameRoot = false;
|
||||
let hideProfilePic = false;
|
||||
|
||||
if (prevPost) {
|
||||
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);
|
||||
|
||||
// hide the profile pic if:
|
||||
// the previous post was made by the same user as the current post,
|
||||
// the previous post is not a comment,
|
||||
// the current post is not a comment,
|
||||
// the current post is not from a webhook
|
||||
// and the previous post is not from a webhook
|
||||
if ((prevPost.user_id === post.user_id) &&
|
||||
!Utils.isComment(prevPost) &&
|
||||
!Utils.isComment(post) &&
|
||||
(!post.props || !post.props.from_webhook) &&
|
||||
(!prevPost.props || !prevPost.props.from_webhook)) {
|
||||
hideProfilePic = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
var isLastComment = Utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id);
|
||||
|
||||
var postCtl = (
|
||||
<Post
|
||||
key={post.id + 'postKey'}
|
||||
ref={post.id}
|
||||
sameUser={sameUser}
|
||||
sameRoot={sameRoot}
|
||||
post={post}
|
||||
parentPost={parentPost}
|
||||
posts={posts}
|
||||
hideProfilePic={hideProfilePic}
|
||||
isLastComment={isLastComment}
|
||||
resize={this.postsRerendered}
|
||||
/>
|
||||
);
|
||||
|
||||
const currentPostDay = Utils.getDateForUnixTicks(post.create_at);
|
||||
if (currentPostDay.toDateString() !== previousPostDay.toDateString()) {
|
||||
postCtls.push(
|
||||
<div
|
||||
key={currentPostDay.toDateString()}
|
||||
className='date-separator'
|
||||
>
|
||||
<hr className='separator__hr' />
|
||||
<div className='separator__text'>{currentPostDay.toDateString()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (post.user_id !== userId &&
|
||||
this.props.messageSeparatorTime !== 0 &&
|
||||
post.create_at > this.props.messageSeparatorTime &&
|
||||
!renderedLastViewed) {
|
||||
renderedLastViewed = true;
|
||||
|
||||
// Temporary fix to solve ie11 rendering issue
|
||||
let newSeparatorId = '';
|
||||
if (!Utils.isBrowserIE()) {
|
||||
newSeparatorId = 'new_message_' + post.id;
|
||||
}
|
||||
postCtls.push(
|
||||
<div
|
||||
id={newSeparatorId}
|
||||
key='unviewed'
|
||||
className='new-separator'
|
||||
>
|
||||
<hr
|
||||
className='separator__hr'
|
||||
/>
|
||||
<div className='separator__text'>{'New Messages'}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
postCtls.push(postCtl);
|
||||
previousPostDay = currentPostDay;
|
||||
}
|
||||
|
||||
return postCtls;
|
||||
}
|
||||
scrollToBottom() {
|
||||
if (this.props.scrollType === PostsView.SCROLL_TYPE_BOTTOM) {
|
||||
window.requestAnimationFrame(() => {
|
||||
this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
|
||||
});
|
||||
}
|
||||
}
|
||||
handleResize() {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
componentDidMount() {
|
||||
this.scrollToBottom();
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
}
|
||||
componentDidUpdate() {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
shouldComponentUpdate(nextProps) {
|
||||
if (this.props.isActive !== nextProps.isActive) {
|
||||
return true;
|
||||
}
|
||||
if (this.props.postList !== nextProps.postList) {
|
||||
return true;
|
||||
}
|
||||
if (this.props.scrollPost !== nextProps.scrollPost) {
|
||||
return true;
|
||||
}
|
||||
if (this.props.scrollType !== nextProps.scrollType && nextProps.scrollType !== PostsView.SCROLL_TYPE_FREE) {
|
||||
return true;
|
||||
}
|
||||
if (this.props.numPostsToDisplay !== nextProps.numPostsToDisplay) {
|
||||
return true;
|
||||
}
|
||||
if (this.props.messageSeparatorTime !== nextProps.messageSeparatorTime) {
|
||||
return true;
|
||||
}
|
||||
if (!Utils.areStatesEqual(this.props.postList, nextProps.postList)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
render() {
|
||||
let posts = [];
|
||||
let order = [];
|
||||
let moreMessages;
|
||||
let postElements;
|
||||
let activeClass = 'inactive';
|
||||
if (this.props.postList != null) {
|
||||
posts = this.props.postList.posts;
|
||||
order = this.props.postList.order;
|
||||
|
||||
// Create intro message or top loadmore link
|
||||
if (order.length >= this.props.numPostsToDisplay) {
|
||||
moreMessages = (
|
||||
<a
|
||||
ref='loadmore'
|
||||
className='more-messages-text theme'
|
||||
href='#'
|
||||
onClick={this.loadMorePostsTop}
|
||||
>
|
||||
{'Load more messages'}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
moreMessages = this.props.introText;
|
||||
}
|
||||
|
||||
// Create post elements
|
||||
postElements = this.createPosts(posts, order);
|
||||
|
||||
// Show ourselves if we are marked active
|
||||
if (this.props.isActive) {
|
||||
activeClass = '';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref='postlist'
|
||||
className={'post-list-holder-by-time ' + activeClass}
|
||||
onScroll={this.handleScroll}
|
||||
>
|
||||
<div className='post-list__table'>
|
||||
<div
|
||||
ref='postlistcontent'
|
||||
className='post-list__content'
|
||||
>
|
||||
{moreMessages}
|
||||
{postElements}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
PostsView.defaultProps = {
|
||||
};
|
||||
|
||||
PostsView.propTypes = {
|
||||
isActive: React.PropTypes.bool,
|
||||
postList: React.PropTypes.object.isRequired,
|
||||
scrollPost: React.PropTypes.string,
|
||||
scrollType: React.PropTypes.number,
|
||||
postListScrolled: React.PropTypes.func.isRequired,
|
||||
loadMorePostsTopClicked: React.PropTypes.func.isRequired,
|
||||
numPostsToDisplay: React.PropTypes.number,
|
||||
introText: React.PropTypes.element,
|
||||
messageSeparatorTime: React.PropTypes.number
|
||||
};
|
||||
218
web/react/utils/channel_intro_mssages.jsx
Обычный файл
218
web/react/utils/channel_intro_mssages.jsx
Обычный файл
@@ -0,0 +1,218 @@
|
||||
|
||||
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
const Utils = require('./utils.jsx');
|
||||
const UserProfile = require('../components/user_profile.jsx');
|
||||
const ChannelStore = require('../stores/channel_store.jsx');
|
||||
const Constants = require('../utils/constants.jsx');
|
||||
const TeamStore = require('../stores/team_store.jsx');
|
||||
|
||||
export function createChannelIntroMessage(channel) {
|
||||
if (channel.type === 'D') {
|
||||
return createDMIntroMessage(channel);
|
||||
} else if (ChannelStore.isDefault(channel)) {
|
||||
return createDefaultIntroMessage(channel);
|
||||
} else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
|
||||
return createOffTopicIntroMessage(channel);
|
||||
} else if (channel.type === 'O' || channel.type === 'P') {
|
||||
return createStandardIntroMessage(channel);
|
||||
}
|
||||
}
|
||||
|
||||
export function createDMIntroMessage(channel) {
|
||||
var teammate = Utils.getDirectTeammate(channel.id);
|
||||
|
||||
if (teammate) {
|
||||
var teammateName = teammate.username;
|
||||
if (teammate.nickname.length > 0) {
|
||||
teammateName = teammate.nickname;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='channel-intro'>
|
||||
<div className='post-profile-img__container channel-intro-img'>
|
||||
<img
|
||||
className='post-profile-img'
|
||||
src={'/api/v1/users/' + teammate.id + '/image?time=' + teammate.update_at + '&' + Utils.getSessionIndex()}
|
||||
height='50'
|
||||
width='50'
|
||||
/>
|
||||
</div>
|
||||
<div className='channel-intro-profile'>
|
||||
<strong>
|
||||
<UserProfile userId={teammate.id} />
|
||||
</strong>
|
||||
</div>
|
||||
<p className='channel-intro-text'>
|
||||
{'This is the start of your direct message history with ' + teammateName + '.'}<br/>
|
||||
{'Direct messages and files shared here are not shown to people outside this area.'}
|
||||
</p>
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#edit_channel'
|
||||
data-header={channel.header}
|
||||
data-title={channel.display_name}
|
||||
data-channelid={channel.id}
|
||||
>
|
||||
<i className='fa fa-pencil'></i>{'Set a header'}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='channel-intro'>
|
||||
<p className='channel-intro-text'>{'This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.'}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function createOffTopicIntroMessage(channel) {
|
||||
return (
|
||||
<div className='channel-intro'>
|
||||
<h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
|
||||
<p className='channel-intro__content'>
|
||||
{'This is the start of ' + channel.display_name + ', a channel for non-work-related conversations.'}
|
||||
<br/>
|
||||
</p>
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#edit_channel'
|
||||
data-header={channel.header}
|
||||
data-title={channel.display_name}
|
||||
data-channelid={channel.id}
|
||||
>
|
||||
<i className='fa fa-pencil'></i>{'Set a header'}
|
||||
</a>
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#channel_invite'
|
||||
>
|
||||
<i className='fa fa-user-plus'></i>{'Invite others to this channel'}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function createDefaultIntroMessage(channel) {
|
||||
const team = TeamStore.getCurrent();
|
||||
let inviteModalLink;
|
||||
if (team.type === Constants.INVITE_TEAM) {
|
||||
inviteModalLink = (
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#invite_member'
|
||||
>
|
||||
<i className='fa fa-user-plus'></i>{'Invite others to this team'}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
inviteModalLink = (
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#get_link'
|
||||
data-title='Team Invite'
|
||||
data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + team.id}
|
||||
>
|
||||
<i className='fa fa-user-plus'></i>{'Invite others to this team'}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='channel-intro'>
|
||||
<h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
|
||||
<p className='channel-intro__content'>
|
||||
<strong>{'Welcome to ' + channel.display_name + '!'}</strong>
|
||||
<br/><br/>
|
||||
{'This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
|
||||
</p>
|
||||
{inviteModalLink}
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#edit_channel'
|
||||
data-header={channel.header}
|
||||
data-title={channel.display_name}
|
||||
data-channelid={channel.id}
|
||||
>
|
||||
<i className='fa fa-pencil'></i>{'Set a header'}
|
||||
</a>
|
||||
<br/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function createStandardIntroMessage(channel) {
|
||||
var uiName = channel.display_name;
|
||||
var creatorName = '';
|
||||
|
||||
var uiType;
|
||||
var memberMessage;
|
||||
if (channel.type === 'P') {
|
||||
uiType = 'private group';
|
||||
memberMessage = ' Only invited members can see this private group.';
|
||||
} else {
|
||||
uiType = 'channel';
|
||||
memberMessage = ' Any member can join and read this channel.';
|
||||
}
|
||||
|
||||
var createMessage;
|
||||
if (creatorName === '') {
|
||||
createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + Utils.displayDate(channel.create_at) + '.';
|
||||
} 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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='channel-intro'>
|
||||
<h4 className='channel-intro__title'>{'Beginning of ' + uiName}</h4>
|
||||
<p className='channel-intro__content'>
|
||||
{createMessage}
|
||||
{memberMessage}
|
||||
<br/>
|
||||
</p>
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#edit_channel'
|
||||
data-header={channel.header}
|
||||
data-title={channel.display_name}
|
||||
data-channelid={channel.id}
|
||||
>
|
||||
<i className='fa fa-pencil'></i>{'Set a header'}
|
||||
</a>
|
||||
<a
|
||||
className='intro-links'
|
||||
href='#'
|
||||
data-toggle='modal'
|
||||
data-target='#channel_invite'
|
||||
>
|
||||
<i className='fa fa-user-plus'></i>{'Invite others to this ' + uiType}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Ссылка в новой задаче
Block a user