Show an indicator when there are any pins in the room

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

src/components/views/rooms/PinnedEventsPanel.js

@@ -19,6 +19,7 @@ import MatrixClientPeg from "../../../MatrixClientPeg";
 import AccessibleButton from "../elements/AccessibleButton";
 import PinnedEventTile from "./PinnedEventTile";
 import { _t } from '../../../languageHandler';
+import PinningUtils from "../../../utils/PinningUtils";
 
 module.exports = React.createClass({
     displayName: 'PinnedEventsPanel',
@@ -61,12 +62,7 @@ module.exports = React.createClass({
 
             Promise.all(promises).then((contexts) => {
                 // Filter out the messages before we try to render them
-                const pinned = contexts.filter((context) => {
+                const pinned = contexts.filter((context) => PinningUtils.isPinnable(context.event));
-                    if (!context) return false; // no context == not applicable for the room
-                    if (context.event.getType() !== "m.room.message") return false;
-                    if (context.event.isRedacted()) return false;
-                    return true;
-                });
 
                 this.setState({ loading: false, pinned });
             });

src/components/views/rooms/RoomHeader.js

@@ -167,6 +167,13 @@ module.exports = React.createClass({
         return true;
     },
 
+    _hasPins: function() {
+        const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", '');
+        if (!currentPinEvent) return false;
+
+        return !(currentPinEvent.getContent().pinned && currentPinEvent.getContent().pinned.length <= 0);
+    },
+
     /**
      * After editing the settings, get the new name for the room
      *
@@ -333,14 +340,17 @@ module.exports = React.createClass({
         }
 
         if (this.props.onPinnedClick && UserSettingsStore.isFeatureEnabled('feature_pinning')) {
-            let newPinsNotification = null;
+            let pinsIndicator = null;
             if (this._hasUnreadPins()) {
-                newPinsNotification = (<div className="mx_RoomHeader_unreadPinsIndicator"></div>);
+                pinsIndicator = (<div className="mx_RoomHeader_pinsIndicator mx_RoomHeader_pinsIndicatorUnread" />);
+            } else if (this._hasPins()) {
+                pinsIndicator = (<div className="mx_RoomHeader_pinsIndicator" />);
             }
+
             pinnedEventsButton =
                 <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_pinnedButton"
                                   onClick={this.props.onPinnedClick} title={_t("Pinned Messages")}>
-                    { newPinsNotification }
+                    { pinsIndicator }
                     <TintableSvg src="img/icons-pin.svg" width="16" height="16" />
                 </AccessibleButton>;
         }

src/utils/PinningUtils.js

@@ -0,0 +1,30 @@
+/*
+Copyright 2017 Travis Ralston
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export default class PinningUtils {
+    /**
+     * Determines if the given event may be pinned.
+     * @param {MatrixEvent} event The event to check.
+     * @return {boolean} True if the event may be pinned, false otherwise.
+     */
+    static isPinnable(event) {
+        if (!event) return false;
+        if (event.getType() !== "m.room.message") return false;
+        if (event.isRedacted()) return false;
+
+        return true;
+    }
+}