Add list of accounts from the session.

This isn't great, but it shows data from the API being fed into the
interface.

src/AccountList.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Dropdown from "react-bootstrap/Dropdown";
+
+import { IAccount } from "jmap-client-ts/lib/types";
+
+type AccountIdMap = { [accountId: string]: IAccount };
+type AccountListProps = {
+	accounts: AccountIdMap;
+};
+
+const AccountList: React.FC<AccountListProps> = ({ accounts }) => {
+	return (
+		<Dropdown>
+			<Dropdown.Toggle variant="success" id="dropdown-basic">
+				Dropdown Button
+			</Dropdown.Toggle>
+
+			<Dropdown.Menu>
+				{Object.keys(accounts).map((key: keyof AccountIdMap) => (
+					<Dropdown.Item href={"#/" + key}>{accounts[key].name}</Dropdown.Item>
+				))}
+			</Dropdown.Menu>
+		</Dropdown>
+	);
+};
+export default AccountList;

src/App.tsx

@@ -2,9 +2,10 @@ import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import * as base64 from "base-64";
 import { Client } from "jmap-client-ts";
+import { ISession } from "jmap-client-ts/lib/types";
 import { FetchTransport } from "jmap-client-ts/lib/utils/fetch-transport";
 
-//import MailboxList from "./Mailbox";
+import AccountList from "./AccountList";
 import AuthModal from "./AuthModal";
 import React, { useEffect, useState } from "react";
 
@@ -16,12 +17,14 @@ interface IAuth {
 interface IAppState {
 	auth: IAuth;
 	client: Client | null;
+	session: ISession | null;
 }
 
 const App = () => {
 	const [state, setInternalState] = useState<IAppState>({
 		auth: { email: "", password: "" },
 		client: null,
+		session: null,
 	});
 
 	// When the user provides credentials
@@ -51,7 +54,16 @@ const App = () => {
 
 		state.client
 			.fetchSession()
-			.then((response) => console.log(response))
+			.then(() => {
+				console.log("Session recieved");
+				if (state.client) {
+					state.session = state.client.getSession();
+					setInternalState({
+						...state,
+						session: state.client.getSession(),
+					});
+				}
+			})
 			.catch((error) => console.error(error));
 
 		return;
@@ -76,7 +88,7 @@ const App = () => {
 	return (
 		<div className="App">
 			{state && state.auth ? (
-				<p>{state.auth.email}</p>
+				<AccountList accounts={state.session ? state.session.accounts : {}} />
 			) : (
 				<AuthModal onLogin={onLogin}></AuthModal>
 			)}