Pin/unpin message option in a message's context menu

Signed-off-by: Travis Ralston <travpc@gmail.com>

src/components/views/context_menus/MessageContextMenu.js

@@ -65,6 +65,13 @@ module.exports = React.createClass({
         this.setState({canRedact});
     },
 
+    _isPinned: function() {
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        const pinnedEvent = room.currentState.getStateEvents('m.room.pinned_events', '');
+        if (!pinnedEvent) return false;
+        return pinnedEvent.getContent().pinned.includes(this.props.mxEvent.getId());
+    },
+
     onResendClick: function() {
         Resend.resend(this.props.mxEvent);
         this.closeMenu();
@@ -122,6 +129,22 @@ module.exports = React.createClass({
         this.closeMenu();
     },
 
+    onPinClick: function() {
+        MatrixClientPeg.get().getStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', '').then(event => {
+            const eventIds = (event ? event.pinned : []) || [];
+            if (!eventIds.includes(this.props.mxEvent.getId())) {
+                // Not pinned - add
+                eventIds.push(this.props.mxEvent.getId());
+            } else {
+                // Pinned - remove
+                eventIds.splice(eventIds.indexOf(this.props.mxEvent.getId()), 1);
+            }
+
+            MatrixClientPeg.get().sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
+        });
+        this.closeMenu();
+    },
+
     closeMenu: function() {
         if (this.props.onFinished) this.props.onFinished();
     },
@@ -147,6 +170,7 @@ module.exports = React.createClass({
         let redactButton;
         let cancelButton;
         let forwardButton;
+        let pinButton;
         let viewSourceButton;
         let viewClearSourceButton;
         let unhidePreviewButton;
@@ -186,6 +210,11 @@ module.exports = React.createClass({
                         { _t('Forward Message') }
                     </div>
                 );
+                pinButton = (
+                    <div className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
+                        { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
+                    </div>
+                );
             }
         }
 
@@ -246,6 +275,7 @@ module.exports = React.createClass({
                 {redactButton}
                 {cancelButton}
                 {forwardButton}
+                {pinButton}
                 {viewSourceButton}
                 {viewClearSourceButton}
                 {unhidePreviewButton}

src/i18n/strings/en_EN.json

@@ -213,6 +213,8 @@
   "You have successfully set a password!": "You have successfully set a password!",
   "You can now return to your account after signing out, and sign in on other devices.": "You can now return to your account after signing out, and sign in on other devices.",
   "Continue": "Continue",
+  "Pin Message": "Pin Message",
+  "Unpin Message": "Unpin Message",
   "Please set a password!": "Please set a password!",
   "This will allow you to return to your account after signing out, and sign in on other devices.": "This will allow you to return to your account after signing out, and sign in on other devices.",
   "You have successfully set a password and an email address!": "You have successfully set a password and an email address!",

src/i18n/strings/en_US.json

@@ -199,6 +199,8 @@
     "You have successfully set a password and an email address!": "You have successfully set a password and an email address!",
     "Remember, you can always set an email address in user settings if you change your mind.": "Remember, you can always set an email address in user settings if you change your mind.",
     "Warning": "Warning",
+    "Pin Message": "Pin Message",
+    "Unpin Message": "Unpin Message",
     "Checking for an update...": "Checking for an update...",
     "Error encountered (%(errorDetail)s).": "Error encountered (%(errorDetail)s).",
     "No update available.": "No update available.",