summaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/react/components/post_list.jsx412
1 files changed, 227 insertions, 185 deletions
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index fed8a86bd..c210853ac 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -4,7 +4,7 @@
var PostStore = require('../stores/post_store.jsx');
var ChannelStore = require('../stores/channel_store.jsx');
var UserStore = require('../stores/user_store.jsx');
-var UserProfile = require( './user_profile.jsx' );
+var UserProfile = require('./user_profile.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var Post = require('./post.jsx');
var LoadingScreen = require('./loading_screen.jsx');
@@ -39,7 +39,7 @@ function getStateFromStores() {
}
module.exports = React.createClass({
- displayName: "PostList",
+ displayName: 'PostList',
scrollPosition: 0,
preventScrollTrigger: false,
gotMorePosts: false,
@@ -49,74 +49,75 @@ module.exports = React.createClass({
componentDidMount: function() {
var user = UserStore.getCurrentUser();
if (user.props && user.props.theme) {
- utils.changeCss('div.theme', 'background-color:'+user.props.theme+';');
- utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme+';');
- utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';');
- utils.changeCss('.mention', 'background: ' + user.props.theme+';');
- utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
- utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
- utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
- utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) +';');
- utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}');
+ utils.changeCss('div.theme', 'background-color:' + user.props.theme + ';');
+ utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme + ';');
+ utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme + ';');
+ utils.changeCss('.mention', 'background: ' + user.props.theme + ';');
+ utils.changeCss('.mention-link', 'color: ' + user.props.theme + ';');
+ utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme + ';}');
+ utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';');
}
- if (user.props.theme != '#000000' && user.props.theme != '#585858') {
- utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) +';');
- utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;');
- } else if (user.props.theme == '#000000') {
- utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) +';');
+
+ if (user.props.theme !== '#000000' && user.props.theme !== '#585858') {
+ utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) + ';');
+ utils.changeCss('a.theme', 'color:' + user.props.theme + '; fill:' + user.props.theme + '!important;');
+ } else if (user.props.theme === '#000000') {
+ utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) + ';');
$('.team__header').addClass('theme--black');
- } else if (user.props.theme == '#585858') {
- utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) +';');
+ } else if (user.props.theme === '#585858') {
+ utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) + ';');
$('.team__header').addClass('theme--gray');
}
- PostStore.addChangeListener(this._onChange);
- ChannelStore.addChangeListener(this._onChange);
- UserStore.addStatusesChangeListener(this._onTimeChange);
- SocketStore.addChangeListener(this._onSocketChange);
+ PostStore.addChangeListener(this.onChange);
+ ChannelStore.addChangeListener(this.onChange);
+ UserStore.addStatusesChangeListener(this.onTimeChange);
+ SocketStore.addChangeListener(this.onSocketChange);
- $(".post-list-holder-by-time").perfectScrollbar();
+ $('.post-list-holder-by-time').perfectScrollbar();
this.resize();
- var post_holder = $(".post-list-holder-by-time")[0];
- this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight();
- this.oldScrollHeight = post_holder.scrollHeight;
+ var postHolder = $('.post-list-holder-by-time')[0];
+ this.scrollPosition = $(postHolder).scrollTop() + $(postHolder).innerHeight();
+ this.oldScrollHeight = postHolder.scrollHeight;
this.oldZoom = (window.outerWidth - 8) / window.innerWidth;
- $('.modal').on('show.bs.modal', function () {
+ $('.modal').on('show.bs.modal', function onShow() {
$('.modal-body').css('overflow-y', 'auto');
$('.modal-body').css('max-height', $(window).height() * 0.7);
});
// Timeout exists for the DOM to fully render before making changes
var self = this;
- $(window).resize(function(){
- $(post_holder).perfectScrollbar('update');
+ $(window).resize(function resize() {
+ $(postHolder).perfectScrollbar('update');
// this only kind of works, detecting zoom in browsers is a nightmare
var newZoom = (window.outerWidth - 8) / window.innerWidth;
- if (self.scrollPosition >= post_holder.scrollHeight || (self.oldScrollHeight != post_holder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || self.oldZoom != newZoom) self.resize();
+ if (self.scrollPosition >= postHolder.scrollHeight || (self.oldScrollHeight !== postHolder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || self.oldZoom !== newZoom) {
+ self.resize();
+ }
self.oldZoom = newZoom;
if ($('#create_post').length > 0) {
var height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50;
- $(".post-list-holder-by-time").css("height", height + "px");
+ $('.post-list-holder-by-time').css('height', height + 'px');
}
});
- $(post_holder).scroll(function(e){
+ $(postHolder).scroll(function scroll() {
if (!self.preventScrollTrigger) {
- self.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight();
+ self.scrollPosition = $(postHolder).scrollTop() + $(postHolder).innerHeight();
}
self.preventScrollTrigger = false;
});
- $('body').on('click.userpopover', function(e){
- if ($(e.target).attr('data-toggle') !== 'popover'
- && $(e.target).parents('.popover.in').length === 0) {
+ $('body').on('click.userpopover', function popOver(e) {
+ if ($(e.target).attr('data-toggle') !== 'popover' &&
+ $(e.target).parents('.popover.in').length === 0) {
$('.user-popover').popover('hide');
}
});
@@ -124,67 +125,62 @@ module.exports = React.createClass({
$('.post-list__content div .post').removeClass('post--last');
$('.post-list__content div:last-child .post').addClass('post--last');
- $('body').on('mouseenter mouseleave', '.post', function(ev){
- if(ev.type === 'mouseenter'){
+ $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) {
+ if (ev.type === 'mouseenter') {
$(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after');
$(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before');
- }
- else {
+ } else {
$(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--after');
$(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--before');
}
});
- $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function(ev){
- if(ev.type === 'mouseenter'){
+ $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function mouseOver(ev) {
+ if (ev.type === 'mouseenter') {
$(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment');
$(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--comment');
- }
- else {
+ } else {
$(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--comment');
$(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment');
}
});
-
},
componentDidUpdate: function() {
this.resize();
- var post_holder = $(".post-list-holder-by-time")[0];
- this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight();
- this.oldScrollHeight = post_holder.scrollHeight;
+ var postHolder = $('.post-list-holder-by-time')[0];
+ this.scrollPosition = $(postHolder).scrollTop() + $(postHolder).innerHeight();
+ this.oldScrollHeight = postHolder.scrollHeight;
$('.post-list__content div .post').removeClass('post--last');
$('.post-list__content div:last-child .post').addClass('post--last');
},
componentWillUnmount: function() {
- PostStore.removeChangeListener(this._onChange);
- ChannelStore.removeChangeListener(this._onChange);
- UserStore.removeStatusesChangeListener(this._onTimeChange);
- SocketStore.removeChangeListener(this._onSocketChange);
+ PostStore.removeChangeListener(this.onChange);
+ ChannelStore.removeChangeListener(this.onChange);
+ UserStore.removeStatusesChangeListener(this.onTimeChange);
+ SocketStore.removeChangeListener(this.onSocketChange);
$('body').off('click.userpopover');
- $('.modal').off('show.bs.modal')
+ $('.modal').off('show.bs.modal');
},
resize: function() {
- var post_holder = $(".post-list-holder-by-time")[0];
+ var postHolder = $('.post-list-holder-by-time')[0];
this.preventScrollTrigger = true;
if (this.gotMorePosts) {
this.gotMorePosts = false;
- $(post_holder).scrollTop($(post_holder).scrollTop() + (post_holder.scrollHeight-this.oldScrollHeight) );
+ $(postHolder).scrollTop($(postHolder).scrollTop() + (postHolder.scrollHeight - this.oldScrollHeight));
+ } else if ($('#new_message')[0] && !this.scrolledToNew) {
+ $(postHolder).scrollTop($(postHolder).scrollTop() + $('#new_message').offset().top - 63);
+ this.scrolledToNew = true;
} else {
- if ($("#new_message")[0] && !this.scrolledToNew) {
- $(post_holder).scrollTop($(post_holder).scrollTop() + $("#new_message").offset().top - 63);
- this.scrolledToNew = true;
- } else {
- $(post_holder).scrollTop(post_holder.scrollHeight);
- }
+ $(postHolder).scrollTop(postHolder.scrollHeight);
}
- $(post_holder).perfectScrollbar('update');
+ $(postHolder).perfectScrollbar('update');
},
- _onChange: function() {
+ onChange: function() {
var newState = getStateFromStores();
if (!utils.areStatesEqual(newState, this.state)) {
- if (this.state.post_list && this.state.post_list.order) {
- if (this.state.channel.id === newState.channel.id && this.state.post_list.order.length != newState.post_list.order.length && newState.post_list.order.length > Constants.POST_CHUNK_SIZE) {
+ if (this.state.postList && this.state.postList.order) {
+ if (this.state.channel.id === newState.channel.id && this.state.postList.order.length !== newState.postList.order.length && newState.postList.order.length > Constants.POST_CHUNK_SIZE) {
this.gotMorePosts = true;
}
}
@@ -202,99 +198,119 @@ module.exports = React.createClass({
PostStore.storePost(post);
} else if (msg.action === 'post_edited') {
if (this.state.channel.id === msg.channel_id) {
- this.setState({ post_list: post_list });
- };
+ this.setState({postList: postList});
+ }
- PostStore.storePosts(post.channel_id, post_list);
- } else if (msg.action == "post_edited") {
- if (this.state.channel.id == msg.channel_id) {
- var post_list = this.state.post_list;
- if (!(msg.props.post_id in post_list.posts)) return;
+ PostStore.storePosts(post.channel_id, postList);
+ } else if (msg.action === 'post_edited') {
+ if (this.state.channel.id === msg.channel_id) {
+ postList = this.state.postList;
+ if (!(msg.props.post_id in postList.posts)) {
+ return;
+ }
- var post = post_list.posts[msg.props.post_id];
+ post = postList.posts[msg.props.post_id];
post.message = msg.props.message;
- post_list.posts[post.id] = post;
- this.setState({ post_list: post_list });
+ postList.posts[post.id] = post;
+ this.setState({postList: postList});
- PostStore.storePosts(msg.channel_id, post_list);
+ PostStore.storePosts(msg.channel_id, postList);
} else {
AsyncClient.getPosts(true, msg.channel_id);
}
- } else if (msg.action == "post_deleted") {
+ } else if (msg.action === 'post_deleted') {
var activeRoot = $(document.activeElement).closest('.comment-create-body')[0];
- var activeRootPostId = activeRoot && activeRoot.id.length > 0 ? activeRoot.id : "";
+ var activeRootPostId = '';
+ if (activeRoot && activeRoot.id.length > 0) {
+ activeRootPostId = activeRoot.id;
+ }
- if (this.state.channel.id == msg.channel_id) {
- var post_list = this.state.post_list;
- if (!(msg.props.post_id in this.state.post_list.posts)) return;
+ if (this.state.channel.id === msg.channel_id) {
+ postList = this.state.postList;
+ if (!(msg.props.post_id in this.state.postList.posts)) {
+ return;
+ }
- delete post_list.posts[msg.props.post_id];
- var index = post_list.order.indexOf(msg.props.post_id);
- if (index > -1) post_list.order.splice(index, 1);
+ delete postList.posts[msg.props.post_id];
+ var index = postList.order.indexOf(msg.props.post_id);
+ if (index > -1) {
+ postList.order.splice(index, 1);
+ }
- this.setState({ post_list: post_list });
+ this.setState({postList: postList});
- PostStore.storePosts(msg.channel_id, post_list);
+ PostStore.storePosts(msg.channel_id, postList);
} else {
AsyncClient.getPosts(true, msg.channel_id);
}
- if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() != msg.user_id) {
+ if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() !== msg.user_id) {
$('#post_deleted').modal('show');
}
- } else if (msg.action == "new_user") {
+ } else if (msg.action === 'new_user') {
AsyncClient.getProfiles();
}
},
- _onTimeChange: function() {
- if (!this.state.post_list) return;
- for (var id in this.state.post_list.posts) {
- if (!this.refs[id]) continue;
+ onTimeChange: function() {
+ if (!this.state.postList) {
+ return;
+ }
+
+ for (var id in this.state.postList.posts) {
+ if (!this.refs[id]) {
+ continue;
+ }
this.refs[id].forceUpdateInfo();
}
},
getMorePosts: function(e) {
e.preventDefault();
- if (!this.state.post_list) return;
+ if (!this.state.postList) {
+ return;
+ }
- var posts = this.state.post_list.posts;
- var order = this.state.post_list.order;
- var channel_id = this.state.channel.id;
+ var posts = this.state.postList.posts;
+ var order = this.state.postList.order;
+ var channelId = this.state.channel.id;
- $(this.refs.loadmore.getDOMNode()).text("Retrieving more messages...");
+ $(this.refs.loadmore.getDOMNode()).text('Retrieving more messages...');
var self = this;
- var currentPos = $(".post-list").scrollTop;
+ var currentPos = $('.post-list').scrollTop;
Client.getPosts(
- channel_id,
+ channelId,
order.length,
Constants.POST_CHUNK_SIZE,
- function(data) {
- $(self.refs.loadmore.getDOMNode()).text("Load more messages");
+ function success(data) {
+ $(self.refs.loadmore.getDOMNode()).text('Load more messages');
- if (!data) return;
+ if (!data) {
+ return;
+ }
- if (data.order.length === 0) return;
+ if (data.order.length === 0) {
+ return;
+ }
- var post_list = {}
- post_list.posts = $.extend(posts, data.posts);
- post_list.order = order.concat(data.order);
+ var postList = {};
+ postList.posts = $.extend(posts, data.posts);
+ postList.order = order.concat(data.order);
AppDispatcher.handleServerAction({
type: ActionTypes.RECIEVED_POSTS,
- id: channel_id,
- post_list: post_list
+ id: channelId,
+ postList: postList
});
Client.getProfiles();
- $(".post-list").scrollTop(currentPos);
+ $('.post-list').scrollTop(currentPos);
},
- function(err) {
- $(self.refs.loadmore.getDOMNode()).text("Load more messages");
- AsyncClient.dispatchError(err, "getPosts");
+ function fail(err) {
+ $(self.refs.loadmore.getDOMNode()).text('Load more messages');
+ AsyncClient.dispatchError(err, 'getPosts');
}
);
},
@@ -305,81 +321,86 @@ module.exports = React.createClass({
var order = [];
var posts;
- var last_viewed = Number.MAX_VALUE;
+ var lastViewed = Number.MAX_VALUE;
- if (ChannelStore.getCurrentMember() != null)
- last_viewed = ChannelStore.getCurrentMember().last_viewed_at;
+ if (ChannelStore.getCurrentMember() != null) {
+ lastViewed = ChannelStore.getCurrentMember().lastViewed_at;
+ }
- if (this.state.post_list != null) {
- posts = this.state.post_list.posts;
- order = this.state.post_list.order;
+ if (this.state.postList != null) {
+ posts = this.state.postList.posts;
+ order = this.state.postList.order;
}
- var rendered_last_viewed = false;
+ var renderedLastViewed = false;
- var user_id = "";
+ var userId = '';
if (UserStore.getCurrentId()) {
- user_id = UserStore.getCurrentId();
+ userId = UserStore.getCurrentId();
} else {
return <div/>;
}
var channel = this.state.channel;
- var more_messages = <p className="beginning-messages-text">Beginning of Channel</p>;
+ var moreMessages = <p className='beginning-messages-text'>Beginning of Channel</p>;
- var userStyle = { color: UserStore.getCurrentUser().props.theme }
+ var userStyle = {color: UserStore.getCurrentUser().props.theme};
if (channel != null) {
if (order.length > 0 && order.length % Constants.POST_CHUNK_SIZE === 0) {
- more_messages = <a ref="loadmore" className="more-messages-text theme" href="#" onClick={this.getMorePosts}>Load more messages</a>;
+ moreMessages = <a ref='loadmore' className='more-messages-text theme' href='#' onClick={this.getMorePosts}>Load more messages</a>;
} else if (channel.type === 'D') {
- var teammate = utils.getDirectTeammate(channel.id)
+ var teammate = utils.getDirectTeammate(channel.id);
if (teammate) {
- var teammate_name = teammate.nickname.length > 0 ? teammate.nickname : teammate.username;
- more_messages = (
- <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} height="50" width="50" />
+ var teammateName = teammate.username;
+ if (teammate.nickname.length > 0) {
+ teammateName = teammate.nickname;
+ }
+
+ moreMessages = (
+ <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} height='50' width='50' />
</div>
- <div className="channel-intro-profile">
+ <div className='channel-intro-profile'>
<strong><UserProfile userId={teammate.id} /></strong>
</div>
- <p className="channel-intro-text">
- {"This is the start of your private message history with " + teammate_name + "." }<br/>
- {"Private messages and files shared here are not shown to people outside this area."}
+ <p className='channel-intro-text'>
+ {'This is the start of your private message history with ' + teammateName + '.'}<br/>
+ {'Private messages and files shared here are not shown to people outside this area.'}
</p>
- <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
+ <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a>
</div>
);
} else {
- more_messages = (
- <div className="channel-intro">
- <p className="channel-intro-text">{"This is the start of your private message history with this " + strings.Team + "mate. Private messages and files shared here are not shown to people outside this area."}</p>
+ moreMessages = (
+ <div className='channel-intro'>
+ <p className='channel-intro-text'>{'This is the start of your private message history with this ' + strings.Team + 'mate. Private messages and files shared here are not shown to people outside this area.'}</p>
</div>
);
}
} else if (channel.type === 'P' || channel.type === 'O') {
- var ui_name = channel.display_name
+ var uiName = channel.display_name;
var members = ChannelStore.getCurrentExtraInfo().members;
- var creator_name = "";
+ var creatorName = '';
for (var i = 0; i < members.length; i++) {
if (members[i].roles.indexOf('admin') > -1) {
- creator_name = members[i].username;
+ creatorName = members[i].username;
break;
}
}
if (ChannelStore.isDefault(channel)) {
- more_messages = (
- <div className="channel-intro">
- <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
- <p className="channel-intro__content">
- Welcome to {ui_name}!
+ moreMessages = (
+ <div className='channel-intro'>
+ <h4 className='channel-intro__title'>Beginning of {uiName}</h4>
+ <p className='channel-intro__content'>
+ Welcome to {uiName}!
<br/><br/>
- {"This is the first channel " + strings.Team + "mates see when they"}
+ {'This is the first channel ' + strings.Team + 'mates see when they'}
<br/>
sign up - use it for posting updates everyone needs to know.
<br/><br/>
@@ -391,29 +412,44 @@ module.exports = React.createClass({
</div>
);
} else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
- more_messages = (
- <div className="channel-intro">
- <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
- <p className="channel-intro__content">
- {"This is the start of " + ui_name + ", a channel for non-work-related conversations."}
+ moreMessages = (
+ <div className='channel-intro'>
+ <h4 className='channel-intro__title'>Beginning of {uiName}</h4>
+ <p className='channel-intro__content'>
+ {'This is the start of ' + uiName + ', a channel for non-work-related conversations.'}
<br/>
</p>
- <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
+ <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={uiName} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a>
</div>
);
} else {
- var ui_type = channel.type === 'P' ? "private group" : "channel";
- more_messages = (
- <div className="channel-intro">
- <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
- <p className="channel-intro__content">
- { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "."
- : "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." }
- { channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." }
+ 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 by ' + creatorName + ' on ' + utils.displayDate(channel.create_at) + '.';
+ } else {
+ createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + utils.displayDate(channel.create_at) + '.';
+ }
+
+ moreMessages = (
+ <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="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
- <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a>
+ <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a>
+ <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#channel_invite'><i className='fa fa-user-plus'></i>Invite others to this {uiType}</a>
</div>
);
}
@@ -426,17 +462,25 @@ module.exports = React.createClass({
var previousPostDay = new Date(0);
var currentPostDay;
- for (var i = order.length-1; i >= 0; i--) {
+ for (var i = order.length - 1; i >= 0; i--) {
var post = posts[order[i]];
- var parentPost = post.parent_id ? posts[post.parent_id] : null;
+ var parentPost = null;
+ if (post.parent_id) {
+ parentPost = posts[post.parent_id];
+ }
var sameUser = '';
var sameRoot = false;
var hideProfilePic = false;
- var prevPost = (i < order.length - 1) ? posts[order[i + 1]] : null;
+ var prevPost;
+ if (i < order.length - 1) {
+ prevPost = posts[order[i + 1]];
+ }
if (prevPost) {
- sameUser = (prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000*60*5) ? "same--user" : "";
+ if ((prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000 * 60 * 5)) {
+ sameUser = 'same--user';
+ }
sameRoot = utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id);
// we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post
@@ -445,7 +489,7 @@ module.exports = React.createClass({
// 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 isLastComment = utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id);
var postCtl = (
<Post ref={post.id} sameUser={sameUser} sameRoot={sameRoot} post={post} parentPost={parentPost} key={post.id}
@@ -454,23 +498,21 @@ module.exports = React.createClass({
);
currentPostDay = utils.getDateForUnixTicks(post.create_at);
- if (currentPostDay.toDateString() != previousPostDay.toDateString()) {
+ 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 key={currentPostDay.toDateString()} className='date-separator'>
+ <hr className='separator__hr' />
+ <div className='separator__text'>{currentPostDay.toDateString()}</div>
</div>
);
}
- var userId = UserStore.getCurrentId();
-
- if (post.user_id !== userId && post.create_at > last_viewed && !rendered_last_viewed) {
- rendered_last_viewed = true;
+ if (post.user_id !== userId && post.create_at > lastViewed && !renderedLastViewed) {
+ renderedLastViewed = true;
postCtls.push(
- <div key="unviewed" className="new-separator">
- <hr id="new_message" className="separator__hr" />
- <div className="separator__text">New Messages</div>
+ <div key='unviewed' className='new-separator'>
+ <hr id='new_message' className='separator__hr' />
+ <div className='separator__text'>New Messages</div>
</div>
);
}
@@ -478,15 +520,15 @@ module.exports = React.createClass({
previousPostDay = currentPostDay;
}
} else {
- postCtls.push(<LoadingScreen position="absolute" />);
+ postCtls.push(<LoadingScreen position='absolute' />);
}
return (
- <div ref="postlist" className="post-list-holder-by-time">
- <div className="post-list__table">
- <div className="post-list__content">
- { more_messages }
- { postCtls }
+ <div ref='postlist' className='post-list-holder-by-time'>
+ <div className='post-list__table'>
+ <div className='post-list__content'>
+ {moreMessages}
+ {postCtls}
</div>
</div>
</div>
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-30 05:45:15 +0000