Create button to choose between HTML and text-based email content.

src/EmailContent.tsx

@@ -1,8 +1,12 @@
+import Button from "react-bootstrap/Button";
+import Container from "react-bootstrap/Container";
 import Placeholder from "react-bootstrap/Placeholder";
 import React from "react";
-import Stack from "react-bootstrap/Stack";
+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 = {
@@ -12,12 +16,18 @@ type EmailContentProps = {
 	emailId: string;
 };
 
-type EmailContentState = {};
+type EmailContentState = {
+	showHTML: boolean;
+};
 
 class EmailContent extends React.Component<
 	EmailContentProps,
 	EmailContentState
 > {
+	state = {
+		showHTML: false,
+	};
+
 	componentDidMount() {
 		this.ensureData();
 	}
@@ -38,41 +48,46 @@ class EmailContent extends React.Component<
 		const email = this.props.email;
 		if (email == null || email.bodyValues == null) {
 			return <Placeholder />;
-		} else if (email.textBody != null) {
+		}
-			return (
+		let content;
-				<Stack>
+		if (this.state.showHTML) {
-					<li>{email.receivedAt}</li>
+			if (email.htmlBody != null) {
-					{email.textBody.map((t) =>
+				content = <EmailContentHTML email={email} />;
-						t.partId === undefined ? (
-							<Placeholder />
-						) : (
-							<div
-								dangerouslySetInnerHTML={{
-									__html: email.bodyValues![t.partId].value,
-								}}
-							/>
-						),
-					)}
-				</Stack>
-			);
-		} else if (email.htmlBody != null) {
-			return (
-				<Stack>
-					{email.htmlBody.map((h) =>
-						h.partId === undefined ? (
-							<Placeholder />
-						) : (
-							<div
-								dangerouslySetInnerHTML={{
-									__html: email.bodyValues![h.partId].value,
-								}}
-							/>
-						),
-					)}
-				</Stack>
-			);
 			} else {
-			return <p>Nothing to display :/</p>;
+				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>
+					<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,
+			});
 		}
 	}
 }

src/EmailContentHTML.tsx

@@ -0,0 +1,36 @@
+import Placeholder from "react-bootstrap/Placeholder";
+import React from "react";
+import Stack from "react-bootstrap/Stack";
+
+import { IAccount, IEmail, IMailbox } from "./client/types";
+import Client from "./client/Client";
+import EmailContent from "./EmailContent";
+import EmailList from "./EmailList";
+
+type EmailContentHTMLProps = {
+	email: IEmail;
+};
+
+const EmailContentHTML: React.FC<EmailContentHTMLProps> = (props) => {
+	const email = props.email;
+	if (email.htmlBody == null) {
+		return <Placeholder />;
+	}
+	return (
+		<Stack>
+			{email.htmlBody.map((h) =>
+				h.partId === undefined ? (
+					<Placeholder />
+				) : (
+					<div
+						key={h.partId}
+						dangerouslySetInnerHTML={{
+							__html: email.bodyValues![h.partId].value,
+						}}
+					/>
+				),
+			)}
+		</Stack>
+	);
+};
+export default EmailContentHTML;

src/EmailContentText.tsx

@@ -0,0 +1,39 @@
+import Placeholder from "react-bootstrap/Placeholder";
+import React from "react";
+import Stack from "react-bootstrap/Stack";
+
+import { IAccount, IEmail, IMailbox } from "./client/types";
+import Client from "./client/Client";
+import EmailContent from "./EmailContent";
+import EmailList from "./EmailList";
+
+type EmailContentTextProps = {
+	email: IEmail;
+};
+
+const EmailContentText: React.FC<EmailContentTextProps> = (props) => {
+	const email = props.email;
+	if (email.textBody == null) {
+		return <Placeholder />;
+	}
+	return (
+		<Stack>
+			<li>{email.receivedAt}</li>
+			<pre>
+				{email.textBody.map((t) =>
+					t.partId === undefined ? (
+						<Placeholder />
+					) : (
+						<div
+							key={t.partId}
+							dangerouslySetInnerHTML={{
+								__html: email.bodyValues![t.partId].value,
+							}}
+						/>
+					),
+				)}
+			</pre>
+		</Stack>
+	);
+};
+export default EmailContentText;