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.
This commit is contained in:
parent
bf1ad0326d
commit
fb53a7506f
4 changed files with 34 additions and 43 deletions
26
src/App.tsx
26
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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue