eliribble
/
drishti
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Split email cache into full content and stubs. 

This also introduces status for in-flight requests to avoid perpetual,
unnecessary loops of change-the-re-get-data.
This commit is contained in:
Eli Ribble 2024-08-28 19:25:20 -07:00
parent fb53a7506f
commit 4e1922c5fa
8 changed files with 219 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.tsx
View File

@ -53,6 +53,7 @@ class App extends React.Component<AppProps, AppState> {
this.setState({
...this.state,
account: this.account(),
email: this.client.email(emailId),
location: {
accountId: accountId,
emailId: emailId,
@ -107,6 +108,7 @@ class App extends React.Component<AppProps, AppState> {
accounts: this.client.state.session
? this.client.state.session.accounts
: {},
email: this.client.email(this.state.location.emailId),
mailbox: this.mailbox(),
});
});
@ -130,6 +132,7 @@ class App extends React.Component<AppProps, AppState> {
accounts={this.state.accounts}
client={this.client}
email={this.state.email}
emailId={this.state.location.emailId}
mailbox={this.state.mailbox}
/>
<AuthModal

7
src/AppLayout.tsx
View File

@ -4,7 +4,7 @@ import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import AccountList from "./AccountList";
import EmailList from "./EmailList";
import EmailArea from "./EmailArea";
import MailboxList from "./MailboxList";
import Client from "./client/Client";
import { AccountIdMap, IAccount, IEmail, IMailbox } from "./client/types";
@ -14,6 +14,7 @@ type TopProps = {
accounts: AccountIdMap;
client: Client;
email: IEmail | null;
emailId: string;
mailbox: IMailbox | null;
};
@ -32,9 +33,11 @@ const AppLayout: React.FC<TopProps> = (props) => {
<MailboxList account={props.account} client={props.client} />
</Col>
<Col lg="11">
<EmailList
<EmailArea
account={props.account}
client={props.client}
email={props.email}
emailId={props.emailId}
mailbox={props.mailbox}
/>
</Col>

44
src/EmailArea.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from "react";
import Stack from "react-bootstrap/Stack";
import { IAccount, IEmail, IMailbox } from "./client/types";
import Client from "./client/Client";
import EmailContent from "./EmailContent";
import EmailList from "./EmailList";
type EmailAreaProps = {
account: IAccount | null;
client: Client;
email: IEmail | null;
emailId: string;
mailbox: IMailbox | null;
};
const EmailArea: React.FC<EmailAreaProps> = (props) => {
if (props.emailId === "") {
return (
<EmailList
account={props.account}
client={props.client}
mailbox={props.mailbox}
/>
);
} else {
return (
<Stack className="text-start">
<EmailList
account={props.account}
client={props.client}
mailbox={props.mailbox}
/>
<EmailContent
account={props.account}
client={props.client}
email={props.email}
emailId={props.emailId}
/>
</Stack>
);
}
};
export default EmailArea;

44
src/EmailContent.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from "react";
import Placeholder from "react-bootstrap/Placeholder";
import Client from "./client/Client";
import { IAccount, IEmail } from "./client/types";
type EmailContentProps = {
account: IAccount | null;
client: Client | null;
email: IEmail | null;
emailId: string;
};
type EmailContentState = {};
class EmailContent extends React.Component<
EmailContentProps,
EmailContentState
> {
componentDidMount() {
this.ensureData();
}
componentDidUpdate() {
this.ensureData();
}
ensureData() {
if (this.props.account == null) return;
if (this.props.client == null) return;
this.props.client.ensureEmailContent(
this.props.account.id,
this.props.emailId,
);
}
render() {
if (this.props.email == null) {
return <Placeholder />;
} else {
return <p>{this.props.email.preview}</p>;
}
}
}
export default EmailContent;

2
src/EmailList.tsx
View File

@ -40,7 +40,7 @@ class EmailList extends React.Component<EmailListProps, EmailListState> {
account={this.props.account}
client={this.props.client}
emailId={e}
email={this.props.client!.email(e)}
emailStub={this.props.client!.emailStub(e)}
key={e}
mailbox={this.props.mailbox}
/>

13
src/EmailSummary.tsx
View File

@ -2,13 +2,13 @@ import React from "react";
import Placeholder from "react-bootstrap/Placeholder";
import Client from "./client/Client";
import { IAccount, IEmail, IMailbox } from "./client/types";
import { IAccount, IEmailStub, IMailbox } from "./client/types";
type EmailSummaryProps = {
account: IAccount | null;
client: Client | null;
email: IEmail | null;
emailId: string;
emailStub: IEmailStub | null;
mailbox: IMailbox | null;
};
type EmailSummaryState = {};
@ -27,7 +27,10 @@ class EmailSummary extends React.Component<
ensureData() {
if (this.props.account == null) return;
if (this.props.client == null) return;
this.props.client.ensureEmailGet(this.props.account.id, this.props.emailId);
this.props.client.ensureEmailStub(
this.props.account.id,
this.props.emailId,
);
}
render() {
@ -48,8 +51,8 @@ class EmailSummary extends React.Component<
return (
<div className="p-2 border" key={this.props.emailId}>
<a className="btn" href={href}>
{this.props.email != null
? this.props.email.subject
{this.props.emailStub != null
? this.props.emailStub.subject
: this.props.emailId}
</a>
</div>

145
src/client/Client.tsx
View File

@ -6,7 +6,7 @@ import * as base64 from "base-64";
import * as jmapclient from "jmap-client-ts";
import { FetchTransport } from "jmap-client-ts/lib/utils/fetch-transport";
import { IAccount, IEmail, IMailbox, ISession } from "./types";
import { IAccount, IEmail, IEmailStub, IMailbox, ISession } from "./types";
type Callback = () => void;
@ -16,45 +16,31 @@ export interface IAuth {
}
export interface ClientState {
inFlight: {
emailContents: Set<string>;
emailStubs: Set<string>;
mailboxes: Set<string>;
};
session: ISession | null;
}
export default class Client {
// Get the currently active account
account(accountId: string): IAccount | null {
if (!(this.state.session && this.state.session.accounts)) return null;
return this.state.session.accounts[accountId];
}
// All objects which currently are listening for changes
callbacks: Array<Callback> = [];
jclient: jmapclient.Client | null = null;
state: ClientState = {
inFlight: {
emailContents: new Set(),
emailStubs: new Set(),
mailboxes: new Set(),
},
session: null,
};
onChange(f: Callback) {
this.callbacks.push(f);
}
// Ensure we have the fully-fleshed email
ensureEmailGet(accountId: string, emailId: string) {
if (this.state.session == null) return;
const existing = this.state.session.emails[emailId];
if (existing != null) return;
this.emailGet(accountId, emailId);
}
// Ensure we have the list of emails for the provided account and mailbox
ensureEmailList(accountId: string, mailboxId: string) {
const mailbox = this.mailbox(accountId, mailboxId);
if (mailbox != null && mailbox.emailIds != null) return;
this.emailList(accountId, mailboxId, []);
}
// Ensure that login happens. If this is called many times, only login once.
ensureLogin(auth: IAuth) {
if (this.jclient != null) return;
this.doLogin(auth);
// Get the currently active account
account(accountId: string): IAccount | null {
if (!(this.state.session && this.state.session.accounts)) return null;
return this.state.session.accounts[accountId];
}
// Make the request to get system metadata
@ -81,36 +67,110 @@ export default class Client {
return;
}
// Ensure we have the full email content
ensureEmailContent(accountId: string, emailId: string) {
if (this.state.session == null) return;
const existing = this.state.session.emails[emailId];
if (existing != null) return;
this.emailGetContent(accountId, emailId);
}
// Ensure we have the email summary
ensureEmailStub(accountId: string, emailId: string) {
if (this.state.session == null) return;
const existing = this.state.session.emailStubs[emailId];
if (existing != null) return;
this.emailGetStub(accountId, emailId);
}
// Ensure we have the list of emails for the provided account and mailbox
ensureEmailList(accountId: string, mailboxId: string) {
const mailbox = this.mailbox(accountId, mailboxId);
if (mailbox != null && mailbox.emailIds != null) return;
this.emailList(accountId, mailboxId, []);
}
// Ensure that login happens. If this is called many times, only login once.
ensureLogin(auth: IAuth) {
if (this.jclient != null) return;
this.doLogin(auth);
}
email(emailId: string): IEmail | null {
if (this.state.session == null) return null;
return this.state.session.emails[emailId];
}
emailGet(accountId: string, emailId: string) {
emailGetContent(accountId: string, emailId: string) {
if (this.jclient == null) return;
if (this.state.session == null) return;
if (this.state.inFlight.emailContents.has(emailId)) return;
this.state.inFlight.emailContents.add(emailId);
const msg = "Email get content";
this.jclient
.email_get({
accountId: accountId,
ids: [emailId],
properties: ["mailboxIds", "subject"],
})
.then((response) => {
console.log("Email response", response);
console.log(msg, "response", response);
response.list.forEach((e) => {
if (this.state.session == null) return;
const existing = this.state.session.emails[e.id];
const existing = this.state.session!.emails[e.id];
if (existing !== undefined && existing.subject !== e.subject) {
console.error(
"Expectations violation: email ID is not unique within the server!",
);
}
this.state.session.emails[e.id] = e;
this._triggerChange("Email " + e.id);
this.state.session!.emails[e.id] = {
...e,
id: e.id,
};
this._triggerChange(msg + e.id);
});
})
.catch((x) => {
console.error("Failed to get email", emailId, x);
console.error("Failed to get email content", emailId, x);
})
.finally(() => {
this.state.inFlight.emailContents.delete(emailId);
});
}
emailGetStub(accountId: string, emailId: string) {
if (this.jclient == null) return;
if (this.state.session == null) return;
if (this.state.inFlight.emailStubs.has(emailId)) return;
this.state.inFlight.emailStubs.add(emailId);
const msg = "Email get summary";
this.jclient
.email_get({
accountId: accountId,
ids: [emailId],
properties: ["subject"],
})
.then((response) => {
console.log(msg, "response", response);
response.list.forEach((e) => {
if (this.state.session == null) return;
const existing = this.state.session.emailStubs[e.id];
if (existing !== undefined && existing.subject !== e.subject) {
console.error(
"Expectations violation: email ID is not unique within the server!",
);
}
this.state.session.emailStubs[e.id] = {
id: e.id,
subject: e.subject,
};
this._triggerChange(msg + e.id);
});
})
.catch((x) => {
console.error("Failed to get email stub", emailId, x);
})
.finally(() => {
this.state.inFlight.emailStubs.delete(emailId);
});
}
@ -132,6 +192,11 @@ export default class Client {
});
}
emailStub(emailId: string): IEmailStub | null {
if (this.state.session == null) return null;
return this.state.session.emailStubs[emailId];
}
mailbox(accountId: string, mailboxId: string): IMailbox | null {
if (this.state.session == null) return null;
const account = this.state.session.accounts[accountId];
@ -161,7 +226,6 @@ export default class Client {
mailboxes.push({
...m,
emailIds: null,
emails: null,
});
});
account.mailboxes = mailboxes;
@ -169,6 +233,10 @@ export default class Client {
});
}
onChange(f: Callback) {
this.callbacks.push(f);
}
_triggerChange(msg: string) {
console.log("Client change", msg);
this.callbacks.forEach((c) => {
@ -191,6 +259,7 @@ export default class Client {
]),
),
emails: {},
emailStubs: {},
};
if (!this.state.session) return;
this._triggerChange("Session");

8
src/client/types.tsx
View File

@ -1,8 +1,12 @@
import client from "jmap-client-ts/lib/types";
export interface IEmailStub {
id: string;
subject: string;
}
export interface IMailbox extends client.IMailboxProperties {
emailIds: Array<string> | null;
emails: Array<client.IEmailProperties> | null;
}
export interface IEmail extends client.IEmailProperties {}
@ -13,9 +17,11 @@ export interface IAccount extends client.IAccount {
}
export type AccountIdMap = { [accountId: string]: IAccount };
export type EmailStubIdMap = { [emailId: string]: IEmailStub };
export type EmailIdMap = { [emailId: string]: IEmail };
export interface ISession extends client.ISession {
accounts: AccountIdMap;
emails: EmailIdMap;
emailStubs: EmailStubIdMap;
}