Show invite reasons

Displays the reason for invitation in the invitation dialog, requiring a
click to reveal the message.

Signed-off-by: Robin Townsend <robin@robin.town>

src/components/views/elements/EventTilePreview.tsx

@@ -19,7 +19,6 @@ import classnames from 'classnames';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 
 import * as Avatar from '../../../Avatar';
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import EventTile from '../rooms/EventTile';
 import SettingsStore from "../../../settings/SettingsStore";
 import {Layout} from "../../../settings/Layout";
@@ -40,61 +39,84 @@ interface IProps {
      * classnames to apply to the wrapper of the preview
      */
     className: string;
+
+    /**
+     * The ID of the displayed user
+     */
+    userId: string;
+
+    /**
+     * The display name of the displayed user
+     */
+    displayName?: string;
+
+    /**
+     * The mxc:// avatar URL of the displayed user
+     */
+    avatarUrl?: string;
+
+    /**
+     * Whether the EventTile should appear faded
+     */
+    faded?: boolean;
+
+    /**
+     * Callback for when the component is clicked
+     */
+    onClick?: () => void;
 }
 
-/* eslint-disable camelcase */
 interface IState {
-    userId: string;
-    displayname: string;
-    avatar_url: string;
+    message: string;
+    faded: boolean;
+    eventTileKey: number;
 }
-/* eslint-enable camelcase */
 
 const AVATAR_SIZE = 32;
 
 export default class EventTilePreview extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
-
         this.state = {
-            userId: "@erim:fink.fink",
-            displayname: "Erimayas Fink",
-            avatar_url: null,
+            message: props.message,
+            faded: !!props.faded,
+            eventTileKey: 0,
         };
     }
 
-    async componentDidMount() {
-        // Fetch current user data
-        const client = MatrixClientPeg.get();
-        const userId = client.getUserId();
-        const profileInfo = await client.getProfileInfo(userId);
-        const avatarUrl = Avatar.avatarUrlForUser(
-            {avatarUrl: profileInfo.avatar_url},
-            AVATAR_SIZE, AVATAR_SIZE, "crop");
-
+    changeMessage(message: string) {
         this.setState({
-            userId,
-            displayname: profileInfo.displayname,
-            avatar_url: avatarUrl,
+            message,
+            // Change the EventTile key to force React to create a new instance
+            eventTileKey: this.state.eventTileKey + 1,
         });
     }
 
-    private fakeEvent({userId, displayname, avatar_url: avatarUrl}: IState) {
+    unfade() {
+        this.setState({ faded: false });
+    }
+
+    private fakeEvent({message}: IState) {
+        const avatarUrl = Avatar.avatarUrlForUser(
+            { avatarUrl: this.props.avatarUrl },
+            AVATAR_SIZE, AVATAR_SIZE, "crop",
+        );
+
         // Fake it till we make it
         /* eslint-disable quote-props */
         const rawEvent = {
             type: "m.room.message",
-            sender: userId,
+            sender: this.props.userId,
             content: {
                 "m.new_content": {
                     msgtype: "m.text",
-                    body: this.props.message,
-                    displayname: displayname,
+                    body: message,
+                    displayname: this.props.displayName,
                     avatar_url: avatarUrl,
                 },
                 msgtype: "m.text",
-                body: this.props.message,
-                displayname: displayname,
+                body: message,
+                displayname: this.props.displayName,
                 avatar_url: avatarUrl,
             },
             unsigned: {
@@ -108,8 +130,8 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
 
         // Fake it more
         event.sender = {
-            name: displayname,
-            userId: userId,
+            name: this.props.displayName,
+            userId: this.props.userId,
             getAvatarUrl: (..._) => {
                 return avatarUrl;
             },
@@ -124,10 +146,12 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
         const className = classnames(this.props.className, {
             "mx_IRCLayout": this.props.layout == Layout.IRC,
             "mx_GroupLayout": this.props.layout == Layout.Group,
+            "mx_EventTilePreview_faded": this.state.faded,
         });
 
-        return <div className={className}>
+        return <div className={className} onClick={this.props.onClick}>
             <EventTile
+                key={this.state.eventTileKey}
                 mxEvent={event}
                 layout={this.props.layout}
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}