+
768}
+ isMobile={Utils.isMobile()}
createAt={topPostCreateAt}
/>
768) {
- return ;
- }
-
- let className = 'post-list__arrows';
- if (isScrolling && !atBottom) {
- className += ' scrolling';
- }
-
- return (
- {
- // Do Nothing
- }}
- showMoreMessagesTop={!this.state.atTop[this.state.currentChannelIndex]}
- showMoreMessagesBottom={false}
- channel={channel}
- messageSeparatorTime={this.state.currentLastViewed}
- />
- );
- if (!postLists[i] && isActive) {
- postListCtls.push(
- ;
+ loading = ;
} else if (post.state === Constants.POST_LOADING) {
postClass += ' post-waiting';
loading = (
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 02fc4fc59b..051d68f34b 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -6,11 +6,13 @@ import UserProfile from './user_profile.jsx';
import UserStore from 'stores/user_store.jsx';
import TeamStore from 'stores/team_store.jsx';
import * as TextFormatting from 'utils/text_formatting.jsx';
-import * as Utils from 'utils/utils.jsx';
import FileAttachmentList from './file_attachment_list.jsx';
-import PostBodyAdditionalContent from './post_body_additional_content.jsx';
+import PostBodyAdditionalContent from 'components/post_view/components/post_body_additional_content.jsx';
import * as GlobalActions from 'actions/global_actions.jsx';
+import * as Utils from 'utils/utils.jsx';
+import * as PostUtils from 'utils/post_utils.jsx';
+
import Constants from 'utils/constants.jsx';
import {FormattedMessage, FormattedDate} from 'react-intl';
@@ -56,7 +58,7 @@ export default class RhsRootPost extends React.Component {
}
var systemMessageClass = '';
- if (Utils.isSystemMessage(post)) {
+ if (PostUtils.isSystemMessage(post)) {
systemMessageClass = 'post--system';
}
@@ -188,7 +190,7 @@ export default class RhsRootPost extends React.Component {
}
botIndicator = {'BOT'} ;
- } else if (Utils.isSystemMessage(post)) {
+ } else if (PostUtils.isSystemMessage(post)) {
userProfile = (
diff --git a/webapp/stores/notification_store.jsx b/webapp/stores/notification_store.jsx
index 7d7039780d..202b24432f 100644
--- a/webapp/stores/notification_store.jsx
+++ b/webapp/stores/notification_store.jsx
@@ -7,6 +7,7 @@ import Constants from 'utils/constants.jsx';
import UserStore from './user_store.jsx';
import ChannelStore from './channel_store.jsx';
import * as Utils from 'utils/utils.jsx';
+import * as PostUtils from 'utils/post_utils.jsx';
const ActionTypes = Constants.ActionTypes;
const CHANGE_EVENT = 'change';
@@ -26,7 +27,7 @@ class NotificationStoreClass extends EventEmitter {
handleRecievedPost(post, msgProps) {
// Send desktop notification
- if ((UserStore.getCurrentId() !== post.user_id || post.props.from_webhook === 'true') && !Utils.isSystemMessage(post)) {
+ if ((UserStore.getCurrentId() !== post.user_id || post.props.from_webhook === 'true') && !PostUtils.isSystemMessage(post)) {
let mentions = [];
if (msgProps.mentions) {
mentions = JSON.parse(msgProps.mentions);
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 0e2ae07eaf..f1af112a99 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -161,6 +161,14 @@ export default {
EPHEMERAL_MESSAGE: 'ephemeral_message'
},
+ ScrollTypes: {
+ FREE: 1,
+ BOTTOM: 2,
+ SIDEBBAR_OPEN: 3,
+ NEW_MESSAGE: 4,
+ POST: 5
+ },
+
//SPECIAL_MENTIONS: ['all', 'channel'],
SPECIAL_MENTIONS: ['channel'],
CHARACTER_LIMIT: 4000,
@@ -204,6 +212,9 @@ export default {
WEB_VIDEO_HEIGHT: 480,
MOBILE_VIDEO_WIDTH: 480,
MOBILE_VIDEO_HEIGHT: 360,
+ MOBILE_SCREEN_WIDTH: 768,
+ SCROLL_DELAY: 2000,
+ SCROLL_PAGE_FRACTION: 3,
DEFAULT_CHANNEL: 'town-square',
DEFAULT_CHANNEL_UI_NAME: 'Town Square',
OFFTOPIC_CHANNEL: 'off-topic',
@@ -738,5 +749,6 @@ export default {
DEFAULT_WEBHOOK_LOGO: logoWebhook,
MHPNS: 'https://push.mattermost.com',
MTPNS: 'http://push-test.mattermost.com',
- BOT_NAME: 'BOT'
+ BOT_NAME: 'BOT',
+ POST_COLLAPSE_TIMEOUT: 1000 * 60 * 5 // five minutes
};
diff --git a/webapp/utils/post_utils.jsx b/webapp/utils/post_utils.jsx
new file mode 100644
index 0000000000..f5111d72da
--- /dev/null
+++ b/webapp/utils/post_utils.jsx
@@ -0,0 +1,32 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import Client from 'utils/web_client.jsx';
+
+import Constants from 'utils/constants.jsx';
+
+export function isSystemMessage(post) {
+ return post.type && (post.type.lastIndexOf(Constants.SYSTEM_MESSAGE_PREFIX) === 0);
+}
+
+export function isComment(post) {
+ if ('root_id' in post) {
+ return post.root_id !== '' && post.root_id != null;
+ }
+ return false;
+}
+
+export function getProfilePicSrcForPost(post, timestamp) {
+ let src = Client.getUsersRoute() + '/' + post.user_id + '/image?time=' + timestamp;
+ if (post.props && post.props.from_webhook && global.window.mm_config.EnablePostIconOverride === 'true') {
+ if (post.props.override_icon_url) {
+ src = post.props.override_icon_url;
+ } else {
+ src = Constants.DEFAULT_WEBHOOK_LOGO;
+ }
+ } else if (isSystemMessage(post)) {
+ src = Constants.SYSTEM_MESSAGE_PROFILE_IMAGE;
+ }
+
+ return src;
+}
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 978f231df6..9b0e370bf9 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -909,14 +909,7 @@ export function isValidUsername(name) {
}
export function isMobile() {
- return window.innerWidth <= 768;
-}
-
-export function isComment(post) {
- if ('root_id' in post) {
- return post.root_id !== '' && post.root_id != null;
- }
- return false;
+ return window.innerWidth <= Constants.MOBILE_SCREEN_WIDTH;
}
export function getDirectTeammate(channelId) {
@@ -1315,10 +1308,6 @@ export function isFeatureEnabled(feature) {
return PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, Constants.FeatureTogglePrefix + feature.label);
}
-export function isSystemMessage(post) {
- return post.type && (post.type.lastIndexOf(Constants.SYSTEM_MESSAGE_PREFIX) === 0);
-}
-
export function fillArray(value, length) {
const arr = [];
@@ -1379,18 +1368,3 @@ export function localizeMessage(id, defaultMessage) {
export function mod(a, b) {
return ((a % b) + b) % b;
}
-
-export function getProfilePicSrcForPost(post, timestamp) {
- let src = Client.getUsersRoute() + '/' + post.user_id + '/image?time=' + timestamp;
- if (post.props && post.props.from_webhook && global.window.mm_config.EnablePostIconOverride === 'true') {
- if (post.props.override_icon_url) {
- src = post.props.override_icon_url;
- } else {
- src = Constants.DEFAULT_WEBHOOK_LOGO;
- }
- } else if (isSystemMessage(post)) {
- src = Constants.SYSTEM_MESSAGE_PROFILE_IMAGE;
- }
-
- return src;
-}
-
-
- );
-}
-
-ScrollToBottomArrows.propTypes = {
- isScrolling: React.PropTypes.bool.isRequired,
- atBottom: React.PropTypes.bool.isRequired,
- onClick: React.PropTypes.func.isRequired
-};
diff --git a/webapp/components/providers.json b/webapp/components/post_view/components/providers.json
similarity index 100%
rename from webapp/components/providers.json
rename to webapp/components/post_view/components/providers.json
diff --git a/webapp/components/post_view/components/scroll_to_bottom_arrows.jsx b/webapp/components/post_view/components/scroll_to_bottom_arrows.jsx
new file mode 100644
index 0000000000..461ca3358a
--- /dev/null
+++ b/webapp/components/post_view/components/scroll_to_bottom_arrows.jsx
@@ -0,0 +1,37 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import $ from 'jquery';
+
+import Constants from 'utils/constants.jsx';
+
+import React from 'react';
+
+export default class ScrollToBottomArrows extends React.Component {
+ render() {
+ // only show on mobile
+ if ($(window).width() > 768) {
+ return ;
+ }
+
+ let className = 'post-list__arrows';
+ if (this.props.isScrolling && !this.props.atBottom) {
+ className += ' scrolling';
+ }
+
+ return (
+
+
+
+ );
+ }
+}
+
+ScrollToBottomArrows.propTypes = {
+ isScrolling: React.PropTypes.bool.isRequired,
+ atBottom: React.PropTypes.bool.isRequired,
+ onClick: React.PropTypes.func.isRequired
+};
diff --git a/webapp/components/post_focus_view.jsx b/webapp/components/post_view/post_focus_view_controller.jsx
similarity index 56%
rename from webapp/components/post_focus_view.jsx
rename to webapp/components/post_view/post_focus_view_controller.jsx
index 30a2f9d72e..7c1da65664 100644
--- a/webapp/components/post_focus_view.jsx
+++ b/webapp/components/post_view/post_focus_view_controller.jsx
@@ -1,11 +1,15 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
-import PostsView from './posts_view.jsx';
+import PostList from './components/post_list.jsx';
+import LoadingScreen from 'components/loading_screen.jsx';
import PostStore from 'stores/post_store.jsx';
+import UserStore from 'stores/user_store.jsx';
import ChannelStore from 'stores/channel_store.jsx';
-import * as GlobalActions from 'actions/global_actions.jsx';
+
+import Constants from 'utils/constants.jsx';
+const ScrollTypes = Constants.ScrollTypes;
import React from 'react';
@@ -15,17 +19,24 @@ export default class PostFocusView extends React.Component {
this.onChannelChange = this.onChannelChange.bind(this);
this.onPostsChange = this.onPostsChange.bind(this);
- this.handlePostsViewScroll = this.handlePostsViewScroll.bind(this);
- this.loadMorePostsTop = this.loadMorePostsTop.bind(this);
- this.loadMorePostsBottom = this.loadMorePostsBottom.bind(this);
+ this.onUserChange = this.onUserChange.bind(this);
+ this.onPostListScroll = this.onPostListScroll.bind(this);
const focusedPostId = PostStore.getFocusedPostId();
+ const channel = ChannelStore.getCurrent();
+ let profiles = UserStore.getProfiles();
+ if (channel && channel.type === Constants.DM_CHANNEL) {
+ profiles = Object.assign({}, profiles, UserStore.getDirectProfiles());
+ }
+
this.state = {
- scrollType: PostsView.SCROLL_TYPE_POST,
+ postList: PostStore.getVisiblePosts(focusedPostId),
+ currentUser: UserStore.getCurrentUser(),
+ profiles,
+ scrollType: ScrollTypes.POST,
currentChannel: ChannelStore.getCurrentId().slice(),
scrollPostId: focusedPostId,
- postList: PostStore.getVisiblePosts(focusedPostId),
atTop: PostStore.getVisibilityAtTop(focusedPostId),
atBottom: PostStore.getVisibilityAtBottom(focusedPostId)
};
@@ -34,11 +45,13 @@ export default class PostFocusView extends React.Component {
componentDidMount() {
ChannelStore.addChangeListener(this.onChannelChange);
PostStore.addChangeListener(this.onPostsChange);
+ UserStore.addChangeListener(this.onUserChange);
}
componentWillUnmount() {
ChannelStore.removeChangeListener(this.onChannelChange);
PostStore.removeChangeListener(this.onPostsChange);
+ UserStore.removeChangeListener(this.onUserChange);
}
onChannelChange() {
@@ -46,7 +59,7 @@ export default class PostFocusView extends React.Component {
if (this.state.currentChannel !== currentChannel) {
this.setState({
currentChannel: currentChannel.slice(),
- scrollType: PostsView.SCROLL_TYPE_POST
+ scrollType: ScrollTypes.POST
});
}
}
@@ -65,42 +78,50 @@ export default class PostFocusView extends React.Component {
});
}
- handlePostsViewScroll() {
- this.setState({scrollType: PostsView.SCROLL_TYPE_FREE});
+ onUserChange() {
+ const channel = ChannelStore.getCurrent();
+ let profiles = UserStore.getProfiles();
+ if (channel && channel.type === Constants.DM_CHANNEL) {
+ profiles = Object.assign({}, profiles, UserStore.getDirectProfiles());
+ }
+ this.setState({currentUser: UserStore.getCurrentUser(), profiles: JSON.parse(JSON.stringify(profiles))});
}
- loadMorePostsTop() {
- GlobalActions.emitLoadMorePostsFocusedTopEvent();
- }
-
- loadMorePostsBottom() {
- GlobalActions.emitLoadMorePostsFocusedBottomEvent();
+ onPostListScroll() {
+ this.setState({scrollType: ScrollTypes.FREE});
}
render() {
const postsToHighlight = {};
postsToHighlight[this.state.scrollPostId] = true;
- if (!this.state.postList) {
- return null;
+ let content;
+ if (this.state.postList == null) {
+ content = (
+
-
);
}
diff --git a/webapp/components/post_view/post_view_cache.jsx b/webapp/components/post_view/post_view_cache.jsx
new file mode 100644
index 0000000000..8876ae4613
--- /dev/null
+++ b/webapp/components/post_view/post_view_cache.jsx
@@ -0,0 +1,85 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information
+
+import PostViewController from './post_view_controller.jsx';
+
+import ChannelStore from 'stores/channel_store.jsx';
+
+import React from 'react';
+
+const MAXIMUM_CACHED_VIEWS = 5;
+
+export default class PostViewCache extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.onChannelChange = this.onChannelChange.bind(this);
+
+ const channel = ChannelStore.getCurrent();
+
+ this.state = {
+ currentChannelId: channel.id,
+ channels: [channel]
+ };
+ }
+
+ componentDidMount() {
+ ChannelStore.addChangeListener(this.onChannelChange);
+ }
+
+ componentWillUnmount() {
+ ChannelStore.removeChangeListener(this.onChannelChange);
+ }
+
+ onChannelChange() {
+ const channels = Object.assign([], this.state.channels);
+ const currentChannel = ChannelStore.getCurrent();
+
+ if (currentChannel == null) {
+ return;
+ }
+
+ // make sure current channel really changed
+ if (currentChannel.id === this.state.currentChannelId) {
+ return;
+ }
+
+ if (channels.length > MAXIMUM_CACHED_VIEWS) {
+ channels.shift();
+ }
+
+ const index = channels.map((c) => c.id).indexOf(currentChannel.id);
+ if (index !== -1) {
+ channels.splice(index, 1);
+ }
+
+ channels.push(currentChannel);
+
+ this.setState({
+ currentChannelId: currentChannel.id,
+ channels
+ });
+ }
+
+ render() {
+ const channels = this.state.channels;
+ const currentChannelId = this.state.currentChannelId;
+
+ let postViews = [];
+ for (let i = 0; i < channels.length; i++) {
+ postViews.push(
+
+ {postViews}
+
+ );
+ }
+}
diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx
new file mode 100644
index 0000000000..0898a9ce6e
--- /dev/null
+++ b/webapp/components/post_view/post_view_controller.jsx
@@ -0,0 +1,264 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import PostList from './components/post_list.jsx';
+import LoadingScreen from 'components/loading_screen.jsx';
+
+import PreferenceStore from 'stores/preference_store.jsx';
+import UserStore from 'stores/user_store.jsx';
+import PostStore from 'stores/post_store.jsx';
+import ChannelStore from 'stores/channel_store.jsx';
+
+import * as Utils from 'utils/utils.jsx';
+
+import Constants from 'utils/constants.jsx';
+const Preferences = Constants.Preferences;
+const ScrollTypes = Constants.ScrollTypes;
+
+import React from 'react';
+
+export default class PostViewController extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.onPreferenceChange = this.onPreferenceChange.bind(this);
+ this.onUserChange = this.onUserChange.bind(this);
+ this.onPostsChange = this.onPostsChange.bind(this);
+ this.onPostsViewJumpRequest = this.onPostsViewJumpRequest.bind(this);
+ this.onPostListScroll = this.onPostListScroll.bind(this);
+ this.onActivate = this.onActivate.bind(this);
+ this.onDeactivate = this.onDeactivate.bind(this);
+
+ const channel = props.channel;
+ let profiles = UserStore.getProfiles();
+ if (channel && channel.type === Constants.DM_CHANNEL) {
+ profiles = Object.assign({}, profiles, UserStore.getDirectProfiles());
+ }
+
+ let lastViewed = Number.MAX_VALUE;
+ const member = ChannelStore.getMember(channel.id);
+ if (member != null) {
+ lastViewed = member.last_viewed_at;
+ }
+
+ this.state = {
+ channel,
+ postList: PostStore.getVisiblePosts(channel.id),
+ currentUser: UserStore.getCurrentUser(),
+ profiles,
+ atTop: PostStore.getVisibilityAtTop(channel.id),
+ lastViewed,
+ scrollType: ScrollTypes.BOTTOM,
+ displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
+ displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
+ compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT
+ };
+ }
+
+ componentDidMount() {
+ if (this.props.active) {
+ this.onActivate();
+ }
+ }
+
+ componentWillUnmount() {
+ if (this.props.active) {
+ this.onDeactivate();
+ }
+ }
+
+ onPreferenceChange() {
+ this.setState({
+ displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
+ displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
+ compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT
+ });
+ }
+
+ onUserChange() {
+ const channel = this.state.channel;
+ let profiles = UserStore.getProfiles();
+ if (channel && channel.type === Constants.DM_CHANNEL) {
+ profiles = Object.assign({}, profiles, UserStore.getDirectProfiles());
+ }
+ this.setState({currentUser: UserStore.getCurrentUser(), profiles: JSON.parse(JSON.stringify(profiles))});
+ }
+
+ onPostsChange() {
+ this.setState({
+ postList: JSON.parse(JSON.stringify(PostStore.getVisiblePosts(this.state.channel.id))),
+ atTop: PostStore.getVisibilityAtTop(this.state.channel.id)
+ });
+ }
+
+ onActivate() {
+ PreferenceStore.addChangeListener(this.onPreferenceChange);
+ UserStore.addChangeListener(this.onUserChange);
+ PostStore.addChangeListener(this.onPostsChange);
+ PostStore.addPostsViewJumpListener(this.onPostsViewJumpRequest);
+ }
+
+ onDeactivate() {
+ PreferenceStore.removeChangeListener(this.onPreferenceChange);
+ UserStore.removeChangeListener(this.onUserChange);
+ PostStore.removeChangeListener(this.onPostsChange);
+ PostStore.removePostsViewJumpListener(this.onPostsViewJumpRequest);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (this.props.active && !nextProps.active) {
+ this.onDeactivate();
+ } else if (!this.props.active && nextProps.active) {
+ this.onActivate();
+
+ const channel = nextProps.channel;
+
+ let lastViewed = Number.MAX_VALUE;
+ const member = ChannelStore.getMember(channel.id);
+ if (member != null) {
+ lastViewed = member.last_viewed_at;
+ }
+
+ let profiles = UserStore.getProfiles();
+ if (channel && channel.type === Constants.DM_CHANNEL) {
+ profiles = Object.assign({}, profiles, UserStore.getDirectProfiles());
+ }
+
+ this.setState({
+ channel,
+ lastViewed,
+ profiles: JSON.parse(JSON.stringify(profiles)),
+ postList: JSON.parse(JSON.stringify(PostStore.getVisiblePosts(channel.id))),
+ displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
+ displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
+ compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
+ scrollType: ScrollTypes.BOTTOM
+ });
+ }
+ }
+
+ onPostsViewJumpRequest(type, postId) {
+ switch (type) {
+ case Constants.PostsViewJumpTypes.BOTTOM:
+ this.setState({scrollType: ScrollTypes.BOTTOM});
+ break;
+ case Constants.PostsViewJumpTypes.POST:
+ this.setState({
+ scrollType: ScrollTypes.POST,
+ scrollPostId: postId
+ });
+ break;
+ case Constants.PostsViewJumpTypes.SIDEBAR_OPEN:
+ this.setState({scrollType: ScrollTypes.SIDEBAR_OPEN});
+ break;
+ }
+ }
+
+ onPostListScroll(atBottom) {
+ if (atBottom) {
+ this.setState({scrollType: ScrollTypes.BOTTOM});
+ } else {
+ this.setState({scrollType: ScrollTypes.FREE});
+ }
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ if (nextProps.active !== this.props.active) {
+ return true;
+ }
+
+ if (nextState.atTop !== this.state.atTop) {
+ return true;
+ }
+
+ if (nextState.displayNameType !== this.state.displayNameType) {
+ return true;
+ }
+
+ if (nextState.displayPostsInCenter !== this.state.displayPostsInCenter) {
+ return true;
+ }
+
+ if (nextState.compactDisplay !== this.state.compactDisplay) {
+ return true;
+ }
+
+ if (nextState.lastViewed !== this.state.lastViewed) {
+ return true;
+ }
+
+ if (nextState.showMoreMessagesTop !== this.state.showMoreMessagesTop) {
+ return true;
+ }
+
+ if (nextState.scrollType !== this.state.scrollType) {
+ return true;
+ }
+
+ if (nextState.scrollPostId !== this.state.scrollPostId) {
+ return true;
+ }
+
+ if (nextProps.channel.id !== this.props.channel.id) {
+ return true;
+ }
+
+ if (!Utils.areObjectsEqual(nextState.currentUser, this.state.currentUser)) {
+ return true;
+ }
+
+ if (!Utils.areObjectsEqual(nextState.postList, this.state.postList)) {
+ return true;
+ }
+
+ if (!Utils.areObjectsEqual(nextState.profiles, this.state.profiles)) {
+ return true;
+ }
+
+ return false;
+ }
+
+ render() {
+ let content;
+ if (this.state.postList == null) {
+ content = (
+
+ {content}
+
+ );
+ }
+}
+
+PostViewController.propTypes = {
+ channel: React.PropTypes.object,
+ active: React.PropTypes.bool
+};
diff --git a/webapp/components/posts_view_container.jsx b/webapp/components/posts_view_container.jsx
deleted file mode 100644
index 3f8a44cc3d..0000000000
--- a/webapp/components/posts_view_container.jsx
+++ /dev/null
@@ -1,217 +0,0 @@
-// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import $ from 'jquery';
-
-import PostsView from './posts_view.jsx';
-import LoadingScreen from './loading_screen.jsx';
-
-import ChannelStore from 'stores/channel_store.jsx';
-import PostStore from 'stores/post_store.jsx';
-
-import * as GlobalActions from 'actions/global_actions.jsx';
-
-import Constants from 'utils/constants.jsx';
-
-import React from 'react';
-
-const MAXIMUM_CACHED_VIEWS = 3;
-
-export default class PostsViewContainer extends React.Component {
- constructor() {
- super();
-
- this.onChannelChange = this.onChannelChange.bind(this);
- this.onChannelLeave = this.onChannelLeave.bind(this);
- this.onPostsChange = this.onPostsChange.bind(this);
- this.handlePostsViewScroll = this.handlePostsViewScroll.bind(this);
- this.loadMorePostsTop = this.loadMorePostsTop.bind(this);
- this.handlePostsViewJumpRequest = this.handlePostsViewJumpRequest.bind(this);
-
- const currentChannelId = ChannelStore.getCurrentId();
- const state = {
- scrollType: PostsView.SCROLL_TYPE_BOTTOM,
- scrollPost: null
- };
- if (currentChannelId) {
- let lastViewed = Date.now();
- const member = ChannelStore.getMember(currentChannelId);
- if (member) {
- lastViewed = member.last_viewed_at;
- }
-
- Object.assign(state, {
- currentChannelIndex: 0,
- channels: [currentChannelId],
- postLists: [this.getChannelPosts(currentChannelId)],
- atTop: [PostStore.getVisibilityAtTop(currentChannelId)],
- currentLastViewed: lastViewed
- });
- } else {
- Object.assign(state, {
- currentChannelIndex: null,
- channels: [],
- postLists: [],
- atTop: [],
- currentLastViewed: Date.now()
- });
- }
-
- state.showInviteModal = false;
- this.state = state;
- }
- componentDidMount() {
- ChannelStore.addChangeListener(this.onChannelChange);
- ChannelStore.addLeaveListener(this.onChannelLeave);
- PostStore.addChangeListener(this.onPostsChange);
- PostStore.addPostsViewJumpListener(this.handlePostsViewJumpRequest);
- $('body').addClass('app__body');
- }
- componentWillUnmount() {
- ChannelStore.removeChangeListener(this.onChannelChange);
- ChannelStore.removeLeaveListener(this.onChannelLeave);
- PostStore.removeChangeListener(this.onPostsChange);
- PostStore.removePostsViewJumpListener(this.handlePostsViewJumpRequest);
- $('body').removeClass('app__body');
- }
- handlePostsViewJumpRequest(type, post) {
- switch (type) {
- case Constants.PostsViewJumpTypes.BOTTOM:
- this.setState({scrollType: PostsView.SCROLL_TYPE_BOTTOM});
- break;
- case Constants.PostsViewJumpTypes.POST:
- this.setState({
- scrollType: PostsView.SCROLL_TYPE_POST,
- scrollPost: post
- });
- break;
- case Constants.PostsViewJumpTypes.SIDEBAR_OPEN:
- this.setState({scrollType: PostsView.SCROLL_TYPE_SIDEBAR_OPEN});
- break;
- }
- }
- onChannelChange() {
- const postLists = this.state.postLists.slice();
- const atTop = this.state.atTop.slice();
- const channels = this.state.channels.slice();
- const channelId = ChannelStore.getCurrentId();
-
- // Has the channel really changed?
- if (channelId === channels[this.state.currentChannelIndex]) {
- return;
- }
-
- let lastViewed = Number.MAX_VALUE;
- const member = ChannelStore.getMember(channelId);
- if (member != null) {
- lastViewed = member.last_viewed_at;
- }
-
- let newIndex = channels.indexOf(channelId);
- if (newIndex === -1) {
- if (channels.length >= MAXIMUM_CACHED_VIEWS) {
- channels.shift();
- atTop.shift();
- postLists.shift();
- }
-
- newIndex = channels.length;
- channels.push(channelId);
- atTop[newIndex] = PostStore.getVisibilityAtTop(channelId);
- }
-
- // make sure we have the latest posts from the store
- postLists[newIndex] = this.getChannelPosts(channelId);
-
- this.setState({
- currentChannelIndex: newIndex,
- currentLastViewed: lastViewed,
- scrollType: PostsView.SCROLL_TYPE_NEW_MESSAGE,
- channels,
- postLists,
- atTop});
- }
- onChannelLeave(id) {
- const postLists = this.state.postLists.slice();
- const channels = this.state.channels.slice();
- const atTop = this.state.atTop.slice();
- const index = channels.indexOf(id);
- if (index !== -1) {
- postLists.splice(index, 1);
- channels.splice(index, 1);
- atTop.splice(index, 1);
- }
- this.setState({channels, postLists, atTop});
- }
- onPostsChange() {
- const channels = this.state.channels;
- const postLists = this.state.postLists.slice();
- const atTop = this.state.atTop.slice();
- const currentChannelId = channels[this.state.currentChannelIndex];
- const newPostsView = this.getChannelPosts(currentChannelId);
-
- postLists[this.state.currentChannelIndex] = newPostsView;
- atTop[this.state.currentChannelIndex] = PostStore.getVisibilityAtTop(currentChannelId);
- this.setState({postLists, atTop});
- }
- getChannelPosts(id) {
- return PostStore.getVisiblePosts(id);
- }
- loadMorePostsTop() {
- GlobalActions.emitLoadMorePostsEvent();
- }
- handlePostsViewScroll(atBottom) {
- if (atBottom) {
- this.setState({scrollType: PostsView.SCROLL_TYPE_BOTTOM});
- } else {
- this.setState({scrollType: PostsView.SCROLL_TYPE_FREE});
- }
- }
- render() {
- const postLists = this.state.postLists;
- const channels = this.state.channels;
- const currentChannelId = channels[this.state.currentChannelIndex];
- const channel = ChannelStore.get(currentChannelId);
-
- if (!channel) {
- return null;
- }
-
- const postListCtls = [];
- for (let i = 0; i < channels.length; i++) {
- const isActive = (channels[i] === currentChannelId);
- postListCtls.push(
-
- {postListCtls}
-
- );
- }
-}
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index a771803b84..a980a82279 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -3,7 +3,7 @@
import UserProfile from './user_profile.jsx';
import FileAttachmentList from './file_attachment_list.jsx';
-import PendingPostActions from './pending_post_actions.jsx';
+import PendingPostOptions from 'components/post_view/components/pending_post_options.jsx';
import TeamStore from 'stores/team_store.jsx';
import UserStore from 'stores/user_store.jsx';
@@ -168,7 +168,7 @@ export default class RhsComment extends React.Component {
if (post.state === Constants.POST_FAILED) {
postClass += ' post-fail';
- loading =