Show convenient relative time in the email summary

src/EmailSummary.tsx

@@ -1,15 +1,16 @@
-import React from "react";
 import Placeholder from "react-bootstrap/Placeholder";
+import React from "react";
 
 import Client from "./client/Client";
+import DateTime from "./components/DateTime";
 import { IAccount, IEmailStub, IMailbox } from "./client/types";
 
 type EmailSummaryProps = {
-	account: IAccount | null;
-	client: Client | null;
+	account: IAccount;
+	client: Client;
 	emailId: string;
 	emailStub: IEmailStub | null;
-	mailbox: IMailbox | null;
+	mailbox: IMailbox;
 };
 type EmailSummaryState = {};
 
@@ -25,8 +26,6 @@ class EmailSummary extends React.Component<
 	}
 
 	ensureData() {
-		if (this.props.account == null) return;
-		if (this.props.client == null) return;
 		this.props.client.ensureEmailStub(
 			this.props.account.id,
 			this.props.emailId,
@@ -34,13 +33,6 @@ class EmailSummary extends React.Component<
 	}
 
 	render() {
-		if (this.props.account == null || this.props.mailbox == null) {
-			return (
-				<div className="p-2 border pe-auto" key={this.props.emailId}>
-					<Placeholder animation="glow" />
-				</div>
-			);
-		}
 		const href =
 			"#" +
 			this.props.account.id +
@@ -49,16 +41,19 @@ class EmailSummary extends React.Component<
 			"/" +
 			this.props.emailId;
 		const stub = this.props.emailStub;
+		if (stub === null) {
+			return <Placeholder />;
+		}
 		return (
 			<div className="p-2 border" key={this.props.emailId}>
 				<a className="btn" href={href}>
-					{stub != null
-						? stub.receivedAt +
-							" - " +
+					<DateTime d={stub.receivedAt} />
+					<span>
+						{" - " +
 							(stub.from == null ? "?" : stub.from[0].name) +
 							" - " +
-							stub.subject
-						: this.props.emailId}
+							stub.subject}
+					</span>
 				</a>
 			</div>
 		);