+
@@ -253,6 +261,8 @@ exports[`
+
diff --git a/app/javascript/chat/actions.js b/app/javascript/chat/actions.js
index 780b18158..e91482b66 100644
--- a/app/javascript/chat/actions.js
+++ b/app/javascript/chat/actions.js
@@ -9,7 +9,7 @@ export function getAllMessages(channelId, messageOffset, successCb, failureCb) {
.catch(failureCb);
}
-export function sendMessage(activeChannelId, message, successCb, failureCb) {
+export function sendMessage(messageObject, successCb, failureCb) {
fetch('/messages', {
method: 'POST',
headers: {
@@ -19,9 +19,10 @@ export function sendMessage(activeChannelId, message, successCb, failureCb) {
},
body: JSON.stringify({
message: {
- message_markdown: message,
+ message_markdown: messageObject.message,
user_id: window.currentUser.id,
- chat_channel_id: activeChannelId,
+ chat_channel_id: messageObject.activeChannelId,
+ mentioned_users_id: messageObject.mentionedUsersId,
},
}),
credentials: 'same-origin',
diff --git a/app/javascript/chat/channelDetails.jsx b/app/javascript/chat/channelDetails.jsx
index 38bb50f58..65cdaeab6 100644
--- a/app/javascript/chat/channelDetails.jsx
+++ b/app/javascript/chat/channelDetails.jsx
@@ -111,12 +111,12 @@ class ChannelDetails extends Component {
className="channeldetails__userprofileimage"
src={user.profile_image}
alt={`${user.username} profile`}
- data-content='sidecar-user'
+ data-content="sidecar-user"
/>
{user.name}
diff --git a/app/javascript/chat/channels.jsx b/app/javascript/chat/channels.jsx
index 17abc35e4..cf42254ce 100644
--- a/app/javascript/chat/channels.jsx
+++ b/app/javascript/chat/channels.jsx
@@ -15,7 +15,8 @@ const Channels = ({
}) => {
const channels = chatChannels.map(channel => {
const isActive = parseInt(activeChannelId, 10) === channel.chat_channel_id;
- const isUnopened = !isActive && unopenedChannelIds.includes(channel.chat_channel_id)
+ const isUnopened =
+ !isActive && unopenedChannelIds.includes(channel.chat_channel_id);
let newMessagesIndicator = isUnopened ? 'new' : 'old';
if (incomingVideoCallChannelIds.indexOf(channel.chat_channel_id) > -1) {
newMessagesIndicator = 'video';
@@ -49,7 +50,11 @@ const Channels = ({
{channel.channel_name}
diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx
index 32843a338..c6443380a 100644
--- a/app/javascript/chat/chat.jsx
+++ b/app/javascript/chat/chat.jsx
@@ -37,6 +37,7 @@ export default class Chat extends Component {
super(props);
const chatChannels = JSON.parse(props.chatChannels);
const chatOptions = JSON.parse(props.chatOptions);
+
this.state = {
messages: [],
scrolled: false,
@@ -72,6 +73,10 @@ export default class Chat extends Component {
currentMessageLocation: 0,
startEditing: false,
activeEditMessage: {},
+ markdownEdited: false,
+ channelUsers: [],
+ showMemberlist: false,
+ memberFilterQuery: null,
};
}
@@ -85,18 +90,21 @@ export default class Chat extends Component {
channelPaginationNum,
currentUserId,
} = this.state;
+
this.setupChannels(chatChannels);
+
const channelsForPusherSub = chatChannels.filter(
- this.channelTypeFilter('open'),
+ this.channelTypeFilterFn('open'),
);
this.subscribeChannelsToPusher(
channelsForPusherSub,
channel => `open-channel-${channel.chat_channel_id}`,
);
+
setupObserver(this.observerCallback);
-
+
this.subscribePusher(`private-message-notifications-${currentUserId}`);
-
+
if (activeChannelId) {
sendOpen(activeChannelId, this.handleChannelOpenSuccess, null);
}
@@ -113,7 +121,7 @@ export default class Chat extends Component {
filters,
this.loadChannels,
);
- getUnopenedChannelIds(this.markUnopenedChannelIds)
+ getUnopenedChannelIds(this.markUnopenedChannelIds);
}
if (!isMobileDevice) {
document.getElementById('messageform').focus();
@@ -184,6 +192,8 @@ export default class Chat extends Component {
liveCoding: this.liveCoding,
videoCallInitiated: this.receiveVideoCall,
videoCallEnded: this.receiveVideoCallHangup,
+ mentioned: this.mentioned,
+ messageOpened: this.messageOpened,
});
const subscriptions = subscribedPusherChannels;
subscriptions.push(channelName);
@@ -191,10 +201,13 @@ export default class Chat extends Component {
}
};
+ mentioned = () => {};
+
+ messageOpened = () => {};
+
loadChannels = (channels, query) => {
const { activeChannelId, activeChannel } = this.state;
if (activeChannelId && query.length === 0) {
- this.setupChannel(activeChannelId);
this.setState({
chatChannels: channels,
scrolled: false,
@@ -205,15 +218,19 @@ export default class Chat extends Component {
activeChannel ||
this.filterForActiveChannel(channels, activeChannelId),
});
- } else if (activeChannelId) {
this.setupChannel(activeChannelId);
+ } else if (activeChannelId) {
this.setState({
scrolled: false,
chatChannels: channels,
channelsLoaded: true,
channelPaginationNum: 0,
filterQuery: query,
+ activeChannel:
+ activeChannel ||
+ this.filterForActiveChannel(channels, activeChannelId),
});
+ this.setupChannel(activeChannelId);
} else if (channels.length > 0) {
this.setState({
chatChannels: channels,
@@ -231,15 +248,19 @@ export default class Chat extends Component {
this.setState({ channelsLoaded: true });
}
this.subscribeChannelsToPusher(
- channels.filter(this.channelTypeFilter('invite_only')),
+ channels.filter(this.channelTypeFilterFn('open')),
+ channel => `open-channel-${channel.chat_channel_id}`,
+ );
+ this.subscribeChannelsToPusher(
+ channels.filter(this.channelTypeFilterFn('invite_only')),
channel => `presence-channel-${channel.chat_channel_id}`,
);
document.getElementById('chatchannels__channelslist').scrollTop = 0;
};
- markUnopenedChannelIds = (ids) => {
- this.setState({unopenedChannelIds: ids})
- }
+ markUnopenedChannelIds = ids => {
+ this.setState({ unopenedChannelIds: ids });
+ };
subscribeChannelsToPusher = (channels, channelNameFn) => {
channels.forEach(channel => {
@@ -247,7 +268,7 @@ export default class Chat extends Component {
});
};
- channelTypeFilter = type => channel => {
+ channelTypeFilterFn = type => channel => {
return channel.channel_type === type;
};
@@ -283,7 +304,12 @@ export default class Chat extends Component {
};
setupChannel = channelId => {
- const { messages, messageOffset } = this.state;
+ const {
+ messages,
+ messageOffset,
+ activeChannel,
+ activeChannelId,
+ } = this.state;
if (
!messages[channelId] ||
messages[channelId].length === 0 ||
@@ -291,9 +317,44 @@ export default class Chat extends Component {
) {
getAllMessages(channelId, messageOffset, this.receiveAllMessages);
}
+ if (activeChannel && activeChannel.channel_type !== 'direct') {
+ getContent(
+ `/api/chat_channels/${activeChannelId}`,
+ this.setOpenChannelUsers,
+ null,
+ );
+ if (activeChannel.channel_type === 'open')
+ this.subscribePusher(`open-channel-${channelId}`);
+ }
this.subscribePusher(`presence-channel-${channelId}`);
};
+ setOpenChannelUsers = res => {
+ const { activeChannelId, activeChannel } = this.state;
+ Object.filter = (obj, predicate) =>
+ Object.fromEntries(Object.entries(obj).filter(predicate));
+ const leftUser = Object.filter(
+ res.channel_users,
+ ([username]) => username !== window.currentUser.username,
+ );
+ if (activeChannel.channel_type === 'open') {
+ this.setState({
+ channelUsers: {
+ [activeChannelId]: leftUser,
+ },
+ });
+ } else {
+ this.setState({
+ channelUsers: {
+ [activeChannelId]: {
+ all: { username: 'all', name: 'To notify everyone here' },
+ ...leftUser,
+ },
+ },
+ });
+ }
+ };
+
observerCallback = entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
@@ -333,22 +394,28 @@ export default class Chat extends Component {
updateMessage = message => {
const { activeChannelId } = this.state;
-
- this.setState(({ messages }) => {
- const newMessages = messages;
- const foundIndex = messages[activeChannelId].findIndex(
- oldMessage => oldMessage.id === message.id,
- );
- newMessages[activeChannelId][foundIndex] = message;
- return { messages: newMessages };
- });
+ if (message.chat_channel_id === activeChannelId) {
+ this.setState(({ messages }) => {
+ const newMessages = messages;
+ const foundIndex = messages[activeChannelId].findIndex(
+ oldMessage => oldMessage.id === message.id,
+ );
+ newMessages[activeChannelId][foundIndex] = message;
+ return { messages: newMessages };
+ });
+ }
};
receiveNewMessage = message => {
- const { messages, activeChannelId, scrolled, chatChannels, unopenedChannelIds } = this.state;
+ const {
+ messages,
+ activeChannelId,
+ scrolled,
+ chatChannels,
+ unopenedChannelIds,
+ } = this.state;
const receivedChatChannelId = message.chat_channel_id;
let newMessages = [];
-
if (
message.temp_id &&
messages[activeChannelId].findIndex(
@@ -386,13 +453,13 @@ export default class Chat extends Component {
if (receivedChatChannelId === activeChannelId) {
sendOpen(receivedChatChannelId, this.handleChannelOpenSuccess, null);
} else {
- const newUnopenedChannels = unopenedChannelIds
+ const newUnopenedChannels = unopenedChannelIds;
if (!unopenedChannelIds.includes(receivedChatChannelId)) {
- newUnopenedChannels.push(receivedChatChannelId)
- }
+ newUnopenedChannels.push(receivedChatChannelId);
+ }
this.setState({
- unopenedChannelIds: newUnopenedChannels
- })
+ unopenedChannelIds: newUnopenedChannels,
+ });
}
this.setState(prevState => ({
@@ -467,13 +534,18 @@ export default class Chat extends Component {
};
handleKeyDown = e => {
+ const { showMemberlist } = this.state;
const enterPressed = e.keyCode === 13;
const targetValue = e.target.value;
const messageIsEmpty = targetValue.length === 0;
const shiftPressed = e.shiftKey;
if (enterPressed) {
- if (messageIsEmpty) {
+ if (showMemberlist) {
+ e.preventDefault();
+ const selectedUser = document.querySelector('.active__message__list');
+ this.addUserName({ target: selectedUser });
+ } else if (messageIsEmpty) {
e.preventDefault();
} else if (!messageIsEmpty && !shiftPressed) {
e.preventDefault();
@@ -481,6 +553,11 @@ export default class Chat extends Component {
e.target.value = '';
}
}
+ if (e.target.value.includes('@')) {
+ if (e.keyCode === 40 || e.keyCode === 38) {
+ e.preventDefault();
+ }
+ }
};
handleKeyDownEdit = e => {
@@ -529,8 +606,8 @@ export default class Chat extends Component {
});
this.setActiveContent({
path: '/new',
- type_of: 'article'
- })
+ type_of: 'article',
+ });
} else if (message.startsWith('/github')) {
const args = message.split('/github ')[1].trim();
this.setActiveContentState(activeChannelId, { type_of: 'github', args });
@@ -542,12 +619,12 @@ export default class Chat extends Component {
this.handleFailure,
);
} else {
- sendMessage(
+ const messageObject = {
activeChannelId,
message,
- this.handleSuccess,
- this.handleFailure,
- );
+ mentionedUsersId: this.getMentionedUsers(message),
+ };
+ sendMessage(messageObject, this.handleSuccess, this.handleFailure);
}
};
@@ -595,7 +672,7 @@ export default class Chat extends Component {
triggerSwitchChannel = (id, slug) => {
const { chatChannels, isMobileDevice, unopenedChannelIds } = this.state;
- const newUnopenedChannelIds = unopenedChannelIds
+ const newUnopenedChannelIds = unopenedChannelIds;
const index = newUnopenedChannelIds.indexOf(id);
if (index > -1) {
newUnopenedChannelIds.splice(index, 1);
@@ -605,7 +682,9 @@ export default class Chat extends Component {
activeChannelId: parseInt(id, 10),
scrolled: false,
showAlert: false,
- unopenedChannelIds: unopenedChannelIds.filter(unopenedId => unopenedId !== id)
+ unopenedChannelIds: unopenedChannelIds.filter(
+ unopenedId => unopenedId !== id,
+ ),
});
this.setupChannel(id);
window.history.replaceState(null, null, `/connect/${slug}`);
@@ -660,7 +739,9 @@ export default class Chat extends Component {
const foundIndex = messages[activeChannelId].findIndex(
message => message.temp_id === response.message.temp_id,
);
- newMessages[activeChannelId][foundIndex].id = response.message.id;
+ if (foundIndex > 0) {
+ newMessages[activeChannelId][foundIndex].id = response.message.id;
+ }
return { messages: newMessages };
});
}
@@ -681,7 +762,8 @@ export default class Chat extends Component {
}
const { target } = e;
- const content = target.dataset.content || target.parentElement.dataset.content
+ const content =
+ target.dataset.content || target.parentElement.dataset.content;
if (content) {
e.preventDefault();
e.stopPropagation();
@@ -696,14 +778,18 @@ export default class Chat extends Component {
this.setActiveContent,
null,
);
- } else if (content.startsWith('sidecar') || content.startsWith('article')) { // article is legacy which can be removed shortly
+ } else if (
+ content.startsWith('sidecar') ||
+ content.startsWith('article')
+ ) {
+ // article is legacy which can be removed shortly
this.setActiveContentState(activeChannelId, {
type_of: 'loading-post',
});
this.setActiveContent({
path: target.href || target.parentElement.href,
- type_of: 'article'
- })
+ type_of: 'article',
+ });
} else if (target.dataset.content === 'exit') {
this.setActiveContentState(activeChannelId, null);
}
@@ -1098,14 +1184,18 @@ export default class Chat extends Component {
{
+ const { activeChannel } = this.state;
+ const mention = e.keyCode === 64;
+ if (mention && activeChannel.channel_type !== 'direct') {
+ this.setState({ showMemberlist: true });
+ }
+ };
+
+ handleKeyUp = e => {
+ const { startEditing, activeChannel, showMemberlist } = this.state;
+ const enterPressed = e.keyCode === 13;
+ if (enterPressed && showMemberlist)
+ this.setState({ showMemberlist: false });
+ if (activeChannel.channel_type !== 'direct') {
+ if (startEditing) {
+ this.setState({ markdownEdited: true });
+ }
+ if (!e.target.value.includes('@')) {
+ this.setState({ showMemberlist: false });
+ } else {
+ this.setQuery(e.target);
+ this.listHighlightManager(e.keyCode);
+ }
+ }
+ };
+
+ setQuery = e => {
+ const { showMemberlist } = this.state;
+ if (showMemberlist) {
+ const before = e.value.substring(0, e.selectionStart);
+ const query = before.substring(
+ before.lastIndexOf('@') + 1,
+ e.selectionStart,
+ );
+
+ if (query.includes(' ') || before.lastIndexOf('@') < 0)
+ this.setState({ showMemberlist: false });
+ else {
+ this.setState({ showMemberlist: true });
+ this.setState({ memberFilterQuery: query });
+ }
+ }
+ };
+
+ addUserName = e => {
+ const name =
+ e.target.dataset.content || e.target.parentElement.dataset.content;
+ const el = document.getElementById('messageform');
+ const start = el.selectionStart;
+ const end = el.selectionEnd;
+ const text = el.value;
+ let before = text.substring(0, start);
+ before = text.substring(0, before.lastIndexOf('@') + 1);
+ const after = text.substring(end, text.length);
+ el.value = before + name + after;
+ el.selectionStart = start + name.length;
+ el.selectionEnd = start + name.length;
+ el.focus();
+ this.setState({ showMemberlist: false });
+ };
+
+ listHighlightManager = keyCode => {
+ const mentionList = document.getElementById('mentionList');
+ const activeElement = document.querySelector('.active__message__list');
+ if (mentionList.children.length > 0) {
+ if (keyCode === 40 && activeElement) {
+ if (activeElement.nextElementSibling) {
+ activeElement.classList.remove('active__message__list');
+ activeElement.nextElementSibling.classList.add(
+ 'active__message__list',
+ );
+ }
+ } else if (keyCode === 38 && activeElement) {
+ if (activeElement.previousElementSibling) {
+ activeElement.classList.remove('active__message__list');
+ activeElement.previousElementSibling.classList.add(
+ 'active__message__list',
+ );
+ }
+ } else {
+ mentionList.children[0].classList.add('active__message__list');
+ }
+ }
+ };
+
+ getMentionedUsers = message => {
+ const { channelUsers, activeChannelId, activeChannel } = this.state;
+ if (channelUsers[activeChannelId]) {
+ if (message.includes('@all') && activeChannel.channel_type !== 'open') {
+ return Array.from(
+ Object.values(channelUsers[activeChannelId]).filter(user => user.id),
+ user => user.id,
+ );
+ }
+ return Array.from(
+ Object.values(channelUsers[activeChannelId]).filter(user =>
+ message.includes(user.username),
+ ),
+ user => user.id,
+ );
+ }
+ return null;
+ };
+
+ renderChannelMembersList = () => {
+ const {
+ showMemberlist,
+ activeChannelId,
+ channelUsers,
+ memberFilterQuery,
+ } = this.state;
+ const filterRegx = new RegExp(memberFilterQuery, 'gi');
+ return (
+
+ {showMemberlist
+ ? Object.values(channelUsers[activeChannelId])
+ .filter(user => user.username.match(filterRegx))
+ .map(user => (
+
+ );
+ };
+
handleEditMessageClose = () => {
+ const textarea = document.getElementById('messageform');
this.setState({
startEditing: false,
+ markdownEdited: false,
activeEditMessage: { message: '', markdown: '' },
});
+ textarea.value = '';
};
renderDeleteModal = () => {
@@ -1193,7 +1442,7 @@ export default class Chat extends Component {
{activeChannel.channel_modified_slug}
diff --git a/app/javascript/chat/compose.jsx b/app/javascript/chat/compose.jsx
index 452e5d5a9..a1b23df2b 100644
--- a/app/javascript/chat/compose.jsx
+++ b/app/javascript/chat/compose.jsx
@@ -7,24 +7,21 @@ export default class Chat extends Component {
handleKeyDownEdit: PropTypes.func.isRequired,
handleSubmitOnClick: PropTypes.func.isRequired,
handleSubmitOnClickEdit: PropTypes.func.isRequired,
+ handleMention: PropTypes.func.isRequired,
+ handleKeyUp: PropTypes.func.isRequired,
startEditing: PropTypes.bool.isRequired,
+ markdownEdited: PropTypes.bool.isRequired,
editMessageHtml: PropTypes.string.isRequired,
editMessageMarkdown: PropTypes.string.isRequired,
handleEditMessageClose: PropTypes.func.isRequired,
};
- constructor(props) {
- super(props);
- this.state = {
- editMessageMarkdown: null,
- };
- }
-
- componentWillReceiveProps(props) {
- this.setState({
- editMessageMarkdown: props.editMessageMarkdown,
- editMessageHtml: props.editMessageHtml,
- });
+ componentDidUpdate() {
+ const { editMessageMarkdown, markdownEdited, startEditing } = this.props;
+ const textarea = document.getElementById('messageform');
+ if (!markdownEdited && startEditing) {
+ textarea.value = editMessageMarkdown;
+ }
}
messageCompose = () => {
@@ -32,14 +29,18 @@ export default class Chat extends Component {
handleSubmitOnClickEdit,
handleKeyDownEdit,
handleEditMessageClose,
+ handleMention,
+ handleKeyUp,
+ editMessageHtml,
} = this.props;
- const { editMessageHtml, editMessageMarkdown } = this.state;
+
return (
{
+ if (e.keyCode === 13) this.addUserName();
+ }}
+ >
+ 
+
+ {'@'}
+ {user.username}
+
+ ))
+ : ' '}
+ {user.name}
+ +
Edit Message