PLT-3506 Added flagged posts functionality (mattermost#3679)

* Added flagged posts functionality * UI Improvements to flags (mattermost#3697) * Added flag functionality for mobile * Updating flagged text (mattermost#3699) * Add back button to RHS thread when coming from flagged posts * Updating position of flags (mattermost#3708) * Plt 3506 - Reverting flag position (mattermost#3724) * Revert "Updating position of flags (mattermost#3708)" This reverts commit aaa05632c5d9eda35a048300a5bd7e99584c5b58. * Fixing the icon in search * Help text and white space improvements (mattermost#3730) * Updatng help text and some white spacing. * Updating help text
Revanth47 · Aug 4, 2016 · fc89c20 · fc89c20
1 parent 248f45f
commit fc89c20
Show file tree

Hide file tree

Showing 31 changed files with 911 additions and 103 deletions.
diff --git a/actions/global_actions.jsx b/actions/global_actions.jsx
@@ -190,7 +190,8 @@ export function emitPostFocusRightHandSideFromSearch(post, isMentionSearch) {
  AppDispatcher.handleServerAction({
  type: ActionTypes.RECEIVED_POST_SELECTED,
  postId: Utils.getRootId(post),
- from_search: SearchStore.getSearchTerm()
+ from_search: SearchStore.getSearchTerm(),
+ from_flagged_posts: SearchStore.getIsFlaggedPosts()
  });
 
  AppDispatcher.handleServerAction({

diff --git a/actions/post_actions.jsx b/actions/post_actions.jsx
@@ -9,12 +9,13 @@ import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 
 import * as PostUtils from 'utils/post_utils.jsx';
-import Constants from 'utils/constants.jsx';
-const ActionTypes = Constants.ActionTypes;
-
 import Client from 'client/web_client.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 
+import Constants from 'utils/constants.jsx';
+const ActionTypes = Constants.ActionTypes;
+const Preferences = Constants.Preferences;
+
 export function handleNewPost(post, msg) {
  if (ChannelStore.getCurrentId() === post.channel_id) {
  if (window.isActive) {
@@ -116,3 +117,38 @@ export function setUnreadPost(channelId, postId) {
  ChannelStore.emitLastViewed(lastViewed, ownNewMessage);
  }
 }
+
+export function flagPost(postId) {
+ AsyncClient.savePreference(Preferences.CATEGORY_FLAGGED_POST, postId, 'true');
+}
+
+export function unflagPost(postId, success) {
+ const pref = {
+ user_id: UserStore.getCurrentId(),
+ category: Preferences.CATEGORY_FLAGGED_POST,
+ name: postId
+ };
+ AsyncClient.deletePreferences([pref], success);
+}
+
+export function getFlaggedPosts() {
+ Client.getFlaggedPosts(0, Constants.POST_CHUNK_SIZE,
+ (data) => {
+ AppDispatcher.handleServerAction({
+ type: ActionTypes.RECEIVED_SEARCH,
+ results: data,
+ is_flagged_posts: true
+ });
+
+ AppDispatcher.handleServerAction({
+ type: ActionTypes.RECEIVED_SEARCH_TERM,
+ term: null,
+ do_search: false,
+ is_mention_search: false
+ });
+ },
+ (err) => {
+ AsyncClient.dispatchError(err, 'getFlaggedPosts');
+ }
+ );
+}
diff --git a/client/client.jsx b/client/client.jsx
@@ -1434,6 +1434,15 @@ export default class Client {
  end(this.handleResponse.bind(this, 'getPostsAfter', success, error));
  }
 
+ getFlaggedPosts(offset, limit, success, error) {
+ request.
+ get(`${this.getTeamNeededRoute()}/posts/flagged/${offset}/${limit}`).
+ set(this.defaultHeaders).
+ type('application/json').
+ accept('application/json').
+ end(this.handleResponse.bind(this, 'getFlaggedPosts', success, error));
+ }
+
  // Routes for Files
 
  getFileInfo(filename, success, error) {

diff --git a/components/channel_header.jsx b/components/channel_header.jsx
@@ -26,20 +26,19 @@ import PreferenceStore from 'stores/preference_store.jsx';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
 import Client from 'client/web_client.jsx';
+import * as AsyncClient from 'utils/async_client.jsx';
+import {getFlaggedPosts} from 'actions/post_actions.jsx';
+
 import Constants from 'utils/constants.jsx';
 const UserStatuses = Constants.UserStatuses;
+const ActionTypes = Constants.ActionTypes;
 
+import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {browserHistory} from 'react-router/es6';
-
-const ActionTypes = Constants.ActionTypes;
-
 import {Tooltip, OverlayTrigger, Popover} from 'react-bootstrap';
 
-import React from 'react';
-
 export default class ChannelHeader extends React.Component {
  constructor(props) {
  super(props);
@@ -50,6 +49,7 @@ export default class ChannelHeader extends React.Component {
  this.showRenameChannelModal = this.showRenameChannelModal.bind(this);
  this.hideRenameChannelModal = this.hideRenameChannelModal.bind(this);
  this.openRecentMentions = this.openRecentMentions.bind(this);
+ this.getFlagged = this.getFlagged.bind(this);
 
  const state = this.getStateFromStores();
  state.showEditChannelPurposeModal = false;
@@ -159,6 +159,11 @@ export default class ChannelHeader extends React.Component {
  });
  }
 
+ getFlagged(e) {
+ e.preventDefault();
+ getFlaggedPosts();
+ }
+
  openRecentMentions(e) {
  if (Utils.cmdOrCtrlPressed(e) && e.shiftKey && e.keyCode === Constants.KeyCodes.M) {
  e.preventDefault();
@@ -220,6 +225,8 @@ export default class ChannelHeader extends React.Component {
  }
 
  render() {
+ const flagIcon = Constants.FLAG_ICON_OUTLINE_SVG;
+
  if (!this.validState()) {
  return null;
  }
@@ -233,6 +240,16 @@ export default class ChannelHeader extends React.Component {
  />
  </Tooltip>
  );
+
+ const flaggedTooltip = (
+ <Tooltip id='flaggedTooltip'>
+ <FormattedMessage
+ id='channel_header.flagged'
+ defaultMessage='Flagged Posts'
+ />
+ </Tooltip>
+ );
+
  const popoverContent = (
  <Popover
  id='header-popover'
@@ -592,6 +609,26 @@ export default class ChannelHeader extends React.Component {
  </OverlayTrigger>
  </div>
  </th>
+ <th>
+ <div className='dropdown channel-header__links'>
+ <OverlayTrigger
+ delayShow={Constants.OVERLAY_TIME_DELAY}
+ placement='bottom'
+ overlay={flaggedTooltip}
+ >
+ <a
+ href='#'
+ type='button'
+ onClick={this.getFlagged}
+ >
+ <span
+ className='icon icon__flag'
+ dangerouslySetInnerHTML={{__html: flagIcon}}
+ />
+ </a>
+ </OverlayTrigger>
+ </div>
+ </th>
  </tr>
  </tbody>
  </table>

diff --git a/components/post_view/components/post.jsx b/components/post_view/components/post.jsx
@@ -100,6 +100,10 @@ export default class Post extends React.Component {
  return true;
  }
 
+ if (nextProps.isFlagged !== this.props.isFlagged) {
+ return true;
+ }
+
  if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
  return true;
  }
@@ -245,6 +249,7 @@ export default class Post extends React.Component {
  compactDisplay={this.props.compactDisplay}
  displayNameType={this.props.displayNameType}
  useMilitaryTime={this.props.useMilitaryTime}
+ isFlagged={this.props.isFlagged}
  />
  <PostBody
  post={post}
@@ -281,5 +286,6 @@ Post.propTypes = {
  commentCount: React.PropTypes.number,
  isCommentMention: React.PropTypes.bool,
  useMilitaryTime: React.PropTypes.bool.isRequired,
- emojis: React.PropTypes.object.isRequired
+ emojis: React.PropTypes.object.isRequired,
+ isFlagged: React.PropTypes.bool
 };
diff --git a/components/post_view/components/post_header.jsx b/components/post_view/components/post_header.jsx
@@ -72,6 +72,7 @@ export default class PostHeader extends React.Component {
  currentUser={this.props.currentUser}
  compactDisplay={this.props.compactDisplay}
  useMilitaryTime={this.props.useMilitaryTime}
+ isFlagged={this.props.isFlagged}
  />
  </li>
  </ul>
@@ -97,5 +98,6 @@ PostHeader.propTypes = {
  sameUser: React.PropTypes.bool.isRequired,
  compactDisplay: React.PropTypes.bool,
  displayNameType: React.PropTypes.string,
- useMilitaryTime: React.PropTypes.bool.isRequired
+ useMilitaryTime: React.PropTypes.bool.isRequired,
+ isFlagged: React.PropTypes.bool.isRequired
 };