Iterate pinned messages

src/components/views/rooms/PinnedEventTile.tsx

@@ -19,110 +19,86 @@ import React from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import AccessibleButton from "../elements/AccessibleButton";
 import MessageEvent from "../messages/MessageEvent";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from '../../../languageHandler';
-import {formatFullDate} from '../../../DateUtils';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { formatDate } from '../../../DateUtils';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { getUserNameColorClass } from "../../../utils/FormattingUtils";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 interface IProps {
-    mxRoom: Room;
-    mxEvent: MatrixEvent;
-    onUnpinned?(): void;
+    room: Room;
+    event: MatrixEvent;
+    onUnpinClicked?(): void;
 }
 
+const AVATAR_SIZE = 24;
+
 @replaceableComponent("views.rooms.PinnedEventTile")
 export default class PinnedEventTile extends React.Component<IProps> {
+    static contextType = MatrixClientContext;
+
     private onTileClicked = () => {
         dis.dispatch({
             action: 'view_room',
-            event_id: this.props.mxEvent.getId(),
+            event_id: this.props.event.getId(),
             highlighted: true,
-            room_id: this.props.mxEvent.getRoomId(),
+            room_id: this.props.event.getRoomId(),
         });
     };
 
-    private onUnpinClicked = () => {
-        const pinnedEvents = this.props.mxRoom.currentState.getStateEvents("m.room.pinned_events", "");
-        if (!pinnedEvents || !pinnedEvents.getContent().pinned) {
-            // Nothing to do: already unpinned
-            if (this.props.onUnpinned) this.props.onUnpinned();
-        } else {
-            const pinned = pinnedEvents.getContent().pinned;
-            const index = pinned.indexOf(this.props.mxEvent.getId());
-            if (index !== -1) {
-                pinned.splice(index, 1);
-                MatrixClientPeg.get().sendStateEvent(this.props.mxRoom.roomId, 'm.room.pinned_events', {pinned}, '')
-                    .then(() => {
-                        if (this.props.onUnpinned) this.props.onUnpinned();
-                    });
-            } else if (this.props.onUnpinned) this.props.onUnpinned();
-        }
-    };
-
-    private canUnpin() {
-        return this.props.mxRoom.currentState.mayClientSendStateEvent('m.room.pinned_events', MatrixClientPeg.get());
-    }
-
     render() {
-        const sender = this.props.mxEvent.getSender();
-        // Get the latest sender profile rather than historical
-        const senderProfile = this.props.mxRoom.getMember(sender);
-        const avatarSize = 40;
+        const sender = this.props.event.getSender();
+        const senderProfile = this.props.room.getMember(sender);
 
         let unpinButton = null;
-        if (this.canUnpin()) {
+        if (this.props.onUnpinClicked) {
             unpinButton = (
-                <AccessibleButton onClick={this.onUnpinClicked} className="mx_PinnedEventTile_unpinButton">
-                    <img
-                        src={require("../../../../res/img/cancel-red.svg")}
-                        width="8"
-                        height="8"
-                        alt={_t('Unpin Message')}
-                        title={_t('Unpin Message')}
-                    />
-                </AccessibleButton>
+                <AccessibleTooltipButton
+                    onClick={this.props.onUnpinClicked}
+                    className="mx_PinnedEventTile_unpinButton"
+                    title={_t("Unpin")}
+                />
             );
         }
 
-        return (
-            <div className="mx_PinnedEventTile">
-                <div className="mx_PinnedEventTile_actions">
-                    <AccessibleButton
-                        className="mx_PinnedEventTile_gotoButton mx_textButton"
-                        onClick={this.onTileClicked}
-                    >
-                        { _t("Jump to message") }
-                    </AccessibleButton>
-                    { unpinButton }
-                </div>
+        return <div className="mx_PinnedEventTile">
+            <MemberAvatar
+                className="mx_PinnedEventTile_senderAvatar"
+                member={senderProfile}
+                width={AVATAR_SIZE}
+                height={AVATAR_SIZE}
+                fallbackUserId={sender}
+            />
 
-                <span className="mx_PinnedEventTile_senderAvatar">
-                    <MemberAvatar
-                        member={senderProfile}
-                        width={avatarSize}
-                        height={avatarSize}
-                        fallbackUserId={sender}
-                    />
-                </span>
-                <span className="mx_PinnedEventTile_sender">
-                    { senderProfile ? senderProfile.name : sender }
-                </span>
-                <span className="mx_PinnedEventTile_timestamp">
-                    { formatFullDate(new Date(this.props.mxEvent.getTs())) }
-                </span>
-                <div className="mx_PinnedEventTile_message">
-                    <MessageEvent
-                        mxEvent={this.props.mxEvent}
-                        className="mx_PinnedEventTile_body"
-                        maxImageHeight={150}
-                        onHeightChanged={() => {}} // we need to give this, apparently
-                    />
-                </div>
+            <span className={"mx_PinnedEventTile_sender " + getUserNameColorClass(sender)}>
+                { senderProfile?.name || sender }
+            </span>
+
+            { unpinButton }
+
+            <div className="mx_PinnedEventTile_message">
+                <MessageEvent
+                    mxEvent={this.props.event}
+                    className="mx_PinnedEventTile_body"
+                    maxImageHeight={150}
+                    onHeightChanged={() => {}} // we need to give this, apparently
+                />
             </div>
-        );
+
+            <div className="mx_PinnedEventTile_footer">
+                <span className="mx_PinnedEventTile_timestamp">
+                    { formatDate(new Date(this.props.event.getTs())) }
+                </span>
+
+                <AccessibleButton onClick={this.onTileClicked} kind="link">
+                    { _t("View message") }
+                </AccessibleButton>
+            </div>
+        </div>;
     }
 }