drishti/src/EmailSummary.tsx

85 lines
1.9 KiB
TypeScript

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;