{webrtc}
+ {toggleFavorite}
{
AsyncClient.getChannels(true);
- browserHistory.push(TeamStore.getCurrentTeamUrl() + '/channels/town-square');
+ if (this.state.isFavorite) {
+ ChannelActions.unmarkFavorite(channelId);
+ }
+
+ const townsquare = ChannelStore.getByName('town-square');
+ browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + townsquare.name);
},
(err) => {
AsyncClient.dispatchError(err, 'handleLeave');
@@ -214,6 +230,16 @@ export default class Navbar extends React.Component {
return true;
}
+ toggleFavorite = (e) => {
+ e.preventDefault();
+
+ if (this.state.isFavorite) {
+ ChannelActions.unmarkFavorite(this.state.channel.id);
+ } else {
+ ChannelActions.markFavorite(this.state.channel.id);
+ }
+ };
+
createDropdown(channel, channelTitle, isAdmin, isSystemAdmin, isDirect, popoverContent) {
if (channel) {
let channelTerm = (
@@ -425,6 +451,29 @@ export default class Navbar extends React.Component {
}
}
+ const toggleFavoriteOption = (
+
+
+ {this.state.isFavorite ?
+
+ );
+
return (
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index c8a7e1eb95..2a589b9968 100644
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -14,10 +14,10 @@ import ChannelStore from 'stores/channel_store.jsx';
import UserStore from 'stores/user_store.jsx';
import TeamStore from 'stores/team_store.jsx';
import PreferenceStore from 'stores/preference_store.jsx';
-import LocalizationStore from 'stores/localization_store.jsx';
import * as AsyncClient from 'utils/async_client.jsx';
import * as Utils from 'utils/utils.jsx';
+import * as ChannelUtils from 'utils/channel_utils.jsx';
import * as ChannelActions from 'actions/channel_actions.jsx';
import {loadProfilesAndTeamMembersForDMSidebar} from 'actions/user_actions.jsx';
@@ -96,63 +96,13 @@ export default class Sidebar extends React.Component {
getStateFromStores() {
const members = ChannelStore.getMyMembers();
const currentChannelId = ChannelStore.getCurrentId();
- const currentUserId = UserStore.getCurrentId();
-
- const channels = Object.assign([], ChannelStore.getAll());
- channels.sort(this.sortChannelsByDisplayName);
-
- const publicChannels = channels.filter((channel) => channel.type === Constants.OPEN_CHANNEL);
- const privateChannels = channels.filter((channel) => channel.type === Constants.PRIVATE_CHANNEL);
-
- const preferences = PreferenceStore.getCategory(Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW);
-
- const directChannels = [];
- const directNonTeamChannels = [];
- for (const [name, value] of preferences) {
- if (value !== 'true') {
- continue;
- }
-
- const teammateId = name;
-
- let directChannel = channels.find(Utils.isDirectChannelForUser.bind(null, teammateId));
-
- // a direct channel doesn't exist yet so create a fake one
- if (directChannel == null) {
- directChannel = {
- name: Utils.getDirectChannelName(currentUserId, teammateId),
- last_post_at: 0,
- total_msg_count: 0,
- type: Constants.DM_CHANNEL,
- fake: true
- };
- } else {
- directChannel = JSON.parse(JSON.stringify(directChannel));
- }
-
- directChannel.display_name = Utils.displayUsername(teammateId);
- directChannel.teammate_id = teammateId;
- directChannel.status = UserStore.getStatus(teammateId) || 'offline';
-
- if (TeamStore.hasActiveMemberInTeam(TeamStore.getCurrentId(), teammateId)) {
- directChannels.push(directChannel);
- } else if (TeamStore.hasMemberNotInTeam(TeamStore.getCurrentId(), teammateId)) {
- directNonTeamChannels.push(directChannel);
- }
- }
-
- directChannels.sort(this.sortChannelsByDisplayName);
- directNonTeamChannels.sort(this.sortChannelsByDisplayName);
-
const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999);
+ const channelList = ChannelUtils.buildDisplayableChannelList(Object.assign([], ChannelStore.getAll()));
return {
activeId: currentChannelId,
members,
- publicChannels,
- privateChannels,
- directChannels,
- directNonTeamChannels,
+ ...channelList,
unreadCounts: JSON.parse(JSON.stringify(ChannelStore.getUnreadCounts())),
showTutorialTip: tutorialStep === TutorialSteps.CHANNEL_POPOVER,
currentTeam: TeamStore.getCurrent(),
@@ -379,6 +329,10 @@ export default class Sidebar extends React.Component {
}
);
+ if (ChannelUtils.isFavoriteChannel(channel)) {
+ ChannelActions.unmarkFavorite(channel.id);
+ }
+
this.setState(this.getStateFromStores());
}
@@ -387,16 +341,6 @@ export default class Sidebar extends React.Component {
}
}
- sortChannelsByDisplayName(a, b) {
- const locale = LocalizationStore.getLocale();
-
- if (a.display_name === b.display_name) {
- return a.name.localeCompare(b.name, locale, {numeric: true});
- }
-
- return a.display_name.localeCompare(b.display_name, locale, {numeric: true});
- }
-
showMoreChannelsModal() {
// manually show the modal because using data-toggle messes with keyboard focus when the modal is dismissed
$('#more_channels').modal({'data-channeltype': 'O'}).modal('show');
@@ -522,7 +466,7 @@ export default class Sidebar extends React.Component {
badge = {unreadCount.mentions};
this.badgesActive = true;
}
- } else if (this.state.loadingDMChannel === index && channel.type === 'D') {
+ } else if (this.state.loadingDMChannel === index && channel.type === Constants.DM_CHANNEL) {
badge = (
![]()
;
- } else if (channel.type === 'P') {
+ } else if (channel.type === Constants.PRIVATE_CHANNEL) {
icon =
@@ -461,6 +510,7 @@ export default class Navbar extends React.Component {
{renameChannelOption}
{deleteChannelOption}
{leaveChannelOption}
+ {toggleFavoriteOption}
;
} else {
// set up status icon for direct message channels (status is null for other channel types)
@@ -618,7 +562,15 @@ export default class Sidebar extends React.Component {
this.firstUnreadChannel = null;
this.lastUnreadChannel = null;
- // create elements for all 3 types of channels
+ // create elements for all 4 types of channels
+ const favoriteItems = this.state.favoriteChannels.map((channel, index, arr) => {
+ if (channel.type === Constants.DM_CHANNEL) {
+ return this.createChannelElement(channel, index, arr, this.handleLeaveDirectChannel);
+ }
+
+ return this.createChannelElement(channel);
+ });
+
const publicChannelItems = this.state.publicChannels.map(this.createChannelElement);
const privateChannelItems = this.state.privateChannels.map(this.createChannelElement);
@@ -801,6 +753,17 @@ export default class Sidebar extends React.Component {
className='nav-pills__container'
onScroll={this.onScroll}
>
+ {favoriteItems.length !== 0 &&
-
+
-
+
+
++
+ {favoriteItems}
+
-
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 9b78b28034..24d61e5f3d 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -986,6 +986,8 @@ "channel_header.flagged": "Flagged Posts", "channel_header.group": "Group", "channel_header.leave": "Leave {term}", + "channel_header.addToFavorites": "Add to Favorites", + "channel_header.removeFromFavorites": "Remove from Favorites", "channel_header.manageMembers": "Manage Members", "channel_header.notificationPreferences": "Notification Preferences", "channel_header.recentMentions": "Recent Mentions", diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 58ca512b6d..579875b472 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -378,6 +378,11 @@ } } +.channel-header__favorites { + float: left; + margin: 1px 10px 0 0; +} + .app__body { .channel-header__links { diff --git a/webapp/utils/channel_utils.jsx b/webapp/utils/channel_utils.jsx new file mode 100644 index 0000000000..119021fce5 --- /dev/null +++ b/webapp/utils/channel_utils.jsx @@ -0,0 +1,135 @@ + +import Constants from 'utils/constants.jsx'; +const Preferences = Constants.Preferences; + +import * as Utils from 'utils/utils.jsx'; + +import UserStore from 'stores/user_store.jsx'; +import TeamStore from 'stores/team_store.jsx'; +import PreferenceStore from 'stores/preference_store.jsx'; +import LocalizationStore from 'stores/localization_store.jsx'; + +/** + * Returns list of sorted channels grouped by type. Favorites here is considered as separated type. + * + * Example: { + * publicChannels: [...], + * privateChannels: [...], + * directChannels: [...], + * directNonTeamChannels: [...], + * favoriteChannels: [...] + * } + */ +export function buildDisplayableChannelList(persistentChannels) { + const missingDMChannels = createMissingDirectChannels(persistentChannels); + + const channels = persistentChannels.concat(missingDMChannels).map(completeDirectChannelInfo); + channels.sort(sortChannelsByDisplayName); + + const favoriteChannels = channels.filter(isFavoriteChannel); + const notFavoriteChannels = channels.filter(not(isFavoriteChannel)); + const directChannels = notFavoriteChannels.filter(andX(isDirectChannel, isDirectChannelVisible)); + + return { + favoriteChannels, + publicChannels: notFavoriteChannels.filter(isOpenChannel), + privateChannels: notFavoriteChannels.filter(isPrivateChannel), + directChannels: directChannels.filter(isConnectedToTeamMember), + directNonTeamChannels: directChannels.filter(not(isConnectedToTeamMember)) + }; +} + +export function isFavoriteChannel(channel) { + return PreferenceStore.getBool(Preferences.CATEGORY_FAVORITE_CHANNEL, channel.id); +} + +export function isOpenChannel(channel) { + return channel.type === Constants.OPEN_CHANNEL; +} + +export function isPrivateChannel(channel) { + return channel.type === Constants.PRIVATE_CHANNEL; +} + +export function isDirectChannel(channel) { + return channel.type === Constants.DM_CHANNEL; +} + +export function isDirectChannelVisible(channel) { + const channelId = Utils.getUserIdFromChannelName(channel); + + return PreferenceStore.getBool(Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, channelId); +} + +export function completeDirectChannelInfo(channel) { + if (!isDirectChannel(channel)) { + return channel; + } + + const dmChannelClone = JSON.parse(JSON.stringify(channel)); + const teammateId = Utils.getUserIdFromChannelName(channel); + + return Object.assign(dmChannelClone, { + display_name: Utils.displayUsername(teammateId), + teammate_id: teammateId, + status: UserStore.getStatus(teammateId) || 'offline' + }); +} + +export function sortChannelsByDisplayName(a, b) { + const locale = LocalizationStore.getLocale(); + + return buildDisplayNameAndTypeComparable(a).localeCompare(buildDisplayNameAndTypeComparable(b), locale, {numeric: true}); +} + +/* + * not exported helpers + */ + +function createMissingDirectChannels(channels) { + const directChannelsDisplayPreferences = PreferenceStore.getCategory(Preferences.CATEGORY_DIRECT_CHANNEL_SHOW); + + return Array. + from(directChannelsDisplayPreferences). + filter((entry) => entry[1] === 'true'). + map((entry) => entry[0]). + filter((teammateId) => !channels.some(Utils.isDirectChannelForUser.bind(null, teammateId))). + map(createFakeChannelCurried(UserStore.getCurrentId())); +} + +function createFakeChannel(userId, otherUserId) { + return { + name: Utils.getDirectChannelName(userId, otherUserId), + last_post_at: 0, + total_msg_count: 0, + type: Constants.DM_CHANNEL, + fake: true + }; +} + +function createFakeChannelCurried(userId) { + return (otherUserId) => createFakeChannel(userId, otherUserId); +} + +function isConnectedToTeamMember(channel) { + return isTeamMember(channel.teammate_id); +} + +function isTeamMember(userId) { + return TeamStore.hasActiveMemberInTeam(TeamStore.getCurrentId(), userId); +} + +function not(f) { + return (...args) => !f(...args); +} + +function andX(...fns) { + return (...args) => fns.every((f) => f(...args)); +} + +const defaultPrefix = 'D'; // fallback for future types +const typeToPrefixMap = {[Constants.OPEN_CHANNEL]: 'A', [Constants.PRIVATE_CHANNEL]: 'B', [Constants.DM_CHANNEL]: 'C'}; + +function buildDisplayNameAndTypeComparable(channel) { + return (typeToPrefixMap[channel.type] || defaultPrefix) + channel.display_name + channel.name; +} diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index 2dae06282a..f87b36fc85 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -54,6 +54,7 @@ export const Preferences = { CATEGORY_THEME: 'theme', CATEGORY_FLAGGED_POST: 'flagged_post', CATEGORY_NOTIFICATIONS: 'notifications', + CATEGORY_FAVORITE_CHANNEL: 'favorite_channel', EMAIL_INTERVAL: 'email_interval' };