element-web/src/components/views/dialogs/ForwardDialog.tsx

/*
Copyright 2021 The Matrix.org Foundation C.I.C.

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.
*/

import React, {useMemo, useState, useEffect} from "react";
import classnames from "classnames";
import {MatrixEvent} from "matrix-js-sdk/src/models/event";
import {Room} from "matrix-js-sdk/src/models/room";
import {MatrixClient} from "matrix-js-sdk/src/client";

import {_t} from "../../../languageHandler";
import SettingsStore from "../../../settings/SettingsStore";
import {UIFeature} from "../../../settings/UIFeature";
import {Layout} from "../../../settings/Layout";
import {IDialogProps} from "./IDialogProps";
import BaseDialog from "./BaseDialog";
import {avatarUrlForUser} from "../../../Avatar";
import EventTile from "../rooms/EventTile";
import SearchBox from "../../structures/SearchBox";
import RoomAvatar from "../avatars/RoomAvatar";
import AccessibleButton from "../elements/AccessibleButton";
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import DMRoomMap from "../../../utils/DMRoomMap";
import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";

const AVATAR_SIZE = 30;

interface IProps extends IDialogProps {
    cli: MatrixClient;
    event: MatrixEvent;
}

interface IEntryProps {
    room: Room;
    // Callback to forward the message to this room
    send(): Promise<void>;
}

enum SendState {
    CanSend,
    Sending,
    Sent,
    Failed,
}

const Entry: React.FC<IEntryProps> = ({ room, send }) => {
    const [sendState, setSendState] = useState<SendState>(SendState.CanSend);

    let label;
    let className;
    if (sendState === SendState.CanSend) {
        label = _t("Send");
        className = "mx_ForwardList_canSend";
    } else if (sendState === SendState.Sending) {
        label = _t("Sending…");
        className = "mx_ForwardList_sending";
    } else if (sendState === SendState.Sent) {
        label = _t("Sent");
        className = "mx_ForwardList_sent";
    } else {
        label = _t("Failed to send");
        className = "mx_ForwardList_sendFailed";
    }

    return <div className="mx_ForwardList_entry">
        <RoomAvatar room={room} height={32} width={32} />
        <span className="mx_ForwardList_entry_name">{ room.name }</span>
        <AccessibleButton
            kind={sendState === SendState.Failed ? "danger_outline" : "primary_outline"}
            className={className}
            onClick={async () => {
                setSendState(SendState.Sending);
                try {
                    await send();
                    setSendState(SendState.Sent);
                } catch (e) {
                    setSendState(SendState.Failed);
                }
            }}
            disabled={sendState !== SendState.CanSend}
        >
            { label }
        </AccessibleButton>
    </div>;
};

const ForwardDialog: React.FC<IProps> = ({ cli, event, onFinished }) => {
    const userId = cli.getUserId();
    const [profileInfo, setProfileInfo] = useState<any>({});
    useEffect(() => {
        cli.getProfileInfo(userId).then(info => setProfileInfo(info));
    }, [cli, userId]);

    // For the message preview we fake the sender as ourselves
    const mockEvent = new MatrixEvent({
        type: "m.room.message",
        sender: userId,
        content: event.getContent(),
        unsigned: {
            age: 97,
        },
        event_id: "$9999999999999999999999999999999999999999999",
        room_id: "!999999999999999999:example.org",
    });
    mockEvent.sender = {
        name: profileInfo.displayname || userId,
        userId: userId,
        getAvatarUrl: (..._) => {
            return avatarUrlForUser(
                { avatarUrl: profileInfo.avatar_url },
                AVATAR_SIZE, AVATAR_SIZE, "crop",
            );
        },
        getMxcAvatarUrl: () => profileInfo.avatar_url,
    };

    const visibleRooms = useMemo(() => sortRooms(
        cli.getVisibleRooms().filter(
            room => room.getMyMembership() === "join" &&
                !(SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()),
        ),
    ), [cli]);

    const [query, setQuery] = useState("");
    const lcQuery = query.toLowerCase();

    const [rooms, dms] = visibleRooms.reduce((arr, room) => {
        if (room.name.toLowerCase().includes(lcQuery)) {
            if (DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
                arr[1].push(room);
            } else {
                arr[0].push(room);
            }
        }
        return arr;
    }, [[], []]);

    const previewLayout = SettingsStore.getValue("layout");

    return <BaseDialog
        title={ _t("Forward message") }
        className="mx_ForwardDialog"
        contentId="mx_ForwardList"
        onFinished={onFinished}
        fixedWidth={false}
    >
        <div className={classnames("mx_ForwardDialog_preview", {
            "mx_IRCLayout": previewLayout == Layout.IRC,
            "mx_GroupLayout": previewLayout == Layout.Group,
        })}>
            <EventTile
                mxEvent={mockEvent}
                layout={previewLayout}
                enableFlair={SettingsStore.getValue(UIFeature.Flair)}
            />
        </div>
        <div className="mx_ForwardList">
            <h2>{ _t("Forward to") }</h2>
            <SearchBox
                className="mx_textinput_icon mx_textinput_search"
                placeholder={ _t("Filter your rooms and DMs") }
                onSearch={setQuery}
                autoComplete={true}
                autoFocus={true}
            />
            <AutoHideScrollbar className="mx_ForwardList_content" id="mx_ForwardList">
                { rooms.length > 0 ? (
                    <div className="mx_ForwardList_section">
                        <h3>{ _t("Rooms") }</h3>
                        { rooms.map(room => {
                            return <Entry
                                key={room.roomId}
                                room={room}
                                send={() => cli.sendEvent(room.roomId, event.getType(), event.getContent())}
                            />;
                        }) }
                    </div>
                ) : undefined }

                { dms.length > 0 ? (
                    <div className="mx_ForwardList_section">
                        <h3>{ _t("Direct Messages") }</h3>
                        { dms.map(room => {
                            return <Entry
                                key={room.roomId}
                                room={room}
                                send={() => cli.sendEvent(room.roomId, event.getType(), event.getContent())}
                            />;
                        }) }
                    </div>
                ) : null }

                { rooms.length + dms.length < 1 ? <span className="mx_ForwardList_noResults">
                    { _t("No results") }
                </span> : undefined }
            </AutoHideScrollbar>
        </div>
    </BaseDialog>;
};

export default ForwardDialog;