Refactoring center channel
Этот коммит содержится в:
Christopher Speller
@@ -57,14 +57,14 @@
|
|||||||
},
|
},
|
||||||
"EmailSettings": {
|
"EmailSettings": {
|
||||||
"EnableSignUpWithEmail": true,
|
"EnableSignUpWithEmail": true,
|
||||||
"SendEmailNotifications": false,
|
"SendEmailNotifications": true,
|
||||||
"RequireEmailVerification": false,
|
"RequireEmailVerification": false,
|
||||||
"FeedbackName": "",
|
"FeedbackName": "",
|
||||||
"FeedbackEmail": "",
|
"FeedbackEmail": "",
|
||||||
"SMTPUsername": "",
|
"SMTPUsername": "",
|
||||||
"SMTPPassword": "",
|
"SMTPPassword": "",
|
||||||
"SMTPServer": "",
|
"SMTPServer": "localhost",
|
||||||
"SMTPPort": "",
|
"SMTPPort": "25",
|
||||||
"ConnectionSecurity": "",
|
"ConnectionSecurity": "",
|
||||||
"InviteSalt": "bjlSR4QqkXFBr7TP4oDzlfZmcNuH9YoS",
|
"InviteSalt": "bjlSR4QqkXFBr7TP4oDzlfZmcNuH9YoS",
|
||||||
"PasswordResetSalt": "vZ4DcKyVVRlKHHJpexcuXzojkE5PZ5eL",
|
"PasswordResetSalt": "vZ4DcKyVVRlKHHJpexcuXzojkE5PZ5eL",
|
||||||
|
|||||||
@@ -229,6 +229,5 @@ func (o *Team) PreExport() {
|
|||||||
|
|
||||||
func (o *Team) Sanitize() {
|
func (o *Team) Sanitize() {
|
||||||
o.Email = ""
|
o.Email = ""
|
||||||
o.Type = ""
|
|
||||||
o.AllowedDomains = ""
|
o.AllowedDomains = ""
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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.
|
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
|
||||||
// See License.txt for license information.
|
// 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 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 {
|
export default class PostListContainer extends React.Component {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
this.onChange = this.onChange.bind(this);
|
this.onChannelChange = this.onChannelChange.bind(this);
|
||||||
this.onLeave = this.onLeave.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) {
|
if (currentChannelId) {
|
||||||
this.state = {currentChannelId: currentChannelId, postLists: [currentChannelId]};
|
Object.assign(state, {
|
||||||
|
currentChannelIndex: 0,
|
||||||
|
channels: [currentChannelId],
|
||||||
|
postLists: [this.getChannelPosts(currentChannelId)]
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
this.state = {currentChannelId: null, postLists: []};
|
Object.assign(state, {
|
||||||
|
currentChannelIndex: null,
|
||||||
|
channels: [],
|
||||||
|
postLists: []
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.state = state;
|
||||||
}
|
}
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
ChannelStore.addChangeListener(this.onChange);
|
ChannelStore.addChangeListener(this.onChannelChange);
|
||||||
ChannelStore.addLeaveListener(this.onLeave);
|
ChannelStore.addLeaveListener(this.onChannelLeave);
|
||||||
|
PostStore.addChangeListener(this.onPostsChange);
|
||||||
}
|
}
|
||||||
onChange() {
|
componentWillUnmount() {
|
||||||
let channelId = ChannelStore.getCurrentId();
|
ChannelStore.removeChangeListener(this.onChannelChange);
|
||||||
if (channelId === this.state.currentChannelId) {
|
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;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let postLists = this.state.postLists;
|
PostStore.clearUnseenDeletedPosts(channelId);
|
||||||
if (postLists.indexOf(channelId) === -1) {
|
|
||||||
postLists.push(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) {
|
onChannelLeave(id) {
|
||||||
let postLists = this.state.postLists;
|
const postLists = Object.assign({}, this.state.postLists);
|
||||||
var index = postLists.indexOf(id);
|
const channels = this.state.channels.slice();
|
||||||
|
const index = channels.indexOf(id);
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
postLists.splice(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() {
|
shouldComponentUpdate(nextProps, nextState) {
|
||||||
let postLists = this.state.postLists;
|
if (Utils.areStatesEqual(this.state, nextState)) {
|
||||||
let channelId = this.state.currentChannelId;
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
let postListCtls = [];
|
return true;
|
||||||
for (let i = 0; i <= this.state.postLists.length - 1; i++) {
|
}
|
||||||
|
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(
|
postListCtls.push(
|
||||||
<PostList
|
<PostsView
|
||||||
key={'postlistkey' + i}
|
key={'postsviewkey' + i}
|
||||||
channelId={postLists[i]}
|
isActive={isActive}
|
||||||
isActive={postLists[i] === channelId}
|
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 (
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -441,7 +441,10 @@ body.ios {
|
|||||||
&.post-profile-img__container {
|
&.post-profile-img__container {
|
||||||
float: left;
|
float: left;
|
||||||
.post-profile-img {
|
.post-profile-img {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
vertical-align: inherit;
|
||||||
@include border-radius(50px);
|
@include border-radius(50px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Ссылка в новой задаче
Block a user