Select a mailbox on click, show its email IDs

We'll eventually want to populate them.

src/App.tsx

@@ -59,7 +59,12 @@ class App extends React.Component<AppProps, AppState> {
 	}
 
 	onMailboxSelect(mailboxId: string) {
-		console.log("Mailbox", mailboxId);
+		if (!this.state.account) return;
+		this.client.emailList(this.state.account.id, mailboxId, []);
+		this.setState({
+			...this.state,
+			mailbox: this.client.mailbox(this.state.account.id, mailboxId),
+		});
 	}
 
 	// Load up auth credentials from the local store
@@ -113,7 +118,9 @@ class App extends React.Component<AppProps, AppState> {
 					accounts={this.state.accounts}
 					client={this.client}
 					mailbox={this.state.mailbox}
-					onMailboxSelect={this.onMailboxSelect}
+					onMailboxSelect={(m) => {
+						this.onMailboxSelect(m);
+					}}
 				/>
 				<AuthModal
 					show={this.client.state.session == null}

src/EmailList.tsx

@@ -25,17 +25,33 @@ class EmailList extends React.Component<EmailListProps, EmailListState> {
 	}
 
 	render() {
-		return !(this.props.account && this.props.mailbox) ? (
-			<Stack />
-		) : (
-			<Stack>
-				{this.props.mailbox.emails.map((m) => (
-					<div className="p-2" key={m.id}>
-						{m.subject}
-					</div>
-				))}
-			</Stack>
-		);
+		if (
+			this.props.account == null ||
+			this.props.mailbox == null ||
+			this.props.mailbox.emailIds == null
+		) {
+			return <Stack />;
+		} else if (this.props.mailbox.emails == null) {
+			return (
+				<Stack>
+					{this.props.mailbox.emailIds.map((e) => (
+						<div className="p-2" key={e}>
+							Email {e}
+						</div>
+					))}
+				</Stack>
+			);
+		} else {
+			return (
+				<Stack>
+					{this.props.mailbox.emails.map((m) => (
+						<div className="p-2" key={m.id}>
+							{m.subject}
+						</div>
+					))}
+				</Stack>
+			);
+		}
 	}
 }
 export default EmailList;

src/MailboxList.tsx

@@ -25,7 +25,8 @@ class MailboxList extends React.Component<MailboxListProps, MailboxListState> {
 	}
 
 	render() {
-		return this.props.account == null ? (
+		return this.props.account == null ||
+			this.props.account.mailboxes == null ? (
 			<Stack />
 		) : (
 			<Stack>

src/client/Client.tsx

@@ -65,10 +65,45 @@ export default class Client {
 		return;
 	}
 
-	emailList(accountId: string, mailboxId: string, ids: Array<string>) {}
+	emailList(accountId: string, mailboxId: string, ids: Array<string>) {
+		if (this.jclient == null) return;
+		/*this.jclient.email_get({
+			accountId: accountId,
+			ids: [],
+			properties: ["threadId"]
+		});*/
+		this.jclient
+			.email_query({
+				accountId: accountId,
+				filter: { inMailbox: mailboxId },
+			})
+			.then((response) => {
+				const mailbox = this.mailbox(accountId, mailboxId);
+				if (mailbox == null) return;
+				mailbox.emailIds = response.ids;
+				this._triggerChange();
+			})
+			.catch(() => {
+				console.error("OH NOES");
+			});
+	}
 
+	mailbox(accountId: string, mailboxId: string): IMailbox | null {
+		if (this.state.session == null) return null;
+		const account = this.state.session.accounts[accountId];
+		if (account.mailboxes == null) return null;
+		for (let i = 0; i < account.mailboxes.length; i++) {
+			if (account.mailboxes[i].id === mailboxId) {
+				return account.mailboxes[i];
+			}
+		}
+		return null;
+	}
 	mailboxList(accountId: string, ids: Array<string>) {
 		if (this.jclient == null) return;
+		if (this.state.session == null) return;
+		// We already populated the list
+		if (this.state.session.accounts[accountId].mailboxes != null) return;
 		this.jclient
 			.mailbox_get({
 				accountId: accountId,
@@ -81,7 +116,8 @@ export default class Client {
 				response.list.forEach((m) => {
 					mailboxes.push({
 						...m,
-						emails: [],
+						emailIds: null,
+						emails: null,
 					});
 				});
 				account.mailboxes = mailboxes;
@@ -106,7 +142,7 @@ export default class Client {
 			accounts: Object.fromEntries(
 				Object.entries(session.accounts).map(([key, account]) => [
 					key,
-					{ ...account, id: key.toString(), mailboxes: [] },
+					{ ...account, id: key.toString(), mailboxes: null },
 				]),
 			),
 		};

src/client/types.tsx

@@ -1,12 +1,13 @@
 import client from "jmap-client-ts/lib/types";
 
 export interface IMailbox extends client.IMailboxProperties {
-	emails: Array<client.IEmailProperties>;
+	emailIds: Array<string> | null;
+	emails: Array<client.IEmailProperties> | null;
 }
 
 export interface IAccount extends client.IAccount {
 	id: string;
-	mailboxes: Array<IMailbox>;
+	mailboxes: Array<IMailbox> | null;
 }
 
 export type AccountIdMap = { [accountId: string]: IAccount };