Standardize on links for refresh.

Turns out I was doubling-up unnecessarily and had an event handler _and_
a hash change detection. This just made things complex. Now I use the
hash for both the mailbox and the email navigation.

I don't yet do anything with the email part.

src/App.tsx

@@ -2,13 +2,14 @@ import "./App.css";
 import "./style.scss";
 
 import Client, { IAuth } from "./client/Client";
-import { AccountIdMap, IAccount, IMailbox } from "./client/types";
+import { AccountIdMap, IAccount, IEmail, IMailbox } from "./client/types";
 import AppLayout from "./AppLayout";
 import AuthModal from "./AuthModal";
 import React from "react";
 
 interface ILocation {
 	accountId: string;
+	emailId: string;
 	mailboxId: string;
 }
 
@@ -16,6 +17,7 @@ type AppState = {
 	auth: IAuth;
 	account: IAccount | null;
 	accounts: AccountIdMap;
+	email: IEmail | null;
 	location: ILocation;
 	mailbox: IMailbox | null;
 };
@@ -37,7 +39,8 @@ class App extends React.Component<AppProps, AppState> {
 		account: null,
 		accounts: {},
 		auth: { email: "", password: "" },
-		location: { accountId: "", mailboxId: "" },
+		email: null,
+		location: { accountId: "", emailId: "", mailboxId: "" },
 		mailbox: null,
 	};
 
@@ -46,14 +49,19 @@ class App extends React.Component<AppProps, AppState> {
 		const parts = hash.split("/");
 		const accountId = parts[0];
 		const mailboxId = parts[1];
+		const emailId = parts[2];
 		this.setState({
 			...this.state,
 			account: this.account(),
 			location: {
 				accountId: accountId,
+				emailId: emailId,
 				mailboxId: mailboxId,
 			},
+			mailbox: this.client.mailbox(accountId, mailboxId),
 		});
+		if (!this.state.account) return;
+		this.client.ensureEmailList(accountId, mailboxId);
 	}
 
 	// When the user provides credentials
@@ -70,16 +78,6 @@ class App extends React.Component<AppProps, AppState> {
 		this.client.doLogin({ email, password });
 	}
 
-	onMailboxSelect(mailboxId: string) {
-		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),
-		});
-		window.location.hash = this.state.location.accountId + "/" + mailboxId;
-	}
-
 	// Load up auth credentials from the local store
 	loadAuth() {
 		const data = localStorage.getItem("auth");
@@ -131,10 +129,8 @@ class App extends React.Component<AppProps, AppState> {
 					account={this.state.account}
 					accounts={this.state.accounts}
 					client={this.client}
+					email={this.state.email}
 					mailbox={this.state.mailbox}
-					onMailboxSelect={(m) => {
-						this.onMailboxSelect(m);
-					}}
 				/>
 				<AuthModal
 					show={this.client.state.session == null}

src/AppLayout.tsx

@@ -7,14 +7,14 @@ import AccountList from "./AccountList";
 import EmailList from "./EmailList";
 import MailboxList from "./MailboxList";
 import Client from "./client/Client";
-import { AccountIdMap, IAccount, IMailbox } from "./client/types";
+import { AccountIdMap, IAccount, IEmail, IMailbox } from "./client/types";
 
 type TopProps = {
 	account: IAccount | null;
 	accounts: AccountIdMap;
 	client: Client;
+	email: IEmail | null;
 	mailbox: IMailbox | null;
-	onMailboxSelect: (mailboxId: string) => void;
 };
 
 const AppLayout: React.FC<TopProps> = (props) => {
@@ -29,11 +29,7 @@ const AppLayout: React.FC<TopProps> = (props) => {
 			</Row>
 			<Row>
 				<Col lg="1">
-					<MailboxList
+					<MailboxList account={props.account} client={props.client} />
-						account={props.account}
-						client={props.client}
-						onMailboxSelect={props.onMailboxSelect}
-					/>
 				</Col>
 				<Col lg="11">
 					<EmailList

src/Mailbox.tsx

@@ -1,12 +1,19 @@
-import ListGroup from "react-bootstrap/ListGroup";
+import React from "react";
+
+type MailboxProps = {
+	accountId: string;
+	id: string;
+	name: string;
+};
+
+const Mailbox: React.FC<MailboxProps> = ({ accountId, id, name }) => {
+	const href = "#" + accountId + "/" + id;
 
-function Mailbox() {
 	return (
-		<ListGroup>
+		<a href={href} className="p-2" key={id}>
-			<ListGroup.Item>Inbox</ListGroup.Item>
+			{name}
-			<ListGroup.Item>Spam</ListGroup.Item>
+		</a>
-		</ListGroup>
 	);
-}
+};
 
 export default Mailbox;

src/MailboxList.tsx

@@ -1,14 +1,13 @@
 import React from "react";
-import Button from "react-bootstrap/Button";
 import Stack from "react-bootstrap/Stack";
 
 import Client from "./client/Client";
 import { IAccount } from "./client/types";
+import Mailbox from "./Mailbox";
 
 type MailboxListProps = {
 	account: IAccount | null;
 	client: Client | null;
-	onMailboxSelect: (mailboxId: string) => void;
 };
 
 type MailboxListState = {};
@@ -20,10 +19,6 @@ class MailboxList extends React.Component<MailboxListProps, MailboxListState> {
 		this.props.client.mailboxList(this.props.account.id, []);
 	}
 
-	onMailboxClick(id: string) {
-		this.props.onMailboxSelect(id);
-	}
-
 	render() {
 		return this.props.account == null ||
 			this.props.account.mailboxes == null ? (
@@ -31,15 +26,12 @@ class MailboxList extends React.Component<MailboxListProps, MailboxListState> {
 		) : (
 			<Stack>
 				{this.props.account.mailboxes.map((m) => (
-					<Button
+					<Mailbox
-						className="p-2"
+						accountId={this.props.account!.id}
+						id={m.id}
 						key={m.id}
-						onClick={() => {
+						name={m.name}
-							this.onMailboxClick(m.id);
+					/>
-						}}
-					>
-						{m.name}
-					</Button>
 				))}
 			</Stack>
 		);