drishti/src/EmailContent.tsx

import Button from "react-bootstrap/Button";
import Col from "react-bootstrap/Col";
import Container from "react-bootstrap/Container";
import Form from "react-bootstrap/Form";
import Placeholder from "react-bootstrap/Placeholder";
import React from "react";
import Row from "react-bootstrap/Row";

import Client from "./client/Client";
import EmailContentHTML from "./EmailContentHTML";
import EmailContentText from "./EmailContentText";
import { IAccount, IEmail } from "./client/types";

type EmailContentProps = {
	account: IAccount | null;
	client: Client | null;
	email: IEmail | null;
	emailId: string;
};

type EmailContentState = {
	showHTML: boolean;
};

class EmailContent extends React.Component<
	EmailContentProps,
	EmailContentState
> {
	state = {
		showHTML: false,
	};

	componentDidMount() {
		this.ensureData();
	}
	componentDidUpdate() {
		this.ensureData();
	}

	ensureData() {
		if (this.props.account == null) return;
		if (this.props.client == null) return;
		this.props.client.ensureEmailContent(
			this.props.account.id,
			this.props.emailId,
		);
	}

	render() {
		const email = this.props.email;
		if (email == null || email.bodyValues == null) {
			return <Placeholder />;
		}
		let content;
		if (this.state.showHTML) {
			if (email.htmlBody != null) {
				content = <EmailContentHTML email={email} />;
			} else {
				return <p>No HTML content</p>;
			}
		} else {
			if (email.textBody != null) {
				content = <EmailContentText email={email} />;
			} else {
				return <p>No text content/</p>;
			}
		}
		return (
			<Container fluid>
				<Row>
					<Form>
						<Form.Group
							as={Row}
							className="mb-3"
							controlId="formHorizontalEmail"
						>
							<Form.Label column sm={2}>
								From
							</Form.Label>
							<Col sm={10}>
								<p>
									{email.from == null
										? "unknown"
										: email.from.map((f) => f.name)}
								</p>
							</Col>
							<Form.Label column sm={2}>
								Received
							</Form.Label>
							<Col sm={10}>{email.receivedAt}</Col>
						</Form.Group>
					</Form>
				</Row>
				<Row>
					<Button
						onClick={() => {
							this.switchDisplay();
						}}
					>
						Switch
					</Button>
				</Row>
				<Row>{content}</Row>
			</Container>
		);
	}

	switchDisplay() {
		if (this.state.showHTML) {
			this.setState({
				showHTML: false,
			});
		} else {
			this.setState({
				showHTML: true,
			});
		}
	}
}
export default EmailContent;