Show convenient relative time in the email summary

src/EmailList.tsx

@@ -7,7 +7,7 @@ import EmailSummary from "./EmailSummary";
 
 type EmailListProps = {
 	account: IAccount | null;
-	client: Client | null;
+	client: Client;
 	mailbox: IMailbox | null;
 };
 
@@ -26,10 +26,9 @@ class EmailList extends React.Component<EmailListProps, EmailListState> {
 
 	render() {
 		if (
-			this.props.account == null ||
+			this.props.account === null ||
-			this.props.client == null ||
+			this.props.mailbox === null ||
-			this.props.mailbox == null ||
+			this.props.mailbox.emailIds === null
-			this.props.mailbox.emailIds == null
 		) {
 			return <Stack />;
 		} else {
@@ -37,12 +36,12 @@ class EmailList extends React.Component<EmailListProps, EmailListState> {
 				<Stack className="text-start">
 					{this.props.mailbox.emailIds.slice(0, 5).map((e) => (
 						<EmailSummary
-							account={this.props.account}
+							account={this.props.account!}
 							client={this.props.client}
 							emailId={e}
-							emailStub={this.props.client!.emailStub(e)}
+							emailStub={this.props.client.emailStub(e)!}
 							key={e}
-							mailbox={this.props.mailbox}
+							mailbox={this.props.mailbox!}
 						/>
 					))}
 				</Stack>

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;
+	account: IAccount;
-	client: Client | null;
+	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
+					<DateTime d={stub.receivedAt} />
-						? stub.receivedAt +
+					<span>
-							" - " +
+						{" - " +
 							(stub.from == null ? "?" : stub.from[0].name) +
 							" - " +
-							stub.subject
+							stub.subject}
-						: this.props.emailId}
+					</span>
 				</a>
 			</div>
 		);

src/client/Client.tsx

@@ -203,7 +203,11 @@ export default class Client {
 
 	emailStub(emailId: string): IEmailStub | null {
 		if (this.state.session == null) return null;
-		return this.state.session.emailStubs[emailId];
+		const result = this.state.session.emailStubs[emailId];
+		if (result === undefined) {
+			return null;
+		}
+		return result;
 	}
 
 	mailbox(accountId: string, mailboxId: string): IMailbox | null {

src/components/DateTime.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+type DateTimeProps = {
+	d: string;
+};
+
+const DateTime: React.FC<DateTimeProps> = ({ d }) => {
+	const datetime = Date.parse(d);
+	const now = Date.now();
+	const diff = (now - datetime) / 1000;
+	if (diff < 30) return <span>moments ago</span>;
+	if (diff < 60) return <span>{diff}s</span>;
+	if (diff < 60 * 60) return <span>{Math.round(diff / 60)}m</span>;
+	if (diff < 60 * 60 * 48) return <span>{Math.round(diff / (60 * 60))}h</span>;
+	if (diff < 60 * 60 * 24 * 365)
+		return <span>{Math.round(diff / (60 * 60 * 24))}d</span>;
+	return <span>{Math.round(diff / (60 * 60 * 24 * 365))}y</span>;
+};
+export default DateTime;