drishti/src/EmailSummary.tsx

import { Trash } from "react-bootstrap-icons";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import ButtonToolbar from "react-bootstrap/ButtonToolbar";
import Placeholder from "react-bootstrap/Placeholder";
import React from "react";
import Stack from "react-bootstrap/Stack";

import Client from "./client/Client";
import DateTime from "./components/DateTime";
import EmailFrom from "./components/EmailFrom";
import { IAccount, IEmailStub, IMailbox } from "./client/types";

type EmailSummaryProps = {
	account: IAccount;
	client: Client;
	emailId: string;
	emailStub: IEmailStub | null;
	mailbox: IMailbox;
};
type EmailSummaryState = {};

class EmailSummary extends React.Component<
	EmailSummaryProps,
	EmailSummaryState
> {
	componentDidMount() {
		this.ensureData();
	}
	componentDidUpdate() {
		this.ensureData();
	}

	ensureData() {
		this.props.client.ensureEmailStub(
			this.props.account.id,
			this.props.emailId,
		);
	}

	render() {
		const href =
			"#" +
			this.props.account.id +
			"/" +
			this.props.mailbox.id +
			"/" +
			this.props.emailId;
		const stub = this.props.emailStub;
		if (stub === null) {
			return <Placeholder />;
		}
		return (
			<Stack
				direction="horizontal"
				className="email-summary"
				key={this.props.emailId}
			>
				<DateTime className="received" d={stub.receivedAt} />
				<EmailFrom froms={stub.from} />
				<div>{stub.from == null ? "?" : stub.from[0].name}</div>
				<a className="btn" href={href}>
					<div>{stub.subject}</div>
				</a>
				<ButtonToolbar className="ms-auto">
					<ButtonGroup className="me-2">
						<Button
							onClick={() => {
								this.props.client.emailMoveTrash(
									this.props.account,
									this.props.emailId,
								);
							}}
						>
							<Trash />
						</Button>
						<Button>2</Button>
					</ButtonGroup>
				</ButtonToolbar>
			</Stack>
		);
	}
}
export default EmailSummary;